/* 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-layout{display:flex;gap:18px;width:100%;max-width:1040px;align-items:stretch}
.anim-rail{
  flex:0 0 240px;display:flex;flex-direction:column;gap:6px;
}
.anim-rail button{
  text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;padding:10px 14px;font-size:13.5px;cursor:pointer;line-height:1.35;
  transition:all .25s;font-family:inherit;
}
.anim-rail button .n{color:var(--accent);font-weight:700;margin-right:6px}
.anim-rail button.on{background:var(--panel-2);border-color:var(--accent);color:var(--text)}
.anim-stage-col{flex:1;min-width:0;display:flex;flex-direction:column}
.anim-stage{
  width:100%;aspect-ratio:780/470;
  background:linear-gradient(180deg,var(--panel-2) 0%,#0B131B 100%);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.anim-stage svg{width:100%;height:100%;display:block}
.anim-caption{color:var(--muted);font-size:14.5px;margin:14px 4px 0;min-height:44px}
.anim-caption strong{color:var(--text)}
.anim-controls{display:flex;align-items:center;gap:10px;margin-top:8px}
.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;font-family:inherit;
}
.playpause:hover{color:var(--text);border-color:var(--muted)}
@media (max-width:760px){
  .anim-layout{flex-direction:column}
  .anim-rail{flex-direction:row;flex-wrap:wrap;flex-basis:auto}
  .anim-rail button{flex:1 1 45%}
}

/* ---------- svg shared ---------- */
.scene{opacity:0;visibility:hidden;transition:opacity .45s ease}
.scene.active{opacity:1;visibility:visible}
.node{fill:var(--panel-2);stroke:var(--line)}
.txt{fill:var(--text);font-family:inherit}
.txt-m{fill:var(--muted);font-family:inherit}
.txt-a{fill:var(--accent);font-family:inherit}
.wire{stroke:var(--line);stroke-width:2;fill:none}
.wire-hot{stroke:var(--accent-2);stroke-width:2.5;fill:none;stroke-linecap:round}
.check{opacity:0}
.pop{opacity:0}
@keyframes dashflow{to{stroke-dashoffset:-24}}
@keyframes drawline{to{stroke-dashoffset:0}}
@keyframes popIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes fade{to{opacity:1}}
@keyframes travel{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- scene 1: payment ---- */
.t1 .flow{stroke-dasharray:8 8}
.t1.active .flow{animation:dashflow .6s linear infinite}
.t1.active .webhook-pulse{animation:pulse 1.1s .4s ease-out infinite;transform-origin:262px 235px}
.t1.active .pop.p1{animation:popIn .45s .9s cubic-bezier(.2,1.6,.4,1) forwards}
.t1.active .pop.p2{animation:popIn .45s 1.5s cubic-bezier(.2,1.6,.4,1) forwards}
.webhook-pulse{opacity:0}

/* ---- scene 2: fan-out ---- */
.t2 .branch{stroke-dasharray:220;stroke-dashoffset:220}
.t2.active .br1{animation:drawline .7s .3s ease forwards}
.t2.active .br2{animation:drawline .7s 1.0s ease forwards}
.t2.active .br3{animation:drawline .7s 1.7s ease forwards}
.t2.active .br4{animation:drawline .7s 2.4s ease forwards}
.t2.active .check.c1{animation:popIn .4s 1.0s cubic-bezier(.2,1.6,.4,1) forwards}
.t2.active .check.c2{animation:popIn .4s 1.7s cubic-bezier(.2,1.6,.4,1) forwards}
.t2.active .check.c3{animation:popIn .4s 2.4s cubic-bezier(.2,1.6,.4,1) forwards}
.t2.active .check.c4{animation:popIn .4s 3.1s cubic-bezier(.2,1.6,.4,1) forwards}

/* ---- scene 3: request gauntlet ---- */
.t3 .pkt{offset-rotate:0deg;opacity:0}
.t3.active .pkt-good{offset-path:path('M60 235 L700 235');animation:travel 3.2s .4s linear infinite}
.t3.active .pkt-good2{offset-path:path('M60 235 L700 235');animation:travel 3.2s 2s linear infinite}
.t3.active .pkt-bad{offset-path:path('M60 205 L378 205');animation:travel 1.7s 1.1s linear infinite}
.t3.active .drop-x{animation:popIn .35s 2.6s cubic-bezier(.2,1.6,.4,1) forwards;animation-iteration-count:1}
.t3.active .gate{animation:blink 2.4s ease infinite}

/* ---- scene 4: DNSSEC ---- */
.t4 .chainlink{stroke-dasharray:130;stroke-dashoffset:130}
.t4.active .ch1{animation:drawline .6s .3s ease forwards}
.t4.active .ch2{animation:drawline .6s 1.0s ease forwards}
.t4.active .ch3{animation:drawline .6s 1.7s ease forwards}
.t4.active .lock.l1{animation:popIn .4s .8s cubic-bezier(.2,1.6,.4,1) forwards}
.t4.active .lock.l2{animation:popIn .4s 1.5s cubic-bezier(.2,1.6,.4,1) forwards}
.t4.active .lock.l3{animation:popIn .4s 2.2s cubic-bezier(.2,1.6,.4,1) forwards}
.t4 .lock{opacity:0}
.t4.active .spoof{animation:spoofIn 2.2s 2.6s ease forwards}
.t4 .spoof{opacity:0}
@keyframes spoofIn{0%{opacity:0;transform:translateX(-30px)}25%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.t4.active .spoof-x{animation:popIn .35s 3.4s cubic-bezier(.2,1.6,.4,1) forwards}

/* ---- scene 5: certificates ---- */
.t5 .validity{transform-origin:250px 0}
.t5.active .validity{animation:drain 4s 1s linear infinite}
@keyframes drain{0%{transform:scaleX(1)}70%{transform:scaleX(.25)}70.01%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.t5 .renew-arrow{stroke-dasharray:300;stroke-dashoffset:300}
.t5.active .renew-arrow{animation:drawline 1.2s .5s ease forwards}
.t5.active .renew-badge{animation:renewFlash 4s 1s linear infinite}
.t5 .renew-badge{opacity:0}
@keyframes renewFlash{0%,60%{opacity:0}66%,86%{opacity:1}100%{opacity:0}}

/* ---- scene 6: email auth ---- */
.t6.active .check.e1{animation:popIn .4s .5s cubic-bezier(.2,1.6,.4,1) forwards}
.t6.active .check.e2{animation:popIn .4s 1.0s cubic-bezier(.2,1.6,.4,1) forwards}
.t6.active .check.e3{animation:popIn .4s 1.5s cubic-bezier(.2,1.6,.4,1) forwards}
.t6 .mail{opacity:0}
.t6.active .mail-good{animation:mailGood 2.6s 2s ease infinite}
.t6.active .mail-bad{animation:mailBad 2.6s 3.2s ease infinite}
@keyframes mailGood{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1;transform:translateX(330px)}100%{opacity:0;transform:translateX(330px)}}
@keyframes mailBad{0%{opacity:0;transform:translateX(0)}15%{opacity:1}55%{opacity:1;transform:translateX(180px)}70%{opacity:1;transform:translate(180px,26px) rotate(18deg)}100%{opacity:0;transform:translate(180px,60px) rotate(30deg)}}

/* ---- scene 7: RPKI ---- */
.t7 .ann{opacity:0}
.t7.active .ann-good{animation:fade .5s .5s forwards}
.t7.active .ann-bad{animation:fade .5s 1.2s forwards}
.t7.active .verdict.vg{animation:popIn .45s 2.0s cubic-bezier(.2,1.6,.4,1) forwards}
.t7.active .verdict.vb{animation:popIn .45s 2.6s cubic-bezier(.2,1.6,.4,1) forwards}
.t7 .verdict{opacity:0}
.t7.active .hijack-drop{animation:hijackDrop 1.2s 3.1s ease forwards}
@keyframes hijackDrop{to{opacity:.15;transform:translateY(14px)}}

/* ---- scene 8: the portal ---- */
.t8 .maillink{opacity:0}
.t8.active .maillink{animation:fade .5s .3s forwards}
.t8 .linkbeam{stroke-dasharray:180;stroke-dashoffset:180}
.t8.active .linkbeam{animation:drawline .8s .9s ease forwards}
.t8 .tile{opacity:0}
.t8.active .tile.d1{animation:popIn .45s 1.6s cubic-bezier(.2,1.6,.4,1) forwards}
.t8.active .tile.d2{animation:popIn .45s 1.9s cubic-bezier(.2,1.6,.4,1) forwards}
.t8.active .tile.d3{animation:popIn .45s 2.2s cubic-bezier(.2,1.6,.4,1) forwards}
.t8.active .tile.d4{animation:popIn .45s 2.5s cubic-bezier(.2,1.6,.4,1) forwards}
.t8.active .livepulse{animation:pulse 1.6s 2.8s ease-out infinite;transform-origin:591px 306px}
.t8 .livepulse{opacity:0}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .check,.pop,.lock,.verdict,.ann,.renew-badge,.tile,.maillink{opacity:1 !important;transform:none !important}
  .linkbeam{stroke-dashoffset:0 !important}
  .branch,.chainlink,.renew-arrow{stroke-dashoffset:0 !important}
}

/* page layout */
.uth-anim{padding:40px 0 24px}
.uth-cta{padding:10px 0 72px;display:flex;gap:14px;flex-wrap:wrap}
.anim-scope .anim-rail button{font-family:var(--display)}