/* Brand-mapped animation tokens (scoped; site tokens untouched) */
.anim-scope{
  --panel:#121D28; --panel-2:#182735;
  --text:#F6F8FA; --muted:#7F94A8;
  --accent:#E8A33D;   /* amber */
  --accent-2:#9FB9CF; /* ice */
  --good:#5FA88A;     /* signal */
  --bad:#C4643A;      /* ember */
  --shield:#3E5C76;   /* steel */
}
.anim-wrap{width:100%;max-width:860px}
.anim-stage{
  width:100%;aspect-ratio:860/470;
  background:linear-gradient(180deg,var(--panel-2) 0%,#0B131B 100%);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;
}
.anim-stage svg{width:100%;height:100%;display:block}

/* ---------- scene switching ---------- */
.scene{opacity:0;visibility:hidden;transition:opacity .45s ease}
.scene.active{opacity:1;visibility:visible}

/* ---------- caption bar ---------- */
.anim-caption{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:16px 4px 8px;min-height:52px;
}
.anim-caption .step{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.anim-caption .title{font-weight:700;font-size:18px}
.anim-caption .line{color:var(--muted);font-size:15px;flex-basis:100%}

/* ---------- controls ---------- */
.anim-controls{display:flex;align-items:center;gap:10px;margin-top:4px}
.dot{
  width:10px;height:10px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel-2);cursor:pointer;padding:0;transition:all .25s;
}
.dot.on{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
.playpause{
  margin-left:auto;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer;
}
.playpause:hover{color:var(--text);border-color:var(--muted)}

/* ============ shared svg styles ============ */
.panel-fill{fill:var(--panel-2);stroke:var(--line)}
.txt{fill:var(--text);font-family:inherit}
.txt-muted{fill:var(--muted);font-family:inherit}
.txt-accent{fill:var(--accent);font-family:inherit}

/* ============ scene 1: sign up ============ */
.s1 .plan-card{transform:translateY(14px);opacity:0}
.s1.active .plan-card{animation:rise .5s ease forwards}
.s1.active .plan-card.c2{animation-delay:.15s}
.s1.active .cursor{animation:cursorMove 1.6s .7s ease forwards}
.s1.active .click-ring{animation:clickRing .5s 2.1s ease-out forwards}
.s1.active .paid-badge{animation:pop .45s 2.5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes rise{to{transform:translateY(0);opacity:1}}
@keyframes cursorMove{from{transform:translate(160px,90px)}to{transform:translate(0,0)}}
@keyframes clickRing{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(2.2)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.cursor,.click-ring,.paid-badge{opacity:0}
.s1.active .cursor{opacity:1}

/* ============ scene 2: intake ============ */
.s2 .field-line{stroke:var(--accent-2);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200}
.s2.active .f1{animation:draw 1s .4s ease forwards}
.s2.active .f2{animation:draw 1s 1.1s ease forwards}
.s2.active .f3{animation:draw 1s 1.8s ease forwards}
.s2 .swatch{opacity:0;transform:scale(.3)}
.s2.active .swatch{animation:pop .4s ease forwards}
.s2.active .sw1{animation-delay:2.5s}
.s2.active .sw2{animation-delay:2.65s}
.s2.active .sw3{animation-delay:2.8s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ============ scene 3: we build ============ */
.s3 .block{opacity:0}
.s3.active .b-nav{animation:slideDown .5s .3s ease forwards}
.s3.active .b-hero{animation:slideLeft .5s .9s ease forwards}
.s3.active .b-img{animation:slideRight .5s 1.4s ease forwards}
.s3.active .b-cta{animation:pop .45s 1.9s cubic-bezier(.2,1.6,.4,1) forwards}
.s3.active .b-foot{animation:rise .5s 2.3s ease forwards}
.s3.active .b-hero rect:first-child{animation:heroTint 2.4s 2.6s ease forwards}
@keyframes heroTint{0%,100%{fill:var(--text)}35%{fill:var(--accent-2)}70%{fill:var(--accent)}}
.s3 .rev-badge{opacity:0}
.s3.active .rev-badge{animation:pop .5s 3s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes slideDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes slideLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes slideRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ============ scene 4: live in 24h ============ */
.s4 .url-text,.s4 .lock,.s4 .live-badge{opacity:0}
.s4.active .url-text{animation:fadeIn .3s .5s forwards}
.s4.active .lock{animation:pop .4s 1.4s cubic-bezier(.2,1.6,.4,1) forwards}
.s4.active .live-badge{animation:pop .5s 2s cubic-bezier(.2,1.6,.4,1) forwards}
.s4 .spark{opacity:0}
.s4.active .spark{animation:spark 1.2s 2.2s ease-out forwards}
@keyframes fadeIn{to{opacity:1}}
@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}

/* ============ scene 5: shield ============ */
.s5 .shield-path{stroke-dasharray:640;stroke-dashoffset:640;fill-opacity:0}
.s5.active .shield-path{animation:shieldDraw 1.1s .2s ease forwards}
@keyframes shieldDraw{60%{fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:.14}}
.s5 .atk{opacity:0}
.s5.active .atk{animation:attack 1.5s ease-in infinite}
.s5.active .atk.a1{animation-delay:1.2s}
.s5.active .atk.a2{animation-delay:1.7s}
.s5.active .atk.a3{animation-delay:2.3s}
.s5.active .atk.a4{animation-delay:2.9s}
.s5.active .atk.a5{animation-delay:3.5s}
.s5.active .atk.a6{animation-delay:4.1s}
@keyframes attack{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  10%{opacity:1}
  55%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}
  70%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.8)}
  100%{opacity:0}
}
.s5 .visitor{opacity:0}
.s5.active .visitor{animation:visit 2.6s ease-in-out infinite}
.s5.active .visitor.v2{animation-delay:1.3s}
@keyframes visit{
  0%{opacity:0;transform:translate(0,0)}
  15%{opacity:1}
  85%{opacity:1;transform:translate(var(--dx),var(--dy))}
  100%{opacity:0;transform:translate(var(--dx),var(--dy))}
}
.s5.active .shield-pulse{animation:shieldPulse 1.5s 1.9s ease-out infinite}
@keyframes shieldPulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
.shield-pulse{transform-origin:430px 240px;opacity:0}

/* ============ scene 6: we watch ============ */
.s6 .sweep{transform-origin:430px 235px;opacity:0}
.s6.active .sweep{opacity:1;animation:sweep 3s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.s6 .spark-line{stroke-dasharray:420;stroke-dashoffset:420}
.s6.active .spark-line{animation:draw 2s .5s ease forwards}
.s6 .stat{opacity:0}
.s6.active .stat{animation:rise .5s ease forwards}
.s6.active .stat.st2{animation-delay:.25s}
.s6.active .stat.st3{animation-delay:.5s}

/* reduced motion: freeze everything visible */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .scene .block,.scene .plan-card,.scene .swatch,.scene .url-text,.scene .lock,
  .scene .live-badge,.scene .stat,.scene .cursor{opacity:1 !important;transform:none !important}
  .s5 .shield-path{stroke-dashoffset:0;fill-opacity:.14}
  .s2 .field-line{stroke-dashoffset:0}
  .s6 .spark-line{stroke-dashoffset:0}
}

/* page layout */
.hiw-lead{background:radial-gradient(120% 90% at 82% 0%,#1B2C3C 0%,var(--ink) 62%);padding:76px 0 40px;position:relative}
.hiw-lead::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,163,61,.5),transparent)}
.hiw-lead h1{font-size:clamp(30px,4.6vw,46px);margin:0 0 12px;color:var(--paper)}
.hiw-lead .sub{color:var(--body-ink);font-size:18px;max-width:640px}
.hiw-anim{padding:44px 0 26px}
.hiw-cta{padding:16px 0 72px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hiw-cta .aside{color:var(--muted);font-size:14.5px;flex-basis:100%}
.anim-scope .anim-caption .title{font-family:var(--display)}

/* travel vectors (moved out of inline style attrs for CSP) */
.s5 .a1{--dx:118px;--dy:62px}
.s5 .a2{--dx:-116px;--dy:56px}
.s5 .a3{--dx:110px;--dy:-52px}
.s5 .a4{--dx:-108px;--dy:-58px}
.s5 .a5{--dx:130px;--dy:0px}
.s5 .a6{--dx:-128px;--dy:0px}
.s5 .v1{--dx:0px;--dy:118px}
.s5 .v2{--dx:0px;--dy:118px}