/* ================= Hero animations: industry sub-pages + city pages =================
   Base styles show the finished frame (used as-is when visitors prefer reduced motion).
   Animations run only under prefers-reduced-motion: no-preference. */
.ind-anim, .city-map { display: block; width: 100%; height: 100%; font-family: var(--font-sans, 'Outfit', sans-serif); }

/* ---------- Industry: search -> ad -> call -> booked lead (8s) ---------- */
.ia-bg { fill: #f6f1e9; }
.ia-card { fill: #fffdf9; stroke: #e2d9cc; }
.ia-query { font-size: 15px; fill: #2a2a27; }
.ia-caret { fill: #be1e2d; transform: translateX(var(--ia-w)); }
.ia-ico-muted { color: #8b857a; } .ia-ico-white { color: #fff; } .ia-ico-red { color: #be1e2d; }
.ia-tag { fill: #f3e3e3; } .ia-tagt { font-size: 10.5px; font-weight: 600; fill: #9d1a26; text-anchor: middle; letter-spacing: .02em; }
.ia-dom { font-size: 12px; fill: #6d6a63; }
.ia-h { font-size: 16.5px; font-weight: 600; fill: #1f1f1c; }
.ia-p { font-size: 12.5px; fill: #6d6a63; }
.ia-stars path { fill: #e3a72f; }
.ia-cta rect { fill: #be1e2d; } .ia-cta text { font-size: 13px; font-weight: 600; fill: #fff; text-anchor: middle; }
.ia-ripple { fill: none; stroke: #be1e2d; stroke-width: 2; opacity: 0; }
.ia-cursor { fill: #1f1f1c; stroke: #fff; stroke-width: 1.4; opacity: 0; transform: translate(294px, 214px); }
.ia-phone { fill: #22211f; } .ia-notch { fill: #3b3a36; }
.ia-ph-t { font-size: 15px; font-weight: 600; fill: #fff; text-anchor: middle; }
.ia-ph-sub { font-size: 11.5px; fill: #b9b3a8; text-anchor: middle; }
.ia-callbg { fill: #2f9e5a; } .ia-callpulse { fill: none; stroke: #2f9e5a; stroke-width: 2; opacity: 0; }
.ia-okbg { fill: #be1e2d; }
.ia-clock { font-size: 34px; font-weight: 500; fill: #f3eee6; text-anchor: middle; letter-spacing: -.02em; }
.ia-idlebg { fill: #34332f; } .ia-ico-dim { color: #8f897e; }
.ia-ringing { opacity: 0; }
.ia-idle { opacity: 0; }
.ia-icobg { fill: #f6e7e6; }
.ia-bar { fill: #e3d9cb; transform-box: fill-box; transform-origin: 50% 100%; }
.ia-bar--new { fill: #be1e2d; }
.ia-plus { font-size: 22px; font-weight: 700; fill: #be1e2d; }

/* ---------- City: map zooms in, pin drops and sparkles (9s) ---------- */
.cm-bg { fill: #f6f1e9; }
.cm-map { transform-origin: 0 0; transform: var(--cm-zoom); }
.cm-land { fill: #e7ded1; }
.cm-near { fill: #e9e1d4; }
.cm-borders--fine { stroke-width: .6; stroke: #f6f1e9; }
.cm-borders { fill: none; stroke: #fbf8f2; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cm-st--on { fill: #efd3d1; stroke: #cf8f90; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cm-ring circle { fill: rgba(190,30,45,.06); stroke: rgba(190,30,45,.45); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.cm-ring circle:nth-child(2), .cm-ring circle:nth-child(3) { opacity: 0; }
.cm-pinbody { fill: #be1e2d; } .cm-pinhole { fill: #fff; } .cm-shadow { fill: rgba(40,30,20,.22); }
.cm-spark line { stroke: #e3a72f; stroke-width: 2.4; stroke-linecap: round; }
.cm-spark { opacity: 0; }
.cm-card-bg { fill: rgba(255,253,249,.96); stroke: #e2d9cc; }
.cm-title { font-size: 19px; font-weight: 700; fill: #1f1f1c; }
.cm-sub { font-size: 12.5px; fill: #6d6a63; }
.cm-chip rect { fill: #f3ece2; stroke: #e2d6c6; } .cm-chip text { font-size: 11px; font-weight: 600; fill: #4b4843; text-anchor: middle; }
.cm-live circle { fill: #2f9e5a; } .cm-live text { font-size: 11px; font-weight: 600; fill: #2f7a4a; text-anchor: end; }

@media (prefers-reduced-motion: no-preference) {
  /* industry */
  .ia-typeclip { transform-box: fill-box; transform-origin: 0 50%; animation: ia-type 8s infinite; }
  .ia-caret { animation: ia-caret 8s infinite, ia-blink .9s steps(1) infinite; }
  .ia-ad { animation: ia-ad 8s ease infinite; }
  .ia-cursor { animation: ia-cursor 8s cubic-bezier(.45,.05,.3,1) infinite; }
  .ia-ripple { transform-box: fill-box; transform-origin: center; animation: ia-ripple 8s ease-out infinite; }
  .ia-cta rect { animation: ia-press 8s infinite; }
  .ia-ringing { animation: ia-ringing 8s infinite; }
  .ia-idle { animation: ia-idle 8s infinite; }
  .ia-shake { animation: ia-shake 8s infinite; }
  .ia-callpulse { transform-box: fill-box; transform-origin: center; animation: ia-pulse 8s ease-out infinite; }
  .ia-booked { transform-box: fill-box; transform-origin: center; animation: ia-booked 8s ease infinite; }
  .ia-bar--new { animation: ia-bar 8s cubic-bezier(.3,1.4,.5,1) infinite; }
  .ia-plus { animation: ia-plus 8s ease infinite; }
  /* city: zoom in once and stay; rings and sparkle keep pulsing */
  .cm-map { animation: cm-zoom 2.8s cubic-bezier(.65,0,.35,1) .4s both; }
  .cm-st--on { animation: cm-state 1.2s ease 1.7s both; }
  .cm-drop { animation: cm-drop .8s cubic-bezier(.3,1.5,.5,1) 3.1s both; }
  .cm-spark { transform-origin: 0 0; animation: cm-spark 2.4s ease-out 3.5s infinite backwards; }
  .cm-ring circle { animation: cm-ring 2.4s ease-out 3.6s infinite backwards; }
  .cm-ring circle:nth-child(2) { animation-delay: 4.4s; }
  .cm-ring circle:nth-child(3) { animation-delay: 5.2s; }
  .cm-card { animation: cm-card .7s ease 3.5s both; }
  .cm-chip { animation: cm-chip .5s ease both; }
  .cm-live circle { animation: ia-blink 1.2s steps(1) infinite; }
}
@keyframes ia-type { 0%,3% { transform: scaleX(0); animation-timing-function: steps(var(--ia-steps)); } 28%,95% { transform: scaleX(1); } 98%,100% { transform: scaleX(0); } }
@keyframes ia-caret { 0%,3% { transform: translateX(0); animation-timing-function: steps(var(--ia-steps)); } 28%,95% { transform: translateX(var(--ia-w)); } 98%,100% { transform: translateX(0); } }
@keyframes ia-blink { 50% { opacity: 0; } }
@keyframes ia-ad { 0%,29% { opacity: 0; transform: translate(28px, 108px); } 36%,92% { opacity: 1; transform: translate(28px, 94px); } 97%,100% { opacity: 0; transform: translate(28px, 94px); } }
@keyframes ia-cursor { 0%,38% { opacity: 0; transform: translate(560px, 380px); } 41% { opacity: 1; transform: translate(530px, 350px); } 51% { transform: translate(294px, 214px) scale(1); } 53% { transform: translate(294px, 214px) scale(.82); } 56% { transform: translate(294px, 214px) scale(1); opacity: 1; } 64%,100% { opacity: 0; transform: translate(300px, 222px); } }
@keyframes ia-ripple { 0%,52% { opacity: 0; transform: scale(.4); } 53% { opacity: .7; transform: scale(.4); } 63%,100% { opacity: 0; transform: scale(2.6); } }
@keyframes ia-press { 0%,52% { fill: #be1e2d; } 53%,57% { fill: #8f1520; } 60%,100% { fill: #be1e2d; } }
@keyframes ia-idle { 0%,55% { opacity: 1; } 57%,96% { opacity: 0; } 99%,100% { opacity: 1; } }
@keyframes ia-ringing { 0%,56% { opacity: 0; } 59%,73% { opacity: 1; } 76%,100% { opacity: 0; } }
@keyframes ia-shake { 0%,58% { transform: translate(90px,104px) rotate(0); } 59%,61%,63%,65%,67%,69%,71% { transform: translate(90px,104px) rotate(-9deg); } 60%,62%,64%,66%,68%,70% { transform: translate(90px,104px) rotate(9deg); } 72%,100% { transform: translate(90px,104px) rotate(0); } }
@keyframes ia-pulse { 0%,58% { opacity: 0; transform: scale(1); } 59% { opacity: .8; transform: scale(1); } 66% { opacity: 0; transform: scale(1.9); } 67% { opacity: .8; transform: scale(1); } 74%,100% { opacity: 0; transform: scale(1.9); } }
@keyframes ia-booked { 0%,75% { opacity: 0; transform: scale(.85); } 79%,92% { opacity: 1; transform: scale(1); } 97%,100% { opacity: 0; transform: scale(1); } }
@keyframes ia-bar { 0%,77% { transform: scaleY(.12); } 83%,93% { transform: scaleY(1); } 98%,100% { transform: scaleY(.12); } }
@keyframes ia-plus { 0%,79% { opacity: 0; transform: translateY(6px); } 83%,92% { opacity: 1; transform: translateY(0); } 97%,100% { opacity: 0; } }

@keyframes cm-zoom { from { transform: var(--cm-start); } to { transform: var(--cm-zoom); } }
@keyframes cm-state { from { fill: #e7ded1; stroke: #fbf8f2; } to { fill: #efd3d1; stroke: #cf8f90; } }
@keyframes cm-drop { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-spark { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes cm-ring { 0% { opacity: 0; transform: scale(.25); } 6% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes cm-card { from { opacity: 0; transform: translate(28px, 304px); } to { opacity: 1; transform: translate(28px, 288px); } }
@keyframes cm-chip { from { opacity: 0; } to { opacity: 1; } }

/* Frame for the animated hero (shares .page-hero-media sizing with photo heroes) */
.page-hero-media--anim { background: #f6f1e9; }
.page-hero-media--anim svg { position: absolute; inset: 0; }