/* Layout: one dark stage. Display-scale statements, real product cutouts that settle, draw and stream as you scroll, lit from below by restrained crimson. */
@font-face{font-family:"Bebas Neue";src:url("../fonts/bebas-neue-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --carbon:#101214;           /* stage */
  --carbon-deep:#0B0C0E;      /* hero, decision and closing bands */
  --raised:#1A1D22;           /* product surface tone */
  --paper:#F2F1EE;            /* type */
  --paper-76:rgba(242,241,238,.76);
  --paper-56:rgba(242,241,238,.56);
  --paper-30:rgba(242,241,238,.30);
  --paper-12:rgba(242,241,238,.12);
  --paper-06:rgba(242,241,238,.06);
  --crimson-light:#D42440;    /* accent on dark: marks, rules, glow */
  --oxblood:#660810;          /* heritage, ambient only */
  --glow:rgba(212,36,64,.32);
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Bebas Neue",var(--font-body);
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --gutter:clamp(16px,5vw,64px);
  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--carbon);scroll-padding-top:76px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--carbon);color:var(--paper);font-family:var(--font-body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
main,section,footer{overflow-x:clip}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--crimson-light);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0}
.eyebrow{font-family:var(--font-display);font-size:1.375rem;letter-spacing:.06em;color:var(--paper-56);line-height:1}
.lede{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.45;color:var(--paper-76);max-width:36ch;text-wrap:pretty}
.lede strong{color:var(--paper);font-weight:600}
.lede.lines{max-width:none}
.lede .ln{display:block;text-wrap:balance}

/* Scroll progress. [data-p] elements receive --p from 0 to 1; with no script, or reduced motion, --p stays 1 (the settled, legible state). */
[data-p]{--p:1}
.rise{transform:translateY(calc((1 - var(--p)) * 36px));opacity:calc(.3 + .7 * var(--p))}

/* Nav */
.bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--crimson-light) 30%,var(--crimson-light));transform-origin:0 50%;transform:scaleX(var(--doc,0))}
.sym{fill:var(--paper)}
.sym .sq{fill:var(--crimson-light)}

/* Ambient light: two slow blobs, never brighter than a glow */
.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:-18vw;background:radial-gradient(circle,rgba(212,36,64,.28),transparent 65%)}
.aurora i:nth-child(2){width:38vw;height:38vw;left:-8%;top:28%;background:radial-gradient(circle,rgba(102,8,16,.55),transparent 65%);animation-duration:28s;animation-delay:-9s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,4vw,0) scale(1.12)}100%{transform:translate3d(4vw,-2vw,0) scale(.94)}}

/* Hero */
.hero{position:relative;background:var(--carbon-deep);padding-block:clamp(64px,9vw,120px) 0;overflow:hidden;--mx:50%;--my:30%}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--paper-12) 1px,transparent 1.2px);background-size:28px 28px;-webkit-mask-image:radial-gradient(520px 380px at var(--mx) var(--my),#000,transparent 75%);mask-image:radial-gradient(520px 380px at var(--mx) var(--my),#000,transparent 75%);opacity:.7;transition:opacity .4s}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.75rem,7.4vw,5.6rem);margin-top:20px}
.hero h1 span{display:block}
.hero h1 span + span{color:var(--paper-56)}
.hero .lede{margin-top:clamp(20px,2.4vw,32px);max-width:44ch}
.load{animation:enter 1.1s var(--ease) both}
.d1{animation-delay:.14s}.d2{animation-delay:.26s}.d3{animation-delay:.38s}.d4{animation-delay:.5s}.d5{animation-delay:.62s}
@keyframes enter{from{opacity:0;transform:translateY(22px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;line-height:1.25;text-decoration:none;color:var(--carbon);background:var(--paper);padding:11px 20px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s}
@media (hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px -8px var(--glow)}}
.link{font-weight:500;font-size:.9375rem;text-decoration:none;color:var(--paper)}
.link::after{content:" \203A";display:inline-block;transition:transform .25s var(--ease)}
@media (hover:hover){.link:hover::after{transform:translateX(4px)}}
.stage{position:relative;perspective:2200px;margin-top:clamp(44px,5vw,72px)}
.stage::before{content:"";position:absolute;left:8%;right:8%;bottom:-4%;height:60%;background:radial-gradient(50% 50% at 50% 60%,var(--glow),transparent 70%);filter:blur(34px);pointer-events:none;opacity:calc(.4 + .6 * var(--p))}
.window{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--paper-12);box-shadow:0 60px 140px -40px rgba(0,0,0,.95);background:var(--raised)}
.hero .scroller{transform:rotateX(calc((1 - var(--p)) * 22deg)) scale(calc(.9 + .1 * var(--p))) translateY(calc((1 - var(--p)) * 40px));transform-origin:50% 100%;transform-style:preserve-3d;margin-bottom:-3%}
.sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(242,241,238,.07) 48%,transparent 60%);background-size:250% 100%;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.hero .fade{position:relative;z-index:2;height:140px;margin-top:-140px;background:linear-gradient(transparent,var(--carbon-deep))}

/* Pointer tilt (desktop pointers only) */
.tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);will-change:transform}

/* Chapters */
.chapter{padding-block:clamp(96px,13vw,176px);position:relative}
.chapter .eyebrow{margin-bottom:18px}
.chapter h2{font-size:clamp(2.5rem,6vw,5rem)}
.chapter .lede{margin-top:24px}
.split h2{font-size:clamp(2.5rem,5vw,4.25rem)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.split > *{min-width:0}
.center{text-align:center}
.center .lede{margin-inline:auto}
.card{position:relative;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--paper-12);background:var(--raised);box-shadow:0 50px 110px -40px rgba(0,0,0,.95)}

/* Advisor: pinned while the answer streams in */
.adv-track{position:relative}
.adv-sticky{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.adv-sticky > *{min-width:0}
.points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;font-size:clamp(1.125rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.01em}
.points li{display:flex;gap:14px;align-items:baseline;color:var(--paper-30);transition:color .5s var(--ease)}
.points li::before{content:"";flex:none;width:.5em;height:.5em;border:1.5px solid currentColor;transform:translateY(-.05em);transition:background .5s,border-color .5s}
.points li.on{color:var(--paper)}
.points li.on::before{background:var(--crimson-light);border-color:var(--crimson-light)}
.adv-stage{position:relative;perspective:1600px;display:grid;justify-items:center;gap:18px}
.adv-stage::before{content:"";position:absolute;inset:15% -10% 0 -10%;background:radial-gradient(40% 50% at 55% 55%,var(--glow),transparent 70%);filter:blur(40px);pointer-events:none}
.panel-wrap{transform:rotateY(calc(-24deg + var(--p) * 14deg)) rotateX(calc(6deg - var(--p) * 4deg));transform-origin:30% 50%;transform-style:preserve-3d}
.panel{position:relative;width:min(340px,calc((100vh - 230px) / 2.33));min-width:240px;border-radius:16px;overflow:hidden;border:1px solid var(--paper-12);box-shadow:-40px 60px 120px -30px rgba(0,0,0,.95);background:var(--raised);--r:clamp(.2, calc(.2 + var(--p) * 1.05), 1.06)}
.panel img{width:100%;-webkit-mask-image:linear-gradient(#000 calc(var(--r) * 100%),transparent calc(var(--r) * 100% + 5%));mask-image:linear-gradient(#000 calc(var(--r) * 100%),transparent calc(var(--r) * 100% + 5%))}
.caret{position:absolute;left:5%;width:70%;height:2px;z-index:2;top:calc(var(--r) * 100%);background:linear-gradient(90deg,var(--crimson-light),transparent);box-shadow:0 0 18px 2px var(--glow);opacity:calc((1.04 - var(--r)) * 8);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{filter:brightness(.4)}}
.ask{position:relative;width:min(380px,100%);display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border:1px solid var(--paper-12);border-radius:12px;background:rgba(26,29,34,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.9375rem;color:var(--paper-76);box-shadow:0 20px 60px -20px rgba(0,0,0,.9)}
.ask .q{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.ask .q::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;background:var(--crimson-light);vertical-align:-.15em;animation:blink 1s steps(2) infinite}
.ask .go{flex:none;font-size:.8125rem;font-weight:600;padding:6px 12px;border-radius:8px;background:var(--paper);color:var(--carbon)}
.ask .spark{flex:none;color:var(--crimson-light)}

/* Sources: read, then catch the instruction */
.evidence{position:relative;margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;--q:clamp(0, calc((var(--p) - .45) / .35), 1)}
.evidence .src{grid-column:1 / span 7;grid-row:1;transform:translateX(calc((1 - var(--p)) * -60px)) rotate(calc((1 - var(--p)) * -1.5deg))}
.evidence .verdict{grid-column:7 / span 6;grid-row:1;margin-top:22%;z-index:2;transform:translate(calc((1 - var(--q)) * 90px),calc((1 - var(--q)) * 50px));opacity:calc(.15 + .85 * var(--q))}
.scan{position:absolute;left:0;right:0;height:22%;top:-22%;pointer-events:none;background:linear-gradient(transparent,rgba(242,241,238,.05) 70%,rgba(212,36,64,.22) 99%,transparent);animation:scan 3.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{to{top:100%}}
.hl{position:absolute;left:1.2%;right:1.2%;border-radius:6px;box-shadow:0 0 0 1.5px var(--crimson-light),0 0 32px 2px var(--glow);pointer-events:none;transform-origin:0 50%}
.hl.who{top:36.3%;height:4.24%;left:5.6%;width:24%;right:auto;box-shadow:0 0 0 1.5px rgba(242,241,238,.55);opacity:clamp(0, calc((var(--p) - .15) / .12), 1);transform:scaleX(clamp(0, calc((var(--p) - .15) / .12), 1))}
.hl.inj{top:83.6%;height:9.2%;left:2.4%;right:9.6%;opacity:clamp(0, calc((var(--p) - .3) / .12), 1);transform:scaleX(clamp(0, calc((var(--p) - .3) / .12), 1))}
.hl.inj::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 40px 6px var(--glow);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.2}50%{opacity:1}}
.hl.line{top:81.6%;height:13.3%;left:1.2%;right:6.1%;opacity:clamp(0, calc((var(--p) - .82) / .12), 1);transform:scaleX(clamp(0, calc((var(--p) - .82) / .12), 1))}

/* Decisions: the mark assembles, the square arrives last */
.decide{background:var(--carbon-deep);overflow:hidden}
.mark{position:relative;width:clamp(150px,20vw,240px);margin:0 auto clamp(48px,6vw,80px);--s:clamp(0, calc((var(--p) - .45) / .45), 1)}
.mark::before{content:"";position:absolute;left:28%;right:28%;top:56%;height:32%;background:var(--crimson-light);filter:blur(52px);opacity:calc(var(--s) * .6);animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.25)}}
.mark svg{position:relative;width:100%;height:auto;display:block;overflow:visible}
.mark .stroke{fill:url(#steel)}
.mark .l{transform:translateX(calc((1 - var(--p)) * -34px));opacity:calc(.25 + .75 * var(--p))}
.mark .r{transform:translateX(calc((1 - var(--p)) * 34px));opacity:calc(.25 + .75 * var(--p))}
.mark .sq{fill:var(--crimson-light);transform:translateY(calc((1 - var(--s)) * -70px)) scale(calc(.6 + .4 * var(--s)));transform-box:fill-box;transform-origin:50% 50%;opacity:calc(.1 + .9 * var(--s))}
.decision-stage{position:relative;perspective:1800px;margin-top:clamp(56px,7vw,88px);display:flex;justify-content:center}
.decision-stage .card{width:min(100%,620px);transform:rotateX(calc((1 - var(--p)) * 24deg)) translateY(calc((1 - var(--p)) * 40px));transform-origin:50% 100%}
.decision-stage .card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 70px -8px var(--glow);opacity:clamp(0, calc((var(--p) - .8) / .2), 1);pointer-events:none}
.caption{margin-top:40px;display:flex;justify-content:center;align-items:center;gap:12px;font-size:.9375rem;color:var(--paper-56);transform:translateY(calc((1 - var(--p)) * 18px));opacity:calc(.15 + .85 * var(--p))}
.caption i{transform:scale(clamp(0, calc((var(--p) - .4) / .5), 1)) rotate(calc((1 - clamp(0, calc((var(--p) - .4) / .5), 1)) * 90deg));box-shadow:0 0 14px 1px rgba(212,36,64,calc(var(--p) * .6))}
.btn-halo{position:absolute;left:4.2%;width:37.6%;top:83.8%;height:10.1%;pointer-events:none;box-shadow:0 0 34px -2px rgba(212,36,64,.55);opacity:clamp(0, calc((var(--p) - .85) / .12), 1);animation:pulse 3.2s ease-in-out infinite}
.btn-sheen{position:absolute;left:4.2%;width:37.6%;top:83.8%;height:10.1%;pointer-events:none;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 53%,92.2% 100%,0 100%);opacity:clamp(0, calc((var(--p) - .85) / .12), 1)}
.btn-sheen::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-45%;background:linear-gradient(100deg,transparent,rgba(212,36,64,.22) 45%,rgba(255,255,255,.55) 50%,rgba(212,36,64,.22) 55%,transparent);animation:btnsheen 3.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes btnsheen{0%,45%{left:-45%}100%{left:110%}}
.caption i{width:.7em;height:.7em;background:var(--crimson-light);display:inline-block;flex:none}

/* Crosswalk: one control, two frameworks, drawn */
.plane{position:relative;perspective:1600px;margin-top:clamp(56px,7vw,88px)}
.plane .card{transform:rotateX(calc(38deg - var(--p) * 30deg)) translateY(calc((1 - var(--p)) * 30px));transform-origin:50% 0;margin-inline:auto;max-width:1040px}
.plane::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-2px;height:40%;background:linear-gradient(transparent,var(--carbon));pointer-events:none}
.link-row{position:absolute;left:0;right:0;height:7.6%;pointer-events:none;--k:clamp(0, calc((var(--p) - var(--at)) / .1), 1)}
.link-row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(212,36,64,.08),rgba(212,36,64,.02) 60%,rgba(212,36,64,.08));opacity:var(--k)}
.link-row b{position:absolute;left:73%;width:13.8%;top:50%;height:2px;margin-top:-1px;background:var(--crimson-light);box-shadow:0 0 14px 1px var(--glow);transform-origin:0 50%;transform:scaleX(var(--k))}
.link-row b::after{content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px var(--crimson-light);opacity:var(--k);animation:travel 2.2s ease-in-out infinite;animation-delay:var(--dl)}
@keyframes travel{0%{left:0}100%{left:calc(100% - 8px)}}

/* Delivery */
.rest-stage{position:relative;perspective:1600px;display:flex;justify-content:center}
.rest-stage .card{max-width:476px;transform:rotateY(calc(22deg - var(--p) * 14deg)) translateY(calc((1 - var(--p)) * 48px));transition:transform .35s var(--ease);box-shadow:40px 60px 120px -30px rgba(0,0,0,.95)}
.rest-stage .card{--q:clamp(0, calc((var(--p) - .45) / .4), 1)}
.rowlit{position:absolute;left:.8%;right:.8%;pointer-events:none;border-radius:6px;background:rgba(242,241,238,.03);opacity:clamp(0, calc((var(--p) - var(--at)) / .06), 1);transition:opacity .5s var(--ease)}
.scanbar{position:absolute;left:.8%;right:.8%;top:calc(6.6% + var(--q) * 37.6%);height:calc(6.6% + clamp(0, calc((var(--q) - .6) / .4), 1) * 4%);border-radius:6px;pointer-events:none;background:linear-gradient(90deg,rgba(242,241,238,.09),rgba(242,241,238,.04));box-shadow:inset 0 0 0 1px rgba(242,241,238,.32),0 0 30px -8px rgba(242,241,238,.25);opacity:calc(clamp(0, calc(var(--q) * 14), 1) * clamp(0, calc((1 - var(--q)) * 9), 1));transition:top .55s var(--ease),height .55s var(--ease),opacity .4s var(--ease);will-change:top}
.seal{position:absolute;left:.84%;top:58.9%;width:98.1%;height:39.6%;pointer-events:none;background:rgba(212,36,64,.045);box-shadow:0 0 70px -8px var(--glow),0 0 24px -6px rgba(212,36,64,.45);opacity:clamp(0, calc((var(--p) - .86) / .12), 1);transition:opacity .6s var(--ease)}
.seal::after{content:"";position:absolute;inset:0;box-shadow:0 0 60px 0 var(--glow);animation:pulse 3.6s ease-in-out infinite}

/* Access: granted, never assumed */
.access-split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.access{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;perspective:1600px;--q:clamp(0, calc((var(--p) - .4) / .4), 1)}
.access::before{content:"";position:absolute;inset:10% 0 0 10%;background:radial-gradient(45% 50% at 60% 45%,var(--glow),transparent 70%);filter:blur(50px);opacity:.7;pointer-events:none}
.access .invite{grid-column:4 / span 9;grid-row:1;transform:rotateY(calc(-16deg + var(--p) * 10deg)) translateY(calc((1 - var(--p)) * 50px));transform-origin:70% 50%}
.access .grants{grid-column:1 / span 7;grid-row:1;margin-top:104%;z-index:2;transform:translate(calc((1 - var(--q)) * -70px),calc((1 - var(--q)) * 40px));opacity:calc(.15 + .85 * var(--q))}
.roles{position:absolute;left:3.7%;width:62.3%;top:51.2%;height:5.2%;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--crimson-light),0 0 24px -6px var(--glow);opacity:clamp(0, calc((var(--p) - .25) / .15), 1);transform:scaleX(clamp(0, calc((var(--p) - .25) / .15), 1));transform-origin:0 50%;pointer-events:none}
.roles::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 22px 0 var(--glow);animation:pulse 2.8s ease-in-out infinite}

/* Coming next: reads flow one way */
.next{border-top:1px solid var(--paper-12)}
.flow{display:block;width:100%;max-width:880px;height:auto;margin:clamp(36px,4vw,56px) auto 0;overflow:visible}
.flow text{font-family:var(--font-body);font-weight:700;letter-spacing:-.03em;fill:var(--paper-56)}
.flow .base{fill:none;stroke:var(--paper-12);stroke-width:1.5}
.flow .run{fill:none;stroke:var(--crimson-light);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:10 310;animation:run 3.2s linear infinite}
/* AuditBoard's straight run is under half the curve length: a longer normalized dash keeps the visible trail the same size, and the delay keeps its arrival in step with the ingest pulse */
.flow .run:nth-of-type(2){stroke-dasharray:22 298;animation-delay:-.9467s}.flow .run:nth-of-type(3){animation-delay:-2.1333s}
.flow .core{fill:#D42440}
.flow .halo{fill:#D42440;opacity:.25;animation:ingest 1.0667s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:-.3s}
.flow .ring{fill:none;stroke:#D42440;stroke-width:1.2;transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:ripple 1.0667s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:-.3s}
@keyframes ingest{0%{opacity:1}65%{opacity:.22}100%{opacity:1}}
@keyframes ripple{0%{transform:scale(1);opacity:.85}75%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
@keyframes run{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}

/* Close */
.close{background:var(--carbon-deep);text-align:center;padding-block:clamp(120px,15vw,200px);position:relative;overflow:hidden}
.close .aurora i:nth-child(1){left:20%;top:auto;bottom:-30vw;animation-duration:30s}
.close .aurora i:nth-child(2){left:55%;top:auto;bottom:-24vw;animation-duration:36s}
.ember{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ember .horizon{position:absolute;left:50%;bottom:-46%;width:150%;height:95%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(212,36,64,.34),rgba(102,8,16,.30) 38%,transparent 70%);filter:blur(56px);animation:horizon 12s ease-in-out infinite alternate}
.ember .core{position:absolute;left:50%;bottom:-14%;width:60%;height:34%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(212,36,64,.28),transparent 70%);filter:blur(24px);animation:horizon 7s ease-in-out infinite alternate-reverse}
.ember .grid{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:radial-gradient(65% 70% at 50% 100%,#000,transparent 72%);mask-image:radial-gradient(65% 70% at 50% 100%,#000,transparent 72%)}
.ember .grid::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 280px);background-image:radial-gradient(rgba(242,241,238,.12) 1px,transparent 1.3px);background-size:28px 28px;animation:gridrise 48s linear infinite;will-change:transform}
.ember .veil{position:absolute;inset:0;background:linear-gradient(var(--carbon-deep),transparent 38%)}
@keyframes horizon{0%{opacity:.6;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.06,1.18)}}
@keyframes gridrise{to{transform:translate3d(0,-280px,0)}}
.close h2{font-size:clamp(2.5rem,6.2vw,4.75rem);position:relative}
.close h2 span{color:var(--paper-56);display:block}
.close .hero-actions{justify-content:center;position:relative}

footer{border-top:1px solid var(--paper-12);background:var(--carbon-deep)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:28px;font-size:.8125rem;color:var(--paper-56)}
.by{display:flex;align-items:center;gap:10px;letter-spacing:.18em;font-size:.75rem;color:var(--paper-76)}
.by .wm{height:11px;width:auto;fill:var(--paper-76)}

/* Desktop pinning for the Advisor */
@media (min-width:900px) and (min-height:640px){
  .adv-track{height:240vh}
  .adv-sticky{position:sticky;top:56px;height:calc(100vh - 56px);padding-block:24px}
  #advisor.chapter{padding-block:clamp(48px,6vw,96px)}
}
@media (max-width:899px){
  .adv-sticky{grid-template-columns:minmax(0,1fr)}
  .panel{width:min(340px,100%)}
}
@media (max-width:860px){
  .split,.access-split{grid-template-columns:minmax(0,1fr)}
  .evidence{display:flex;flex-direction:column}
  .evidence .verdict{margin:-28px 0 0 10%}
  .hero .window{border-radius:10px}
}
@media (max-width:860px){
  .stage.load{animation-name:enter-flat}
}
@keyframes enter-flat{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (max-width:520px){
  .hero .eyebrow{font-size:1.05rem;letter-spacing:.04em}
  .access .invite{grid-column:2 / -1}
  .access .grants{grid-column:1 / span 10;margin-top:96%}
  .evidence{display:flex;flex-direction:column}
  .evidence .verdict{margin:-28px 0 0 10%}
  .hero .window img{aspect-ratio:4/5;object-fit:cover;object-position:78% 0;width:100%}
  .caption{text-align:left;max-width:30ch;margin-inline:auto}
  .plane .card{transform:rotateX(calc(20deg - var(--p) * 20deg))}
  .link-row b::after{width:6px;height:6px;top:-2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .load{opacity:1;filter:none;transform:none}
}

/* ==========================================================================
   Site chrome, home and access pages. Same tokens and motion system as the
   ASHUR page. No inline styles anywhere: style-src is 'self'.
   ========================================================================== */

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--paper);color:var(--carbon);font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* Masthead */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(16,18,20,.74);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid var(--paper-12)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px}
.wordmark{display:flex;align-items:center;min-height:44px;text-decoration:none}
.wordmark img{width:118px;height:auto}
.menu{display:flex;align-items:center;gap:clamp(16px,2.6vw,32px);margin-left:auto}
.menu a{position:relative;font-size:.875rem;font-weight:500;color:var(--paper-76);text-decoration:none;padding:6px 0;transition:color .3s var(--ease)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--crimson-light);transform:scaleX(0);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.menu a[aria-current="page"]{color:var(--paper)}
.menu a[aria-current="page"]::after{transform:none;opacity:1}
@media (hover:hover){.menu a:hover{color:var(--paper)}.menu a:hover::after{transform:none;opacity:1}}
/* Footer */
.site-foot{border-top:1px solid var(--paper-12);background:var(--carbon-deep)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding-block:32px;font-size:.8125rem;color:var(--paper-56)}
.site-foot .left{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.site-foot img{width:96px;height:auto}
.site-foot nav{display:flex;flex-wrap:wrap;gap:18px}
.site-foot a{color:var(--paper-76);text-decoration:none}
.site-foot a:hover{color:var(--paper)}

/* Utilities replacing every former inline style */
.pt-0{padding-top:0}
.pt-s{padding-top:clamp(48px,6vw,96px)}
.mt-28{margin-top:28px}
.mt-40{margin-top:40px}
.nw{white-space:nowrap}
h2.h-split{font-size:clamp(2.5rem,5vw,4.25rem)}
h2.h-tight{font-size:clamp(2.25rem,3.9vw,3.4rem)}
h2.h-next{font-size:clamp(2.25rem,4.6vw,3.75rem)}
.r1{top:6.6%;height:6.6%;--at:.45}.r2{top:13.3%;height:6.6%;--at:.52}.r3{top:19.9%;height:6.6%;--at:.59}
.r4{top:26.6%;height:6.6%;--at:.66}.r5{top:33.3%;height:10.8%;--at:.73}.r6{top:44.2%;height:10.5%;--at:.85}
.k1{top:6.8%;--at:.42;--dl:0s}.k2{top:14.4%;--at:.52;--dl:-.55s}.k3{top:22.1%;--at:.62;--dl:-1.1s}.k4{top:29.8%;--at:.72;--dl:-1.65s}

/* Product mark line above the ASHUR hero */
.prodmark{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.18em;font-size:.8125rem;color:var(--paper);margin-bottom:22px}
.prodmark svg{height:18px;width:auto}

/* Home */
/* Home hero: the approved top-lit RAKATRIX hero, revealed like a stage.
   Order: lights come up on the mark, a single light pass crosses it, the footlight draws, then the copy.
   Everything here animates transform or opacity only. --x (0 to 1) is set from script as the hero scrolls away. */
.home-hero{--mw:min(1240px,118vw);--x:0;display:flex;flex-direction:column;justify-content:center;min-height:min(calc(100vh - 60px),980px);min-height:min(calc(100svh - 60px),980px);padding-block:clamp(8px,2vw,32px) clamp(28px,4vh,48px);text-align:center}
.home-hero::before{opacity:.45}
.home-hero .wrap{position:static;width:100%;flex:1;display:flex;flex-direction:column}
.title-card{margin-block:auto;padding-top:clamp(12px,3vh,40px)}
.home-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(80px,12vw,160px);background:linear-gradient(rgba(16,18,20,0),var(--carbon));pointer-events:none;z-index:1}
.home-hero .aurora{opacity:.7}
.mark-wrap{position:relative;z-index:0;width:var(--mw);margin-left:calc(50% - var(--mw) / 2);margin-bottom:calc(var(--mw) * -.088);transform:translate3d(0,calc(var(--x) * 72px),0) scale(calc(1 - var(--x) * .05));opacity:calc(1 - var(--x) * .75);will-change:transform,opacity}
.mark-in{animation:mark-in 1.7s cubic-bezier(.22,.61,.2,1) .08s both}
@keyframes mark-in{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
.hero-mark{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent);mask-image:radial-gradient(closest-side,#000 84%,transparent)}
.hero-mark .band{animation:sweep 2.3s cubic-bezier(.37,.12,.33,1) .95s both}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(2500px)}}
.lights{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* Searchlight: rests a touch left of centre, then swings left to right as the hero scrolls away (--x), with a short ease so it never snaps. A desktop pointer nudges it (--bx). */
.beam{position:absolute;left:50%;top:-34%;width:min(1700px,190vw);height:118%;transform:translateX(-50%) rotate(calc(5deg - var(--x) * 26deg - var(--bx,0) * 8deg));transform-origin:50% 0;transition:transform .9s cubic-bezier(.22,.61,.36,1);opacity:calc(1 - var(--x) * .55);will-change:transform}
.beam i{position:absolute;inset:0;background:conic-gradient(from 180deg at 50% 0,rgba(242,241,238,.17),rgba(242,241,238,.1) 4deg,rgba(242,241,238,.035) 8.5deg,transparent 12deg 348deg,rgba(242,241,238,.035) 351.5deg,rgba(242,241,238,.1) 356deg,rgba(242,241,238,.17));-webkit-mask-image:linear-gradient(transparent 20%,#000 40%,rgba(0,0,0,.45) 72%,transparent);mask-image:linear-gradient(transparent 20%,#000 40%,rgba(0,0,0,.45) 72%,transparent);filter:blur(12px);transform-origin:50% 0;animation:beam-in 2s var(--ease) both,sway 13s ease-in-out 2s infinite alternate}
@keyframes beam-in{from{opacity:0}to{opacity:1}}
@keyframes sway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
.spot{position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,241,238,.065),rgba(242,241,238,.02) 55%,transparent);transform:translate3d(var(--mx),var(--my),0);opacity:0;transition:opacity .8s var(--ease)}
.home-hero.lit .spot{opacity:1}
/* Mark and copy share one scroll offset, so the title leaves as a single piece and the mark never slides over the copy */
.home-hero .hero-copy{position:relative;z-index:2;transform:translate3d(0,calc(var(--x) * 72px),0)}
.footlight{display:block;width:min(520px,72%);height:1px;margin:0 auto clamp(18px,2.2vw,28px);background:linear-gradient(90deg,transparent,var(--crimson-light) 30%,var(--crimson-light) 70%,transparent);box-shadow:0 0 18px 1px var(--glow);animation:footlight 1.5s var(--ease) 1s both}
@keyframes footlight{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
.home-hero .eyebrow{font-size:clamp(1.05rem,1.4vw,1.375rem);letter-spacing:.14em;color:var(--paper-76)}
.home-hero h1{font-size:clamp(2.1rem,4.4vw,3.75rem);margin-top:clamp(14px,1.6vw,22px)}
.e1{animation-delay:1.05s}.e2{animation-delay:1.17s}.e3{animation-delay:1.29s}
@media (max-width:640px){
  /* Phones: the letters span about 88% of the screen (the artwork's letters are 74% of its plate), so the mark clearly outranks the headline */
  .home-hero{--mw:119vw;min-height:calc(86vh - 60px);min-height:calc(86svh - 60px);padding-block:16px clamp(32px,6vh,56px)}
  .home-hero h1{font-size:clamp(1.55rem,6.9vw,2rem);letter-spacing:-.03em}
  .home-hero .eyebrow{font-size:.95rem;letter-spacing:.12em}
  .footlight{width:78%}
  .beam{width:220vw}
}
.home-hero .lede,.access-hero .lede{max-width:none}
.creed .lede{margin-inline:auto}
#ashur .stage{margin-top:clamp(48px,6vw,80px)}
.home-hero + #services{padding-top:clamp(56px,10vw,160px)}
.split-rev{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.services{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.services li{position:relative;padding-top:26px;border-top:1px solid var(--paper-12);transform:translateY(calc((1 - var(--k,1)) * 30px));opacity:calc(.25 + .75 * var(--k,1));--k:clamp(0, calc((var(--p) - var(--at)) / .3), 1)}
.services li::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:calc(var(--k,1) * 64px);background:var(--crimson-light)}
.services li:nth-child(1){--at:0}.services li:nth-child(2){--at:.15}.services li:nth-child(3){--at:.3}
.services h3{margin:0 0 12px;font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.services p{color:var(--paper-76);font-size:1rem;line-height:1.55;max-width:34ch}
.creed{background:var(--carbon-deep);text-align:center;position:relative;overflow:hidden}
.creed h2{font-size:clamp(2.5rem,6.4vw,5.25rem)}
.creed h2 span{display:block;color:var(--paper-56)}
.founder{margin-top:36px;display:flex;align-items:center;gap:16px}
.founder .tile{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--raised);border:1px solid var(--paper-12)}
.founder .tile img{width:26px;height:auto}
.founder b{display:block;font-size:1rem}
.founder span{font-size:.875rem;color:var(--paper-56)}
.mail{display:inline-flex;align-items:center;gap:12px;margin-top:32px;font-size:clamp(1.125rem,2vw,1.5rem);font-weight:600;letter-spacing:-.01em}
.mail a{text-decoration:none;border-bottom:1px solid var(--crimson-light)}

/* Access */
.access-hero{padding-block:clamp(72px,10vw,128px) clamp(48px,6vw,80px)}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px);margin-top:clamp(40px,5vw,64px);align-items:start}
.door{position:relative;padding:clamp(24px,3vw,40px);border-radius:16px;border:1px solid var(--paper-12);background:linear-gradient(180deg,rgba(26,29,34,.92),rgba(16,18,20,.92));box-shadow:0 50px 110px -50px rgba(0,0,0,.95);display:flex;flex-direction:column;gap:14px;min-width:0}
.door.is-known{box-shadow:0 0 0 1px var(--crimson-light),0 0 70px -10px var(--glow)}
.door h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em}
.door p{color:var(--paper-76);max-width:46ch}
.door .btn{align-self:flex-start;margin-top:8px}
.door .tag{font-family:var(--font-display);font-size:1.125rem;letter-spacing:.06em;color:var(--paper-56)}
.form{display:grid;gap:14px;margin-top:6px}
.field{display:grid;gap:6px}
.field label{font-size:.8125rem;font-weight:600;color:var(--paper-76)}
.field input,.field select,.field textarea{font:inherit;font-size:.9375rem;color:var(--paper);background:rgba(11,12,14,.7);border:1px solid var(--paper-12);border-radius:10px;padding:11px 12px;min-width:0;width:100%}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--crimson-light);box-shadow:0 0 0 3px rgba(212,36,64,.18)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form .btn{border:0;cursor:pointer;justify-self:start;margin-top:6px}
.hint{font-size:.8125rem;color:var(--paper-56)}
.copy{font:inherit;font-size:.8125rem;font-weight:600;color:var(--paper);background:transparent;border:1px solid var(--paper-12);border-radius:999px;padding:4px 12px;cursor:pointer}
.copy:hover{border-color:var(--paper-30)}

@media (max-width:860px){
  .services{grid-template-columns:minmax(0,1fr)}
  .doors{grid-template-columns:minmax(0,1fr)}
  .split-rev{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .row2{grid-template-columns:minmax(0,1fr)}
  .nav .wrap{gap:12px}
  .wordmark img{width:96px}
  .menu{gap:10px}
  .menu a{font-size:.75rem;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
}
@media (max-width:380px){
  .hero:not(.home-hero) h1{font-size:2.45rem}
  .nav .wrap{gap:8px}
  .wordmark img{width:88px}
  .menu{gap:8px}
}
@media (max-width:340px){
  .hero:not(.home-hero) h1{font-size:2.15rem}
}

/* Touch devices: let native scrolling carry the page. Brief entrances use
   transform/opacity; product screens remain readable between sections. */
@media (hover:none) and (pointer:coarse){
  .nav{background:rgba(16,18,20,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  .load{animation-name:enter-flat}
  .aurora i,.ember .horizon,.ember .core{filter:none;animation:none}
  .ember .grid::before{animation:none;will-change:auto}
  .sheen,.scan,.btn-sheen::before,.link-row b::after{animation:none}
  .ask{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--raised)}
  .hero .fade{display:none}
  .hero .scroller{margin-bottom:0}
  .hero .window img{aspect-ratio:auto;object-fit:contain;object-position:center}
  .hero .scroller,.panel-wrap,.evidence .src,.evidence .verdict,
  .decision-stage .card,.plane .card,.rest-stage .card,.access .invite,.access .grants{transform:none}
  .mark-wrap,.home-hero .hero-copy{transform:none;opacity:1;will-change:auto}
  .mark-in{position:relative;overflow:hidden}
  .hero-mark .band{animation:none}
  /* Move the pass on an HTML layer instead of repainting the masked SVG. */
  .mark-in::after{content:"";position:absolute;inset:0 auto 0 -45%;width:45%;pointer-events:none;background:linear-gradient(110deg,transparent,rgba(255,255,255,.22),transparent);animation:touch-sweep 2.3s cubic-bezier(.37,.12,.33,1) .95s both}
  .beam{width:180vw;transition:none;animation:touch-searchlight 9s ease-in-out 1.6s infinite alternate}
  .beam i{filter:none;animation:beam-in 2s var(--ease) both}
  .scanbar{transition:none;will-change:auto}
  .touch-motion .motion-idle *,.touch-motion .motion-idle::before,.touch-motion .motion-idle::after,
  .touch-motion .motion-idle *::before,.touch-motion .motion-idle *::after{animation-play-state:paused!important}
}

/* ---------------------------------------------------------------------------
   Touch scenes. Each scene plays its own choreography once, on time, when it
   scrolls into view; nothing chases the scroll position. Keyframes declare only
   the starting pose, so every animation lands on the settled layout. Only
   transform and opacity animate, which the compositor runs off the main thread.
   Before a scene plays, its animations hold at the first frame.
   --------------------------------------------------------------------------- */
@media (hover:none) and (pointer:coarse){
  .touch-motion .scene:not(.play),.touch-motion .scene:not(.play) *,
  .touch-motion .scene:not(.play)::before,.touch-motion .scene:not(.play)::after,
  .touch-motion .scene:not(.play) *::before,.touch-motion .scene:not(.play) *::after{animation-play-state:paused!important}

  /* Headings assemble line by line */
  .touch-motion .rise.scene > *{animation:t-rise .9s var(--ease) both}
  .touch-motion .rise.scene > :nth-child(2){animation-delay:.09s}
  .touch-motion .rise.scene > :nth-child(3){animation-delay:.18s}
  .touch-motion .rise.scene > :nth-child(4){animation-delay:.27s}
  .touch-motion .rise.scene > :nth-child(5){animation-delay:.36s}

  /* Home: services arrive in sequence, each rule drawing in */
  .touch-motion .services.scene li{animation:t-rise-far .9s var(--ease) both}
  .touch-motion .services.scene li:nth-child(2){animation-delay:.14s}
  .touch-motion .services.scene li:nth-child(3){animation-delay:.28s}
  .touch-motion .services.scene li::before{transform-origin:0 50%;animation:t-draw .8s var(--ease) both}
  .touch-motion .services.scene li:nth-child(1)::before{animation-delay:.3s}
  .touch-motion .services.scene li:nth-child(2)::before{animation-delay:.44s}
  .touch-motion .services.scene li:nth-child(3)::before{animation-delay:.58s}
  .touch-motion .founder.scene{animation:t-rise .9s var(--ease) .1s both}

  /* Product screens tip up into place; a light passes across them now and then */
  .touch-motion .stage.scene .window,.touch-motion .hero .scroller{animation:t-tilt 1.3s var(--ease) both}
  .touch-motion .hero .scroller{animation-delay:.7s}
  .touch-motion .stage.scene::before{animation:t-fade 1.6s ease-out .3s both}
  .touch-motion .sheen{background:none;overflow:hidden}
  .touch-motion .sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(110deg,transparent,rgba(242,241,238,.08) 50%,transparent);transform:translate3d(-110%,0,0);animation:t-sheen 7s ease-in-out 1.6s infinite}

  /* Advisor: the panel swings round and the answer streams in under a red caret */
  .touch-motion .adv-track{height:auto}
  .touch-motion .adv-sticky{position:static;height:auto}
  .touch-motion .adv-stage.scene .panel-wrap{animation:t-swing 1.2s var(--ease) both}
  .touch-motion .panel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,var(--crimson-light),transparent) 5% 0 / 70% 2px no-repeat,linear-gradient(var(--raised) 0,var(--raised) 100%) 0 2px / 100% 100% no-repeat;transform:translate3d(0,101%,0)}
  .touch-motion .adv-stage.scene .panel::after{animation:t-stream 2.8s cubic-bezier(.3,.1,.5,1) .55s both}
  .touch-motion .adv-stage.scene .ask{animation:t-rise 1s var(--ease) .35s both}

  /* Sources: the record slides in, a scan reads it, the injected line is caught */
  .touch-motion .evidence.scene .src{animation:t-from-left 1.1s var(--ease) both}
  .touch-motion .evidence.scene .verdict{animation:t-from-right 1.1s var(--ease) .55s both}
  .touch-motion .evidence.scene .hl{transform-origin:0 50%;animation:t-mark .55s var(--ease) both}
  .touch-motion .evidence.scene .hl.who{animation-delay:.75s}
  .touch-motion .evidence.scene .hl.inj{animation-delay:1.15s}
  .touch-motion .evidence.scene .hl.line{animation-delay:1.75s}
  .touch-motion .scan{top:0;animation:t-scan 3.6s cubic-bezier(.5,0,.5,1) infinite}

  /* Crosswalk: the table tips flat, then each control draws its link */
  .touch-motion .plane.scene .card{animation:t-plane 1.3s var(--ease) both}
  .touch-motion .plane.scene .link-row::before{animation:t-fade .5s ease-out both}
  .touch-motion .plane.scene .link-row b{animation:t-draw .6s var(--ease) both}
  .touch-motion .plane.scene .k1::before,.touch-motion .plane.scene .k1 b{animation-delay:.8s}
  .touch-motion .plane.scene .k2::before,.touch-motion .plane.scene .k2 b{animation-delay:1.05s}
  .touch-motion .plane.scene .k3::before,.touch-motion .plane.scene .k3 b{animation-delay:1.3s}
  .touch-motion .plane.scene .k4::before,.touch-motion .plane.scene .k4 b{animation-delay:1.55s}
  .touch-motion .link-row b::after{left:0;width:100%;height:8px;top:-3px;border-radius:0;box-shadow:none;background:radial-gradient(circle at 4px 50%,#fff 0 2px,rgba(212,36,64,.85) 3px,transparent 6px);animation:t-travel 2.2s ease-in-out infinite;animation-delay:var(--dl)}

  /* Decisions: the A assembles, the square drops in last, the card rises to meet it */
  .touch-motion .mark.scene .l{animation:t-from-l 1s var(--ease) both}
  .touch-motion .mark.scene .r{animation:t-from-r 1s var(--ease) both}
  .touch-motion .mark.scene .sq{animation:t-drop .9s cubic-bezier(.3,1.35,.5,1) .65s both}
  .touch-motion .mark.scene::before{animation:t-fade 1.2s ease-out .9s both,breathe 4.5s ease-in-out 2.1s infinite}
  .touch-motion .decision-stage.scene .card{animation:t-tilt 1.2s var(--ease) both}
  .touch-motion .decision-stage.scene .card::after,.touch-motion .decision-stage.scene .btn-halo{animation:t-fade .9s ease-out 1s both}
  .touch-motion .decision-stage.scene .btn-halo{animation:t-fade .9s ease-out 1s both,pulse 3.2s ease-in-out 1.9s infinite}
  .touch-motion .btn-sheen::before{left:0;transform:translate3d(-112%,0,0);animation:t-btnsheen 3.6s cubic-bezier(.5,0,.3,1) 1.4s infinite}
  .touch-motion .caption.scene{animation:t-rise .9s var(--ease) both}
  .touch-motion .caption.scene i{animation:t-spin .8s var(--ease) .35s both}

  /* Delivery: the record turns in, rows light in order, the seal closes it */
  .touch-motion .rest-stage.scene .card{animation:t-turn 1.2s var(--ease) both}
  .touch-motion .rest-stage.scene .rowlit{transition:none;animation:t-fade .45s ease-out both}
  .touch-motion .rest-stage.scene .r1{animation-delay:.55s}.touch-motion .rest-stage.scene .r2{animation-delay:.7s}.touch-motion .rest-stage.scene .r3{animation-delay:.85s}
  .touch-motion .rest-stage.scene .r4{animation-delay:1s}.touch-motion .rest-stage.scene .r5{animation-delay:1.15s}.touch-motion .rest-stage.scene .r6{animation-delay:1.35s}
  .touch-motion .scanbar{top:6.6%;height:6.6%;transition:none;opacity:0}
  .touch-motion .rest-stage.scene .scanbar{animation:t-rowscan 1.3s cubic-bezier(.45,0,.3,1) .5s both}
  .touch-motion .rest-stage.scene .seal{transition:none;animation:t-fade .8s ease-out 1.75s both}

  /* Access: the invite turns in, grants slide under it, roles are ringed */
  .touch-motion .access.scene .invite{animation:t-turn-l 1.2s var(--ease) both}
  .touch-motion .access.scene .grants{animation:t-from-left 1.1s var(--ease) .5s both}
  .touch-motion .access.scene .roles{transform-origin:0 50%;animation:t-mark .6s var(--ease) 1.1s both}

  /* Coming next and the ambient glows */
  .touch-motion .flow.scene{animation:t-rise 1s var(--ease) both}
  .touch-motion .ember .horizon{animation:horizon 12s ease-in-out infinite alternate}
  .touch-motion .ember .core{animation:horizon 7s ease-in-out infinite alternate-reverse}
  .touch-motion .aurora i{animation:drift 26s ease-in-out infinite alternate}
}
@keyframes t-rise{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes t-rise-far{from{opacity:0;transform:translate3d(0,44px,0)}}
@keyframes t-fade{from{opacity:0}}
@keyframes t-draw{from{transform:scaleX(0)}}
@keyframes t-mark{from{opacity:0;transform:scaleX(0)}}
@keyframes t-tilt{from{opacity:.2;transform:perspective(1400px) rotateX(18deg) translate3d(0,44px,0) scale(.94)}}
@keyframes t-plane{from{opacity:.25;transform:perspective(1400px) rotateX(36deg) translate3d(0,30px,0)}}
@keyframes t-swing{from{opacity:.2;transform:perspective(1400px) rotateY(-26deg) rotateX(7deg) translate3d(-18px,0,0)}}
@keyframes t-turn{from{opacity:.2;transform:perspective(1400px) rotateY(24deg) translate3d(0,48px,0)}}
@keyframes t-turn-l{from{opacity:.2;transform:perspective(1400px) rotateY(-18deg) translate3d(0,50px,0)}}
@keyframes t-from-left{from{opacity:0;transform:translate3d(-56px,26px,0) rotate(-1.5deg)}}
@keyframes t-from-right{from{opacity:0;transform:translate3d(70px,44px,0)}}
@keyframes t-from-l{from{opacity:.15;transform:translate3d(-34px,0,0)}}
@keyframes t-from-r{from{opacity:.15;transform:translate3d(34px,0,0)}}
@keyframes t-drop{from{opacity:0;transform:translate3d(0,-70px,0) scale(.6)}}
@keyframes t-spin{from{transform:scale(0) rotate(90deg)}}
@keyframes t-stream{from{transform:translate3d(0,19%,0)}to{transform:translate3d(0,101%,0)}}
@keyframes t-rowscan{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:1}82%{opacity:1;transform:translate3d(0,570%,0)}100%{opacity:0;transform:translate3d(0,570%,0)}}
@keyframes t-sheen{0%,55%{transform:translate3d(-110%,0,0)}100%{transform:translate3d(300%,0,0)}}
@keyframes t-btnsheen{0%,45%{transform:translate3d(-112%,0,0)}100%{transform:translate3d(275%,0,0)}}
@keyframes t-scan{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,455%,0)}}
@keyframes t-travel{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(100% - 8px),0,0)}}

@keyframes touch-sweep{from{transform:translate3d(0,0,0)}to{transform:translate3d(500%,0,0)}}
@keyframes touch-searchlight{from{transform:translateX(-50%) rotate(-3deg)}to{transform:translateX(-50%) rotate(3deg)}}