/* ==========================================================================
   Signature SEO growth animation — "the story in 10 seconds"
   Pure SVG + CSS keyframes (JS only advances the numbers + pause state).
   Master loop: 12s. Scene map:
     0.0–2.0s  Invisible (#9, "Before")          0%   – 16.7%
     2.0–4.0s  We build + optimize               16.7% – 33.3%
     4.0–6.5s  Ranking climbs + local map        33.3% – 54.2%
     6.5–9.5s  Traffic & leads grow              54.2% – 79.2%
     9.5–12s   Proof (report card + wordmark)    79.2% – 100%
   No layout shift: container reserves space with aspect-ratio.
   ========================================================================== */

.sig{
  position:relative;
  border-radius:24px;
  background:linear-gradient(158deg,#ffffff 0%,#f3f4ee 58%,#e9ece3 100%);
  border:1px solid rgba(15,22,32,.1);
  box-shadow:0 30px 70px rgba(15,22,32,.16);
  overflow:hidden;
  aspect-ratio:9/5.6;
}
.sig--dark{background:linear-gradient(158deg,#182432,#0f1620 62%);border-color:#2a3745;box-shadow:0 34px 80px rgba(0,0,0,.42)}
.sig svg{width:100%;height:100%;display:block}
.sig__badge{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:rgba(15,22,32,.86);color:#f7f6f2;border-radius:999px;padding:7px 13px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sig--dark .sig__badge{background:rgba(226,240,109,.94);color:#0f1620}
.sig__badge i{width:7px;height:7px;border-radius:50%;background:#e2f06d;display:block}
.sig--dark .sig__badge i{background:#0f1620}
.sig__data{position:absolute;right:14px;bottom:12px;z-index:3;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(15,22,32,.55);background:rgba(255,255,255,.72);border-radius:999px;padding:5px 10px}
.sig--dark .sig__data{color:#93a2ae;background:rgba(255,255,255,.05)}

/* every animated node shares the 12s master loop */
.sig [class^="sg-"],.sig [class*=" sg-"]{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.4,.05,.25,1)}
.sig.is-paused [class^="sg-"],.sig.is-paused [class*=" sg-"]{animation-play-state:paused}

/* ---------- Scene containers ---------- */
.sg-scene-search{animation-name:sgSceneSearch}
.sg-scene-map{animation-name:sgSceneMap}
.sg-scene-analytics{animation-name:sgSceneAnalytics}
.sg-scene-report{animation-name:sgSceneReport}

/* Scenes 1–3 share one surface: the search card is redesigned in place (Scene 2)
   and the listing then climbs (Scene 3) before the local map covers it. */
@keyframes sgSceneSearch{0%,43%{opacity:1;transform:none}51%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes sgSceneMap{0%,38%{opacity:0;transform:scale(.94)}44%,53%{opacity:1;transform:none}58%,100%{opacity:0;transform:scale(1.03)}}
@keyframes sgSceneAnalytics{0%,51%{opacity:0;transform:translateY(14px)}56%,78%{opacity:1;transform:none}83%,100%{opacity:0;transform:scale(.99)}}
@keyframes sgSceneReport{0%,75%{opacity:0;transform:translateY(16px) scale(.98)}81%,96%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:translateY(-6px)}}

/* ---------- Scene 1/2/3: the search result + the client row ---------- */
.sg-searchbar{animation-name:sgFadeIn;animation-delay:.05s}
@keyframes sgFadeIn{0%{opacity:0;transform:translateY(8px)}6%,100%{opacity:1;transform:none}}

.sg-caret{animation-name:sgCaret}
@keyframes sgCaret{0%,4%{opacity:0}6%,14%{opacity:1}15%,100%{opacity:0}}

/* competitor rows settle in, then move down while the client climbs */
.sg-comp--1{animation-name:sgComp1}
.sg-comp--2{animation-name:sgComp2}
@keyframes sgComp1{0%{opacity:0;transform:translateY(-10px)}5%{opacity:1;transform:none}35%{transform:none}41.5%,100%{transform:translateY(148px)}}
@keyframes sgComp2{0%{opacity:0;transform:translateY(-6px)}7%{opacity:1;transform:none}35%{transform:none}41.5%,100%{transform:translateY(96px)}}

/* the client row: greyed at #9 → redesigned → climbs to #1 */
.sg-client{animation-name:sgClient}
@keyframes sgClient{
  0%{opacity:0;transform:translateY(148px)}
  6%{opacity:1;transform:translateY(148px)}
  16.7%{transform:translateY(148px)}
  20%{transform:translateY(134px)}
  33.3%{transform:translateY(148px)}
  35.5%{transform:translateY(96px)}
  38%{transform:translateY(52px)}
  41.5%,100%{transform:translateY(0)}
}
.sg-client-card{animation-name:sgClientCard}
@keyframes sgClientCard{0%,16.7%{fill:#ecede9}22%,100%{fill:#ffffff}}
.sg-client-wash{animation-name:sgClientWash}
@keyframes sgClientWash{0%,16.7%{opacity:.62}24%,100%{opacity:1}}
.sg-client-pending{animation-name:sgClientPending}
@keyframes sgClientPending{0%,16.7%{opacity:1}22%,100%{opacity:0}}
.sg-client-brand{animation-name:sgClientBrand}
@keyframes sgClientBrand{0%,17%{opacity:0;transform:translateX(-10px)}24%,100%{opacity:1;transform:none}}
.sg-client-call{animation-name:sgClientCall}
@keyframes sgClientCall{0%,19%{opacity:0;transform:scale(.86)}26%,100%{opacity:1;transform:none}}
.sg-chip-before{animation-name:sgChipBefore}
@keyframes sgChipBefore{0%{opacity:0}8%,16%{opacity:1}21%,100%{opacity:0}}
.sg-chip-after{animation-name:sgChipAfter}
@keyframes sgChipAfter{0%,19%{opacity:0;transform:translateY(-6px)}24%,31%{opacity:1;transform:none}34%,100%{opacity:0}}
.sg-position{animation-name:sgPosition}
@keyframes sgPosition{0%,33%{opacity:0;transform:scale(.9)}36%,52%{opacity:1;transform:none}55%,100%{opacity:0}}

/* checklist ticks (Scene 2), staggered with positive delays */
.sg-check{animation-name:sgCheck;opacity:0}
.sg-check--1{animation-delay:.25s}
.sg-check--2{animation-delay:.5s}
.sg-check--3{animation-delay:.75s}
.sg-check--4{animation-delay:1s}
@keyframes sgCheck{0%,16.5%{opacity:0;transform:translateX(-8px)}22%,36%{opacity:1;transform:none}44%,100%{opacity:0}}
.sg-check-line{stroke-dasharray:26;stroke-dashoffset:26;animation-name:sgCheckLine}
.sg-check-line--1{animation-delay:.25s}
.sg-check-line--2{animation-delay:.5s}
.sg-check-line--3{animation-delay:.75s}
.sg-check-line--4{animation-delay:1s}
@keyframes sgCheckLine{0%,17%{stroke-dashoffset:26}23%,36%{stroke-dashoffset:0}44%,100%{stroke-dashoffset:26}}

/* ---------- Scene 3: local map + geo-grid ---------- */
.sg-mapcard{animation-name:sgFadeUp}
@keyframes sgFadeUp{0%{opacity:0;transform:translateY(12px)}6%,100%{opacity:1;transform:none}}
.sg-map-pin{animation-name:sgPinGrow}
.sg-map-pin--client{animation-delay:.45s}
@keyframes sgPinGrow{0%{opacity:0;transform:translateY(10px) scale(.7)}12%,100%{opacity:1;transform:none}}
.sg-pin-accent{animation-name:sgPinAccent;animation-delay:.7s}
@keyframes sgPinAccent{0%,10%{opacity:0;transform:scale(.6);transform-origin:center}25%,100%{opacity:1;transform:none}}

/* geo-grid: dots turn red → amber → green as a wave, then hold */
.sg-dot{animation-name:sgDot;animation-timing-function:ease-out;fill:#d8dcd6}
.sg-dot--a{animation-delay:.10s}
.sg-dot--b{animation-delay:.22s}
.sg-dot--c{animation-delay:.34s}
.sg-dot--d{animation-delay:.46s}
.sg-dot--e{animation-delay:.58s}
.sg-dot--f{animation-delay:.70s}
.sg-dot--g{animation-delay:.82s}
@keyframes sgDot{
  0%,10%{fill:#e2664f;opacity:.55}
  26%{fill:#e8b04b;opacity:.85}
  44%,100%{fill:#5fae74;opacity:1}
}

/* ---------- Scene 4: analytics panel ---------- */
.sg-panel{animation-name:sgFadeUp}
.sg-kpi{opacity:0;animation-name:sgKpiIn}
.sg-kpi--1{animation-delay:.25s}
.sg-kpi--2{animation-delay:.45s}
.sg-kpi--3{animation-delay:.65s}
@keyframes sgKpiIn{0%,56%{opacity:0;transform:translateY(10px)}61%,78%{opacity:1;transform:none}81%,100%{opacity:0}}
.sg-line{animation-name:sgLineDraw}
@keyframes sgLineDraw{0%,60%{stroke-dashoffset:100;opacity:.3}76%,100%{stroke-dashoffset:0;opacity:1}}
.sg-line-area{animation-name:sgAreaIn}
@keyframes sgAreaIn{0%,62%{opacity:0}78%,100%{opacity:1}}
.sg-bar{animation-name:sgBarGrow;transform-box:fill-box;transform-origin:bottom}
@keyframes sgBarGrow{0%,58%{transform:scaleY(.06);opacity:.4}74%,100%{transform:scaleY(1);opacity:1}}
.sg-donut-seg{animation-name:sgDonut;stroke-dasharray:0 100}
.sg-donut-seg--1{animation-delay:.35s}
.sg-donut-seg--2{animation-delay:.75s}
.sg-donut-seg--3{animation-delay:1.15s}
.sg-donut-seg--4{animation-delay:1.55s}
@keyframes sgDonut{0%,62%{stroke-dasharray:0 100}78%,100%{stroke-dasharray:var(--seg,25) calc(100 - var(--seg,25))}}
.sg-legend{animation-name:sgKpiIn}
.sg-legend--1{animation-delay:.9s}
.sg-legend--2{animation-delay:1.05s}
.sg-legend--3{animation-delay:1.2s}
.sg-legend--4{animation-delay:1.35s}

/* ---------- Scene 5: report card ---------- */
.sg-report-card{animation-name:sgReportCard}
@keyframes sgReportCard{0%,79%{opacity:0;transform:translateY(18px) scale(.97)}84%,96%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.sg-report-row{opacity:0;animation-name:sgReportRow}
.sg-report-row--1{animation-delay:0s}
.sg-report-row--2{animation-delay:.28s}
.sg-report-row--3{animation-delay:.56s}
.sg-report-row--4{animation-delay:.84s}
@keyframes sgReportRow{0%,81%{opacity:0;transform:translateX(-10px)}86%,97%{opacity:1;transform:none}100%{opacity:0}}
.sg-report-rule{transform-box:fill-box;transform-origin:left center;animation-name:sgRuleGrow}
.sg-report-rule--1{animation-delay:.06s}
.sg-report-rule--2{animation-delay:.34s}
.sg-report-rule--3{animation-delay:.62s}
.sg-report-rule--4{animation-delay:.90s}
@keyframes sgRuleGrow{0%,81%{transform:scaleX(0)}87%,97%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.sg-wordmark{animation-name:sgWordmark}
@keyframes sgWordmark{0%,92%{opacity:0;transform:translateY(10px)}96%,100%{opacity:1;transform:none}}

/* ---------- Static frame (prefers-reduced-motion) ---------- */
.sig--static .sg-scene-search,
.sig--static .sg-scene-build,
.sig--static .sg-scene-map{display:none}
.sig--static [class^="sg-"],.sig--static [class*=" sg-"]{animation:none!important}
.sig--static .sg-scene-analytics{opacity:1;transform:none}
.sig--static .sg-scene-report{opacity:1;transform:none}
.sig--static .sg-kpi,
.sig--static .sg-legend,
.sig--static .sg-line-area{opacity:1;transform:none}
.sig--static .sg-line{stroke-dashoffset:0;opacity:1}
.sig--static .sg-bar{transform:scaleY(1);opacity:1}
.sig--static .sg-donut-seg{stroke-dasharray:var(--seg,25) calc(100 - var(--seg,25))}
.sig--static .sg-report-row{opacity:1;transform:none}
.sig--static .sg-report-rule{transform:scaleX(1)}
.sig--static .sg-wordmark{opacity:1;transform:none}

/* ---------- Compact variant for small screens ---------- */
.sig--compact .sig-optional{display:none}
@media (max-width:640px){
  .sig{border-radius:18px}
  .sig__badge{font-size:.6rem;padding:6px 10px}
  .sig-optional{display:none}
}