/* ==========================================================================
   Atlas Intel — site.css
   A faithful re-build of Atlas Intel (Aeonik + IBM Plex Mono, real tokens).
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:"Aeonik";src:url("../assets/fonts/Aeonik-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("../assets/fonts/Aeonik-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("../assets/fonts/Aeonik-RegularItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBMPlexMono";src:url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBMPlexMono";src:url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
:root{
  --blue:#1a2ffb; --dark-blue:#071bdf; --header-color:#0016ec;
  --white:#ffffff; --off-white:#f0f1fa; --dark-white:#e4e6ef;
  --ink:#111318; --black:#0b0b0e; --bg:#111111; --grey-blue:#2b2e3a;
  --green:#c1ff00; --red:#ff4c41; --purple:#8832f7;
  --font:"Aeonik","Helvetica Neue",Arial,sans-serif;
  --mono:"IBMPlexMono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,4.4vw,64px);
  --maxw:1600px;

  /* --------- download-pill design tokens (PART C: both finale CTAs theme from here)
     Radius/padding shared; the primary rides the brand blue, the alt reads as a
     distinct brushed graphite/steel so it is more than plain faux-glass. Glow is
     a soft periwinkle accent that the cat's loop-2 cue (#end.dlx-cue2) escalates.
     No backdrop-filter anywhere (PERF LAW inside #app) — faux layered gradients. */
  --dl-radius:999px;
  --dl-pad:15px 26px;
  --dl-icon-drift:2px;                                  /* icon nudge distance on hover */
  --dl-glow:#5b7cfa;                                    /* site accent-blue glow */
  --dl-glow-rgb:91,124,250;
  /* primary (Windows) — brand blue with a top sheen so it has real depth */
  --dl-bg:linear-gradient(178deg,#3346ff 0%,var(--blue) 46%,var(--dark-blue) 100%);
  --dl-bg-hover:linear-gradient(178deg,#4457ff 0%,#1424f6 46%,var(--dark-blue) 100%);
  --dl-shadow:0 10px 26px rgba(var(--dl-glow-rgb),.28),0 2px 6px rgba(4,8,30,.4),inset 0 1px 0 rgba(255,255,255,.28);
  --dl-shadow-hover:0 16px 40px rgba(var(--dl-glow-rgb),.5),0 4px 12px rgba(4,8,30,.46),inset 0 1px 0 rgba(255,255,255,.34);
  /* alt (Mac) — brushed steel/graphite: cool metallic top-light over graphite body */
  --dl-alt-bg:linear-gradient(168deg,rgba(214,222,240,.22) 0%,rgba(150,166,200,.09) 34%,rgba(38,44,60,.9) 100%),
    linear-gradient(180deg,#333a4d 0%,#232838 60%,#1a1e2b 100%);
  --dl-alt-bg-hover:linear-gradient(168deg,rgba(224,232,248,.3) 0%,rgba(160,176,210,.13) 34%,rgba(44,51,70,.92) 100%),
    linear-gradient(180deg,#3a4356 0%,#282e40 60%,#1d2230 100%);
  --dl-alt-shadow:0 10px 26px rgba(6,9,18,.42),inset 0 1px 0 rgba(214,224,248,.22),inset 0 -1px 0 rgba(0,0,0,.3);
  --dl-alt-shadow-hover:0 16px 40px rgba(6,9,18,.5),0 0 26px rgba(150,166,210,.18),inset 0 1px 0 rgba(220,230,252,.3),inset 0 -1px 0 rgba(0,0,0,.34);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg);color:var(--white);font-family:var(--font);
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
/* hide the native scrollbar sitewide — the glass checkpoint rail is the affordance now.
   scroll still works (wheel/touch/keys, and the smooth-scroll spacer); only the bar is gone. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--blue);color:#fff}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}

/* hide the native cursor on fine pointers (custom cursor takes over) */
@media (hover:hover) and (pointer:fine){ html.cursor-on, html.cursor-on *{cursor:none} }

/* --------------------------------------------------- smooth-scroll plumbing */
#canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;background:var(--bg)}
#app{position:relative;z-index:1}
html.smooth #app{position:fixed;top:0;left:0;width:100%;will-change:transform}
#scroll-spacer{display:none}
html.smooth #scroll-spacer{display:block}

/* small plus/cross motif */
.cross{position:relative;width:12px;height:12px;flex:0 0 auto;opacity:.6}
.cross::before,.cross::after{content:"";position:absolute;background:currentColor}
.cross::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.cross::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}

/* -------------------------------------------------------------- custom cursor */
#cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;
  transform:translate(-50%,-50%) scale(1);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
#cursor.hide{opacity:0}
#cursor.link{width:64px;height:64px;background:#fff}
#cursor-label{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#111;opacity:0;transition:opacity .25s}
#cursor.link #cursor-label{opacity:1}
/* OS-specific cursor: a larger disc carrying the Windows / Apple glyph, no text */
#cursor.cur-ico{width:78px;height:78px}
#cursor-ico{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  transform:scale(.6);transition:opacity .22s var(--ease),transform .3s var(--ease)}
#cursor-ico svg{width:42%;height:42%;color:#111;display:block}
#cursor.cur-ico #cursor-ico{opacity:1;transform:scale(1)}
#cursor.cur-ico #cursor-label{opacity:0}

/* dev-only live scroll readout by the scrollbar (press h to hide) */
#scroll-hud{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:9500;
  font-family:var(--mono);font-size:10px;line-height:1.4;pointer-events:none;letter-spacing:.04em;
  background:rgba(240,242,248,.9);padding:8px 10px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.14);
  display:flex;flex-direction:column;gap:3px;min-width:96px}
#scroll-hud.hidden{display:none}
#scroll-hud div{display:flex;justify-content:space-between;gap:12px}
#scroll-hud b{font-weight:400;color:#8b97a8;text-transform:uppercase}
#scroll-hud span{font-variant-numeric:tabular-nums;color:#0016ec}

/* ================================================================== header */
#header{position:fixed;top:0;left:0;width:100%;z-index:9000;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2vw,26px) var(--pad);color:#fff}
#header-logo{mix-blend-mode:difference}
#header-logo svg{display:block;height:22px;width:auto;fill:currentColor}
#header-right{display:flex;align-items:center;gap:12px}
.hbtn{position:relative;display:inline-flex;align-items:center;gap:9px;
  height:42px;padding:0 20px;border-radius:100px;border:1px solid rgba(255,255,255,.35);
  font-size:14px;line-height:1;overflow:hidden;transition:border-color .3s}
/* Download + Menu live INSIDE the dark glass pill (#header-right), NOT bare on
   the page like the logo. So they get a fixed white ink that always reads on
   the pill — no page-relative mix-blend (which flickered and, over light
   sections, collapsed to dark-on-dark). The pill itself is kept reliably dark
   in glass.css so this holds on every background. */
#header-right-talk-btn,#menu-btn{mix-blend-mode:normal;color:#fff}
.hbtn:hover{border-color:#fff}
/* sound toggle: bare canvas circle, drawn in JS (grey idle -> blue on hover) */
#header-right-sound-btn{width:44px;height:44px;padding:0;border:0;background:none;
  position:relative;overflow:hidden;border-radius:50%;cursor:pointer}
#header-right-sound-btn canvas{display:block}
#header-right-talk-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
#menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px}
#menu-btn .bars span{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
html.menu-open #menu-btn .bars span:nth-child(1){transform:translateY(2.75px) rotate(45deg)}
html.menu-open #menu-btn .bars span:nth-child(2){transform:translateY(-2.75px) rotate(-45deg)}
#menu-btn .label-close{display:none}
html.menu-open #menu-btn .label-open{display:none}
html.menu-open #menu-btn .label-close{display:inline}

/* adaptive contrast: mix-blend difference reads great over dark sections but
   turns to a low-contrast mid-grey over bright ground (the end-reveal video,
   the light "goal" band). initHeaderContrast() adds .on-light to #header when
   the section under the bar is light; we then drop the blend and paint the
   chrome solid ink so Menu / Download / logo always stay legible. */
/* on-light applies to the LOGO ONLY — it is bare on the page and must flip to
   dark ink over light sections. The pill buttons stay white (they sit on the
   dark pill, not the page), so they are deliberately excluded here. */
#header.on-light #header-logo{mix-blend-mode:normal;color:#0b0d12}
/* scroll-flicker fix: mix-blend-mode:difference recomputes against the live
   compositor every frame, and browsers frequently paint a stale/blank layer
   mid-scroll under transform-driven smooth scrolling -> a black flash that
   self-corrects once motion settles. While actively scrolling we drop the
   live blend and hold the already-known-correct solid color instead, so
   there is nothing left to flicker; the reactive invert returns the moment
   scrolling stops (is-scrolling removed). */
/* Anti-flicker freeze applies to the LOGO ONLY (the one bare element that
   blends against the moving page). The pill buttons never blended against the
   page, so they need nothing here. */
html.is-scrolling #header-logo{mix-blend-mode:normal;color:#fff}
html.is-scrolling #header.on-light #header-logo{color:#0b0d12}
/* crossover fix: slide the fixed chrome out of the way over the finale video +
   footer so the ATLAS mark never bleeds across the wordmark / address text.
   Menu open force-reveals it so you can always close the menu. */
#header{transition:opacity .45s var(--ease),transform .45s var(--ease)}
#header.chrome-hide{opacity:0;transform:translateY(-118%);pointer-events:none}
html.menu-open #header.chrome-hide{opacity:1;transform:none;pointer-events:auto}

/* ------------------------------------------------- menu dropdown (Atlas-style) */
/* a top-right stack of cards: white links panel + newsletter + dark LABS.
   open = fade in + slide up 109px + un-rotate 3.5deg, 0.5s cubic-bezier(.4,0,.1,1) */
/* pointer-events:none on the fixed container: a transparent closed menu must never
   eat clicks in its top-right region (it was swallowing the back-to-top button).
   Open cards re-enable their own pointer-events, which works through a none parent. */
#menu{position:fixed;top:calc(clamp(14px,2vw,26px) + 54px);right:var(--pad);z-index:8500;
  width:min(340px,86vw);max-height:calc(100vh - 96px);display:flex;flex-direction:column;gap:12px;
  pointer-events:none}
.menu-card{opacity:0;visibility:hidden;transform:translateY(109px) rotate(3.5deg);transform-origin:top center;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;
  pointer-events:none;will-change:transform,opacity}
html.menu-open .menu-card{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s}
html.menu-open #menu-newsletter{transition-delay:.05s}
html.menu-open #menu-labs{transition-delay:.1s}
/* links panel */
#menu-links{background:#fff;border-radius:14px;padding:10px;box-shadow:0 24px 70px rgba(10,12,20,.22)}
.menu-link{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:13px 20px;border-radius:100px;color:var(--ink);background:none;cursor:pointer;
  font-size:20px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;overflow:hidden;text-align:left}
.menu-link-bg{position:absolute;inset:0;background:var(--header-color);border-radius:100px;
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .4s cubic-bezier(.4,0,.1,1);z-index:0}
.menu-link:hover .menu-link-bg{opacity:.1;transform:scale(1)}
.menu-link .roll{position:relative;z-index:1}
.menu-link .arw{position:relative;z-index:1;opacity:0;transform:translateX(-8px);font-size:15px;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.menu-link:hover .arw{opacity:1;transform:none}
/* newsletter card */
#menu-newsletter{background:#fff;border-radius:14px;padding:22px 22px 24px;box-shadow:0 24px 70px rgba(10,12,20,.22)}
#menu-newsletter h3{font-size:22px;font-weight:500;color:var(--ink);margin-bottom:16px;line-height:1.08;letter-spacing:-.01em}
.nl-input{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);
  border-radius:100px;padding:6px 6px 6px 18px}
.nl-input input{flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;font-size:15px;outline:none}
.nl-input input::placeholder{color:rgba(255,255,255,.6)}
.nl-input button{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center}
#menu-newsletter .nl-input{background:var(--off-white)}
#menu-newsletter .nl-input input{color:var(--ink)}
#menu-newsletter .nl-input input::placeholder{color:rgba(17,19,24,.5)}
#menu-newsletter .nl-input button{background:var(--blue);color:#fff}
/* newsletter subscribe feedback (js/site.js initNewsletter) */
.nl-msg{margin:8px 4px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.4;color:rgba(255,255,255,.6)}
.nl-msg.ok{color:#8fe6a4}
.nl-msg.warn{color:#ffb454}
#menu-newsletter .nl-msg{color:rgba(17,19,24,.62)}
#menu-newsletter .nl-msg.ok{color:#1f8f4d}
.nl-input.nl-busy{opacity:.65;pointer-events:none}
.nl-input.nl-done{opacity:.85}
/* dark LABS button */
#menu-labs{background:var(--black);color:#fff;border-radius:14px;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;font-size:20px;font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;transition:background .3s}
#menu-labs:hover{background:var(--blue)}
#menu-labs .arw2{transition:transform .3s var(--ease)}
#menu-labs:hover .arw2{transform:translate(3px,-3px)}

/* ==================================================================== hero */
.section{position:relative}
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);color:#fff}
#hero-title{font-size:clamp(34px,5.4vw,86px);font-weight:500;line-height:1.02;
  letter-spacing:-.025em;max-width:20ch;opacity:0;transition:opacity .8s var(--ease) .2s}
body.ready #hero-title{opacity:1}
/* Keep the white hero components legible when a pale file card in the WebGL
   scene drifts behind them (they used to read as white-on-white / low contrast).
   The wide, soft, low-opacity dark halo is invisible on the dark hero yet
   darkens any bright card behind the glyphs, so contrast never collapses. */
#hero-title{text-shadow:0 1px 2px rgba(0,0,0,.34),0 6px 46px rgba(0,0,0,.58)}
#hero-scroll{text-shadow:0 1px 3px rgba(0,0,0,.4),0 2px 18px rgba(0,0,0,.55)}
#hero-crosses .cross{filter:drop-shadow(0 1px 6px rgba(0,0,0,.55))}
#hero-title.split-chars{opacity:1;transition:none}
#hero-crosses{position:absolute;inset:0;pointer-events:none;color:#fff}
#hero-crosses .cross{position:absolute;width:16px;height:16px;opacity:.5}
#hero-crosses .cross:nth-child(1){left:8%;top:24%}
#hero-crosses .cross:nth-child(2){right:12%;top:32%}
#hero-crosses .cross:nth-child(3){left:16%;bottom:26%}
#hero-crosses .cross:nth-child(4){right:20%;bottom:34%}
#hero-scroll{position:absolute;left:var(--pad);bottom:30px;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
#hero-scroll .line{width:44px;height:1px;background:currentColor;transform-origin:left;
  animation:scrollline 2.4s var(--ease) infinite}
@keyframes scrollline{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

/* light editorial band that covers the canvas after the hero */
.light{background:var(--off-white);color:var(--ink)}
.dark{background:var(--bg);color:#fff}

/* ---------------------------------------------------------------- reel band */
#reel{padding:clamp(80px,12vh,180px) var(--pad) 0;position:relative}
#reel-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;color:var(--blue)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
#reel-lead{max-width:34ch;margin-top:26px}
#reel-desc{font-size:clamp(19px,1.9vw,30px);font-weight:400;line-height:1.32;letter-spacing:-.01em;max-width:26ch}
#reel-cta{margin-top:30px;display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(17,19,24,.25);border-radius:100px;padding:14px 26px;font-size:15px;transition:.3s var(--ease)}
#reel-cta .dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
#reel-cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* pinned scale-to-fullscreen stage (JS drives frame width/height/radius by scroll) */
#reel-stage{position:relative;height:220vh;margin:9vh calc(-1 * var(--pad)) 0;z-index:1;overflow:hidden}
#reel-panel{position:absolute;top:0;left:0;width:100%;height:100vh;
  display:grid;place-items:center;will-change:transform}
#reel-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#reel-src{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
/* contained video frame: NO border line — corner crosses do the framing; sized to the video (JS) */
#reel-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
/* clip layer: words + edge marquee are clipped to the video rectangle */
#reel-frame-clip{position:absolute;inset:0;overflow:hidden;border-radius:8px}
/* big PLAY / REEL words, now INSIDE the video (clipped), on top of the footage */
#reel-words{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:2vw;pointer-events:none;color:#fff;opacity:0;font-weight:600;line-height:1;letter-spacing:-.02em;
  font-size:clamp(40px,9vw,140px);will-change:opacity,transform}
#reel-words .rw{display:block;will-change:transform}
/* the + crosses, sitting just OUTSIDE the video edges on the page ground */
#reel-deco{position:absolute;inset:-34px 0;pointer-events:none}
.reel-deco-row{position:absolute;left:0;right:0;display:flex;justify-content:space-between}
.rdr-top{top:0}.rdr-bot{bottom:0}
.reel-cross{position:relative;width:17.77px;height:17.77px;color:#12121a;opacity:.85;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reel-cross::before,.reel-cross::after{content:"";position:absolute;top:50%;left:50%;background:currentColor}
.reel-cross::before{width:17.77px;height:2.22px;transform:translate(-50%,-50%)}
.reel-cross::after{width:2.22px;height:17.77px;transform:translate(-50%,-50%)}
#reel-panel.is-hover .reel-cross{opacity:0;transform:rotate(45deg) scale(.7)}
/* "PLAY REEL" marquee that runs along the video's top + bottom edges on play-button hover */
.reel-mq{position:absolute;left:0;width:100%;height:22px;overflow:hidden;pointer-events:none;
  z-index:4;display:flex;align-items:center;opacity:0;transition:opacity .45s var(--ease)}
.reel-mq-top{top:0}
.reel-mq-bot{bottom:0}
.reel-mq-track{display:flex;flex:none;white-space:nowrap;will-change:transform;
  animation:reelmq 16s linear infinite}
.reel-mq-bot .reel-mq-track{animation-direction:reverse}
.reel-mq-track span{display:block;flex:none;padding:0 .5em;color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase}
@keyframes reelmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#reel-panel.is-hover .reel-mq{opacity:.92}
/* while the video is PLAYING the chrome gets out of the way (words hidden by JS too) */
#reel-panel.is-playing .reel-mq{opacity:0}
/* playback controls along the framed video's bottom edge (sound session only):
   PAUSE / scrubber / MUTE, labels always naming the ACTION AVAILABLE */
#reel-controls{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;
  gap:20px;padding:18px 24px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),visibility 0s linear .4s;
  background:linear-gradient(0deg,rgba(7,8,12,.55),transparent)}
#reel-controls.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--ease)}
/* keyboard backstop: a focused control keeps its bar visible even if the peek expires */
#reel-controls:focus-within{opacity:1;visibility:visible;pointer-events:auto}
#reel-controls button{background:none;border:0;cursor:pointer;padding:6px 2px;color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  opacity:.85;transition:opacity .25s}
#reel-controls button:hover{opacity:1}
#reel-ctl-track{position:relative;flex:1;height:16px;display:flex;align-items:center;cursor:pointer}
#reel-ctl-rail{position:relative;width:100%;height:2px;background:rgba(255,255,255,.28)}
#reel-ctl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff}
#reel-overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:3;
  pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s linear .45s}
#reel-overlay.show{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
/* keyboard backstop: a focused watch button keeps its overlay visible while the
   motion-driven stop-button fade would otherwise hide it */
#reel-overlay:focus-within{opacity:1;visibility:visible}
/* cursor-chasing wrapper: the overlay grid centres it, JS eases it after the pointer
   with frame-rate-independent damping (the reference reel's damp() smoothing) */
#reel-follow{will-change:transform}
#reel-watch{pointer-events:none;width:clamp(78px,9vw,120px);height:clamp(78px,9vw,120px);
  border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;
  transition:transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease)}
#reel-overlay.show #reel-watch{pointer-events:auto}
#reel-watch svg{width:26px;height:26px;grid-area:1/1;transition:opacity .3s var(--ease),transform .4s var(--ease)}
#reel-watch .ic-play{margin-left:4px}
/* play triangle morphs to a rotating x while a sound session runs (the + -> x trick) */
#reel-watch .ic-stop{opacity:0;transform:rotate(-45deg) scale(.6)}
#reel-watch.is-playing .ic-play{opacity:0;transform:scale(.6)}
#reel-watch.is-playing .ic-stop{opacity:1;transform:rotate(0deg) scale(1)}
/* the chase means :hover = "the button caught the cursor" -> blue + grow */
#reel-watch:hover{transform:scale(1.08);background:var(--blue);color:#fff}

/* the scroll-drawn "ribbon" lines (SVG stand-in for the WebGL line) */
.ribbon{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
.ribbon-path{fill:none;stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
#reel .ribbon-path{stroke:var(--blue)}
#goal .ribbon-path{stroke:var(--blue)}

@keyframes marq{to{transform:translateX(-50%)}}

/* -------------------------------------------------------------- featured work */
#featured{padding:clamp(70px,10vh,150px) var(--pad) clamp(90px,12vh,180px)}
#featured-inner{max-width:var(--maxw);margin:0 auto}
#featured-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;
  margin-bottom:40px}
#featured-title{font-size:clamp(30px,4vw,64px)}
#featured-disclaimer{max-width:36ch;font-size:16px;line-height:1.4;opacity:.7}
.project-list{border-top:1px solid rgba(17,19,24,.16)}
.project-item{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.4vw,34px) 4px;border-bottom:1px solid rgba(17,19,24,.16);
  position:relative;transition:padding .4s var(--ease)}
.project-item .p-name{font-size:clamp(26px,3.6vw,58px);font-weight:500;letter-spacing:-.02em;
  display:flex;align-items:center;gap:18px;transition:transform .4s var(--ease),color .4s}
.project-item .p-num{font-family:var(--mono);font-size:13px;opacity:.5;width:2ch}
.project-item .p-tags{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  opacity:.65;text-align:right;max-width:40ch}
.project-item .p-arrow{opacity:0;transform:translateX(-8px);transition:.4s var(--ease)}
@media (hover:hover){
  .project-item:hover{padding-left:22px;padding-right:22px}
  .project-item:hover .p-name{transform:translateX(6px)}
  .project-item:hover .p-arrow{opacity:1;transform:none}
}
@media (max-width:760px){.project-item{flex-direction:column;align-items:flex-start;gap:8px}
  .project-item .p-tags{text-align:left}}
/* floating cursor preview */
#featured-preview{position:fixed;top:0;left:0;z-index:60;width:clamp(240px,26vw,380px);
  aspect-ratio:4/3;border-radius:14px;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .35s var(--ease),transform .5s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
#featured-preview.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* registry (Tools list): anchored top-left beside the cursor, never centred over
   the row — so the preview can't overlap the list it is previewing. */
#featured-preview.fp-side{width:clamp(210px,20vw,300px);transform:scale(.9);transform-origin:left center}
#featured-preview.fp-side.show{transform:scale(1)}
#featured-preview img{width:100%;height:100%;object-fit:cover;object-position:top left}
/* a real capture underneath: the name drops to a scrimmed bottom-left caption */
#featured-preview.has-shot .fp-label{align-items:flex-end;justify-content:flex-start;padding:14px 16px;
  font-size:15px;letter-spacing:.01em;text-align:left;
  background:linear-gradient(to top,rgba(5,6,10,.78),transparent 44%);border-radius:inherit}
/* the tool's own loading animation as the hover preview (AtlasLoadAnims compact mount) */
#featured-preview .fp-anim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:6% 8%}
#featured-preview.has-anim .fp-label{align-items:flex-end;justify-content:flex-start;padding:12px 16px;
  font-size:14px;letter-spacing:.01em;text-align:left;
  background:linear-gradient(to top,rgba(5,6,10,.72),transparent 40%);border-radius:inherit}
/* branded gradient preview card (replaces recycled case-study photos) */
.fp-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 9%;
  text-align:center;color:#fff;font-weight:500;font-size:clamp(18px,2vw,27px);letter-spacing:-.01em;
  line-height:1.1;text-shadow:0 2px 22px rgba(0,0,0,.45)}
/* toolkit rows light their own colour + name goes blue on hover */
.project-item.reveal{transition:opacity 1s var(--ease),transform 1.15s var(--ease),filter 1s var(--ease),
  padding .4s var(--ease),background-color .35s var(--ease)}
@media (hover:hover){
  .project-item:hover{background-color:rgba(26,47,251,.05)}
  .project-item:hover{background-color:color-mix(in srgb,var(--row-bg,#1a2ffb) 12%,transparent)}
  .project-item:hover .p-name,.project-item:hover .p-num{color:var(--blue)}
}
/* keyboard focus ring everywhere (a11y) */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
#featured-cta{margin-top:52px;display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(17,19,24,.25);border-radius:100px;padding:15px 28px;font-size:15px;transition:.3s var(--ease)}
#featured-cta .dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
#featured-cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* -------------------------------------------------------------------- goal */
#goal{padding:clamp(90px,16vh,240px) var(--pad);overflow:hidden;position:relative}
#goal-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
#goal-title{font-size:clamp(30px,4.4vw,72px);max-width:16ch;margin-bottom:40px}
#goal-texts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);max-width:1100px}
@media (max-width:820px){#goal-texts{grid-template-columns:1fr}}
#goal-texts p{font-size:clamp(16px,1.5vw,22px);line-height:1.45;opacity:.82}
#goal-tunnel{margin-top:clamp(80px,16vh,220px);text-align:center}
#goal-tunnel .line{display:block;font-size:clamp(38px,9vw,150px);font-weight:500;line-height:.98;
  letter-spacing:-.03em}
#goal-tunnel .line:nth-child(2){color:var(--blue)}

/* ------------------------------------------------------------------ end cta */
#end{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(80px,14vh,200px) var(--pad) 0;text-align:center;position:relative;overflow:hidden}
#end:not(.end--video) #end-sub{font-family:var(--mono);font-size:clamp(12px,1.4vw,16px);letter-spacing:.12em;text-transform:uppercase;
  opacity:.7;margin-bottom:26px}
#end-title{font-size:clamp(48px,12vw,190px);font-weight:500;line-height:.94;letter-spacing:-.03em}
#end-title b{font-weight:500;color:var(--blue)}
#end-bottom{margin-top:auto;width:100%;display:flex;align-items:center;gap:20px;
  padding:26px var(--pad);overflow:hidden}
.end-arrows{display:flex;gap:2px;flex:0 0 auto}
.end-arrows svg{width:16px;height:16px;opacity:.6}
#end-marquee{flex:1;overflow:hidden;white-space:nowrap;font-family:var(--mono);
  font-size:clamp(13px,1.4vw,16px);letter-spacing:.16em;text-transform:uppercase}
#end-marquee .run{display:inline-block;animation:marq 20s linear infinite}
#end-marquee .run span{padding:0 34px}

/* ---- index-only: video-through-"Atlas" scroll-reveal finale (initEndReveal) ---- */
#end.end--video{display:block;min-height:0;padding:0;overflow:visible;text-align:left}
#end-stage{position:relative;height:300vh}
#end-pin{position:absolute;top:0;left:0;width:100%;height:100svh;overflow:hidden;
  background:#0d0d10;will-change:transform;transform:translateZ(0)}
#end-video,#end-video-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#0d0d10;will-change:opacity}
#end-video-b{opacity:0}
#end-mask{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;will-change:opacity}
#end-atlas-text{font-family:var(--font);font-weight:500;font-size:300px;letter-spacing:-.03em}
#end-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(125% 95% at 50% 58%,transparent 42%,rgba(6,6,10,.6) 100%)}
#end-topline{position:absolute;top:9vh;left:0;right:0;z-index:3;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:clamp(12px,1.4vw,16px);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;opacity:.85;will-change:opacity}
/* left-half dim so the panel reads over the video (JS ramps opacity with the zoom) */
#end-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(7,8,12,.82) 0%,rgba(7,8,12,.52) 34%,transparent 62%)}
/* left info panel: kicker / headline / sub / buttons / note rise line-by-line */
#end-reveal{position:absolute;left:calc(var(--pad) + 1vw);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;text-align:left;
  max-width:min(560px,46vw);pointer-events:none}
#end.end--video.is-revealed #end-reveal{pointer-events:auto}
/* --- finale entrance system (DEVELOPED IN LIGHT) --- */
.er-line{opacity:0;transform:translateY(30px);
  transition:opacity .7s var(--ease),transform .95s var(--ease)}
#end.end--video.is-revealed .er-line{opacity:1;transform:none}
#end.end--video.is-revealed .er-line:nth-child(4){transition-delay:.62s}   /* buttons row */
/* exit: reverse order, fast and dry (fixes the FIFO un-reveal) */
#end.end--video:not(.is-revealed) .er-line{transition:opacity .3s var(--ease),transform .4s var(--ease)}
#end.end--video:not(.is-revealed) .er-line:nth-child(5){transition-delay:0s}
#end.end--video:not(.is-revealed) .er-line:nth-child(4){transition-delay:.05s}
#end.end--video:not(.is-revealed) .er-line:nth-child(2){transition-delay:.15s}
#end.end--video:not(.is-revealed) .er-line:nth-child(1){transition-delay:.2s}

/* kicker: per-char tracking-in from spread, rack focus */
#end-kicker .ac{transform:translateX(var(--kx,0)) translateY(.4em);opacity:0;filter:blur(4px);
  transition:transform .6s var(--ease),opacity .45s var(--ease),filter .6s var(--ease)}
#end.end--video.is-revealed #end-kicker .ac{transform:none;opacity:1;filter:blur(0)}
#end.end--video:not(.is-revealed) #end-kicker .ac{transition-delay:0s!important;transition-duration:.25s}

/* head: word masks land hot, cool to crisp */
#end-head.er-split .split-word-inner{transform:translateY(112%) rotate(3deg);
  filter:blur(8px) brightness(1.75);
  transition:transform .7s var(--ease),filter .9s var(--ease)}
#end.end--video.is-revealed #end-head .split-word-inner{transform:none;filter:blur(0) brightness(1)}
#end.end--video:not(.is-revealed) #end-head .split-word-inner{transition-delay:0s!important;transition-duration:.3s}

/* sub: light wipe (delays live here; two-id specificity beats the nth-child rules) */
#end.end--video #end-sub{clip-path:inset(0 100% 0 0);
  transition:opacity .7s var(--ease) .42s,transform .95s var(--ease) .42s,
    clip-path .75s cubic-bezier(.3,.6,.2,1) .48s}
#end.end--video.is-revealed #end-sub{clip-path:inset(0 -2% 0 0)}
#end.end--video:not(.is-revealed) #end-sub{transition-delay:.1s;clip-path:inset(0 100% 0 0)}

/* pills: rounded unwipe + spring settle; :not(.er-settled) releases hover after entrance */
#end.end--video:not(.er-settled) #end-reveal-buttons .dl-btn{clip-path:inset(0 100% 0 0 round 999px);
  transform:translateY(16px) scale(.97);opacity:0;
  transition:clip-path .55s cubic-bezier(.3,.6,.2,1),transform .55s cubic-bezier(.34,1.56,.64,1),opacity .3s var(--ease)}
#end.end--video.is-revealed:not(.er-settled) #end-reveal-buttons .dl-btn{
  clip-path:inset(0 0 0 0 round 999px);transform:none;opacity:1;transition-delay:.62s}
#end.end--video.is-revealed:not(.er-settled) #end-reveal-buttons .dl-btn--alt{transition-delay:.74s}
#end.end--video:not(.is-revealed) #end-reveal-buttons .dl-btn{transition-delay:.05s}

/* note: fade only, delayed last in, first out */
#end.end--video #end-reveal-note{transform:none;transition:opacity .6s var(--ease)}
#end.end--video.is-revealed #end-reveal-note{transition-delay:.85s}
#end-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
#end-head{font-size:clamp(32px,4.2vw,62px);font-weight:500;line-height:1.02;letter-spacing:-.02em;color:#fff}
#end-sub{font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:rgba(255,255,255,.82);max-width:46ch}
#end-reveal-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start}
@media (max-width:760px){#end-reveal{left:var(--pad);max-width:calc(100% - 2 * var(--pad))}}
/* ------------------------------------------------- download pills (PART C)
   Tokened, on-brand, with real depth. Transform stays owned by the magnet
   (endfx.css) after settle; the icon nudge/pop rides the INDIVIDUAL translate/
   scale props so it COMPOSES with the magnet's transform instead of fighting it.
   Box-shadow is the glow layer (::before + ::after are taken by endfx/dlfx). */
.dl-btn{display:inline-flex;align-items:center;gap:11px;padding:var(--dl-pad);border-radius:var(--dl-radius);
  background:var(--dl-bg);color:#fff;font-weight:500;font-size:clamp(15px,1.5vw,18px);white-space:nowrap;
  box-shadow:var(--dl-shadow);
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.dl-btn svg{width:20px;height:20px;flex:0 0 auto;
  transition:translate .24s var(--ease),scale .18s var(--ease)}
.dl-btn:hover{transform:translateY(-2px) scale(1.02);background:var(--dl-bg-hover);box-shadow:var(--dl-shadow-hover)}
.dl-btn:active{transform:translateY(0) scale(.98)}
.dl-btn:active svg{scale:.9}
/* icon nudge on hover — individual translate composes with the magnet transform */
@media (hover:hover) and (pointer:fine){
  .dl-btn:hover svg{translate:var(--dl-icon-drift) 0}
}
/* icon settle/pop as the pill lands (entrance window only; magnet owns svg after settle) */
#end.end--video.is-revealed:not(.er-settled) #end-reveal-buttons .dl-btn svg{
  animation:dl-icon-pop .5s cubic-bezier(.34,1.56,.64,1) .66s both}
#end.end--video.is-revealed:not(.er-settled) #end-reveal-buttons .dl-btn--alt svg{animation-delay:.78s}
@keyframes dl-icon-pop{0%{scale:.35;opacity:0}55%{scale:1.16;opacity:1}100%{scale:1;opacity:1}}
/* alt (Mac) — brushed graphite/steel (>= endfx.css's faux-glass specificity, no backdrop-filter) */
.dl-btn--alt{background:var(--dl-alt-bg);border:1px solid rgba(200,212,240,.22);
  box-shadow:var(--dl-alt-shadow);color:#eef1fb}
#end.end--video #end-reveal-buttons .dl-btn--alt{background:var(--dl-alt-bg);
  border:1px solid rgba(200,212,240,.22);box-shadow:var(--dl-alt-shadow);color:#eef1fb}
#end.end--video #end-reveal-buttons .dl-btn--alt:hover{background:var(--dl-alt-bg-hover);
  box-shadow:var(--dl-alt-shadow-hover);border-color:rgba(214,224,250,.36)}
/* keep box-shadow transitions smooth even when the magnet owns the transform track
   (>(2,4,0) so it wins over endfx.css's transition:background-only rule; NO transform
   in the list — the magnet drives transform per-frame via rAF) */
#end.end--video.endfx-magnet.er-settled.is-revealed #end-reveal-buttons .dl-btn{
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
/* glow ESCALATION — the cat's loop-2 cue toggles #end.dlx-cue2; (2,5,0) so it wins
   over endfx.css dlfx-halo and dlfx.css dlx-breathe (both (2,4,0)) on BOTH pills */
#end.end--video.is-revealed.er-settled.dlx-cue2 #end-reveal-buttons .dl-btn{
  animation:dl-cue-glow 1.8s ease-in-out infinite}
@keyframes dl-cue-glow{
  0%,100%{box-shadow:0 12px 32px rgba(var(--dl-glow-rgb),.42),0 0 0 0 rgba(var(--dl-glow-rgb),.34),inset 0 1px 0 rgba(255,255,255,.28)}
  50%{box-shadow:0 16px 44px rgba(var(--dl-glow-rgb),.64),0 0 24px 5px rgba(var(--dl-glow-rgb),.5),inset 0 1px 0 rgba(255,255,255,.34)}
}
/* reduced motion: no icon pop, no pulse — a strong STATIC glow stands in for cue2 */
@media (prefers-reduced-motion:reduce){
  #end.end--video.is-revealed:not(.er-settled) #end-reveal-buttons .dl-btn svg{animation:none!important}
  .dl-btn svg{transition:none}
  #end.end--video.is-revealed.er-settled.dlx-cue2 #end-reveal-buttons .dl-btn{
    animation:none!important;box-shadow:0 12px 34px rgba(var(--dl-glow-rgb),.52)!important}
}
/* tier2/tier3: drop the glow/transform to cheap/none — static shadow, no icon motion */
:is(html[data-perf="2"],html[data-perf="3"]) #end.end--video.dlx-cue2 #end-reveal-buttons .dl-btn{
  animation:none!important;box-shadow:0 8px 22px rgba(var(--dl-glow-rgb),.42)!important}
:is(html[data-perf="2"],html[data-perf="3"]) #end.end--video #end-reveal-buttons .dl-btn svg{
  animation:none!important;translate:none!important;scale:none!important}
#end-reveal-note{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
#end-sound{position:absolute;right:var(--pad);bottom:var(--pad);z-index:4;width:46px;height:46px;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
#end-sound:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
#end-sound svg{width:20px;height:20px}
#end-sound .snd-wave{opacity:0}
#end-sound[aria-pressed="true"] .snd-wave{opacity:1}
#end-sound[aria-pressed="true"] .snd-x{opacity:0}
#end.end--video.is-revealed #end-sound{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){#end-stage{height:100svh}}

/* ---------------------------------------------------------------- footer */
#footer{background:var(--black);color:#fff;padding:clamp(60px,9vh,120px) var(--pad) 40px}
#footer-inner{max-width:var(--maxw);margin:0 auto}
#footer-middle{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;
  padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.14)}
@media (max-width:900px){#footer-middle{grid-template-columns:1fr 1fr}}
@media (max-width:560px){#footer-middle{grid-template-columns:1fr}}
.footer-address{font-size:clamp(20px,2.2vw,32px);line-height:1.18;font-weight:500;letter-spacing:-.01em}
.footer-address:hover{color:var(--blue)}
.footer-col h5{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.5;margin-bottom:12px;font-weight:400}
.footer-socials a,.footer-links a{display:block;font-size:17px;padding:3px 0;opacity:.85;transition:opacity .25s,color .25s}
.footer-socials a:hover,.footer-links a:hover{opacity:1;color:var(--blue)}
.footer-links a{font-size:19px}
/* honest footer bits: no fake socials, and the bottom line tells the truth */
.footer-socials .ftr-none{display:block;font-size:15px;line-height:1.5;opacity:.55;max-width:230px;padding:3px 0 6px}
#footer-bottom .ftr-pun{opacity:.5;font-size:13px;letter-spacing:.02em}
#footer-newsletter h5{margin-bottom:16px}
#footer-newsletter .nl-input{background:rgba(255,255,255,.1)}
#footer-newsletter .nl-input button{background:var(--blue);color:#fff}
#footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  padding-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;opacity:.6}
#footer-bottom a:hover{opacity:1;color:var(--blue)}

/* --------------------------------------------------------------- scroll-nav */
#scroll-nav{background:var(--bg);color:#fff;padding:clamp(60px,10vh,140px) var(--pad);text-align:center}
#scroll-nav-sub{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;margin-bottom:24px;line-height:1.6}
#scroll-nav-main a{font-size:clamp(44px,10vw,150px);font-weight:500;letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:24px;transition:color .3s}
#scroll-nav-main a:hover{color:var(--blue)}
#scroll-nav-next{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  margin-top:24px;opacity:.6}

/* ------------------------------------------------------- scroll progress bar */
#scroll-indicator{position:fixed;top:0;left:0;width:100%;height:2px;z-index:9500;pointer-events:none}
#scroll-indicator-bar{height:100%;width:0;background:var(--blue);transform-origin:left}

/* --------------------------------------------------------------- video overlay */
#video-overlay{position:fixed;inset:0;z-index:9700;background:rgba(8,8,10,.94);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
#video-overlay.open{opacity:1;visibility:visible}
#video-overlay video{width:min(92vw,1200px);aspect-ratio:16/9;background:#000;border-radius:8px}
#video-overlay-controls{display:flex;align-items:center;gap:18px;width:min(92vw,1200px)}
#video-overlay-controls button{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
#vo-progress{flex:1;height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
#vo-progress-active{height:100%;width:0;background:#fff}
#video-close{position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase}

/* -------------------------------------------------------------------- loader */
#preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad);
  transition:transform 1s var(--ease);will-change:transform}
#preloader.done{transform:translateY(-100%);pointer-events:none}
#preloader.gone{display:none}
#preloader-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
#preloader-percent{display:flex;align-items:flex-end;font-weight:500;line-height:.8;
  font-size:clamp(80px,20vw,300px);letter-spacing:-.04em}
.pdigit{position:relative;height:1em;overflow:hidden;width:.62ch}
.pdigit-col{display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.pdigit-col span{height:1em;display:block}

/* ---------------------------------------------- split-text line/word reveal */
.split-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split-word-inner{display:inline-block;transform:translateY(116%);transition:transform .95s var(--ease)}
.split.in .split-word-inner{transform:translateY(0)}
.ac{display:inline-block}
.ac-in{display:inline-block}

/* ------------------- hero title: scanline char cascade (SCANLINE HANDOFF) */
#hero-title.split-chars .split-word{padding-top:.12em;margin-top:-.12em;
  filter:blur(calc(var(--p,0) * 2.5px))}
#hero-title .ac{
  transform:translateY(calc(clamp(0,(var(--p,0) - var(--st,0)) * 3.2,1) * -1.3em));
  opacity:calc(1 - clamp(0,(var(--p,0) - var(--st,0)) * 3.2,1) * .85)}
#hero-title .ac-in{transform-origin:50% 100%;will-change:transform,filter;
  transform:perspective(520px) translateY(122%) rotateX(-56deg);
  filter:blur(8px) brightness(1.8);
  transition:transform .85s cubic-bezier(.18,1.22,.3,1),filter .6s cubic-bezier(.33,1,.68,1)}
#hero-title.chars-in .ac-in{transform:perspective(520px) translateY(0) rotateX(0);filter:blur(0) brightness(1)}
#hero-title.settled .ac-in{will-change:auto;transition:none;filter:none}
/* odometer land pulse */
#preloader-percent{transition:transform .26s cubic-bezier(.34,1.56,.64,1);transform-origin:right bottom}
#preloader-percent.land{transform:scale(1.035)}

/* ------------------------------ goal tunnel corridor (JS gates .tunnel-on) */
#goal-tunnel.tunnel-on{perspective:900px;perspective-origin:50% 30%}
#goal-tunnel.tunnel-on .line{opacity:0}
.tunnel-line .split-word{perspective:340px}
.tunnel-line .split-word-inner{transform:translateY(118%) rotateX(-35deg);filter:blur(6px);
  transition:transform .9s var(--ease),filter .7s var(--ease)}
.tunnel-line.in .split-word-inner{transform:translateY(0) rotateX(0);filter:blur(0)}
#goal-tunnel.tunnel-on .l2{display:inline-block;position:relative;
  clip-path:inset(-.1em calc((1 - var(--wipe,0)) * 100%) -.1em 0)}
#goal-tunnel.tunnel-on .l2::after{content:"";position:absolute;top:-.04em;bottom:-.04em;
  left:-2px;width:2px;background:var(--blue);
  box-shadow:0 0 14px 2px rgba(26,47,251,.5);
  opacity:var(--beamo,0);transform:translateX(calc(var(--wipe,0) * var(--l2w,100vw)))}

/* rolling-text hover (nav links): clone sits one line-height below, both rise */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;
  transition:transform .45s var(--ease);transform-origin:left center;will-change:transform}
.roll-in{display:block;transition:transform .55s var(--ease)}
.roll .clone{position:absolute;left:0;top:0;transform:translateY(100%)}
/* original label rolls up and out; clone rolls up INTO view from below; whole label grows slightly */
.menu-link:hover .roll-in{transform:translateY(-100%)}
.menu-link:hover .roll .clone{transform:translateY(0)}
.menu-link:hover .roll{transform:scale(1.06)}

/* ------------------------------------------------------------- reveal helper */
.reveal{opacity:0;transform:translateY(46px);filter:blur(7px);
  transition:opacity 1s var(--ease),transform 1.15s var(--ease),filter 1s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal-2{transition-delay:.1s}
.reveal-3{transition-delay:.2s}
/* big headings rise from behind a mask, one line-block at a time */
#goal-tunnel .line,#end-title,#hero-title,#about-hero h1,#proj-hero h1,#reel-title,#goal-title,#featured-title{will-change:transform,filter}

/* ==================================================== about / projects pages */
/* about hero — big kinetic statement over the canvas */
#about-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
#about-hero .eyebrow{color:#fff;opacity:.7;margin-bottom:28px}
#about-hero .eyebrow .dot{background:#fff}
#about-hero h1{font-size:clamp(40px,9.4vw,168px);font-weight:500;line-height:.96;letter-spacing:-.03em}
#about-hero h1 .b{color:var(--blue)}
#about-intro{padding:clamp(70px,12vh,170px) var(--pad);background:var(--off-white);color:var(--ink)}
#about-intro p{max-width:20ch;font-size:clamp(26px,3.6vw,58px);font-weight:500;line-height:1.08;letter-spacing:-.02em;margin:0 auto;text-align:center}
/* quote */
#about-quote{background:var(--off-white);color:var(--ink);padding:clamp(40px,8vh,120px) var(--pad) clamp(80px,14vh,200px)}
#about-quote-inner{max-width:1100px;margin:0 auto}
#about-quote .idx{font-family:var(--mono);font-size:13px;letter-spacing:.1em;opacity:.5;margin-bottom:30px}
#about-quote blockquote{font-size:clamp(22px,2.6vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.015em;margin-bottom:34px}
#about-quote .by{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
#about-quote .by b{color:var(--ink);opacity:1}
/* brands marquee */
#brands{background:var(--off-white);color:var(--ink);padding:clamp(50px,8vh,120px) 0;border-top:1px solid rgba(17,19,24,.12);overflow:hidden}
#brands h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;opacity:.55;margin-bottom:8px}
#brands .sub{text-align:center;font-size:15px;opacity:.7;margin-bottom:42px}
.brand-row{display:flex;gap:64px;width:max-content;align-items:center;animation:marq 34s linear infinite}
.brand-row img{height:26px;width:auto;opacity:.7;filter:grayscale(1)}
/* awards + talks + articles */
#awards{background:var(--bg);color:#fff;padding:clamp(70px,12vh,170px) var(--pad)}
#awards-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr;gap:clamp(30px,5vw,90px)}
@media (max-width:900px){#awards-inner{grid-template-columns:1fr}}
.awards-h{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:20px}
.aside-block{margin-bottom:40px}
.aside-block a{display:block;padding:8px 0;font-size:15px;opacity:.8;border-bottom:1px solid rgba(255,255,255,.08)}
.aside-block a:hover{opacity:1;color:var(--blue)}
.talk-line{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;display:flex;justify-content:space-between;gap:10px}
.talk-line span:last-child{font-family:var(--mono);font-size:12px;opacity:.55}
/* expertise */
#expertise{background:var(--off-white);color:var(--ink);padding:clamp(70px,12vh,170px) var(--pad)}
#expertise-inner{max-width:var(--maxw);margin:0 auto}
#expertise h2{font-size:clamp(30px,4.4vw,72px);max-width:12ch;margin-bottom:16px}
#expertise .sub{max-width:44ch;font-size:17px;opacity:.7;margin-bottom:50px}
.exp-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
@media (max-width:900px){.exp-cols{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.exp-cols{grid-template-columns:1fr}}
.exp-col h5{font-size:22px;font-weight:500;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(17,19,24,.2)}
.exp-col li{list-style:none;padding:7px 0;font-size:15px;opacity:.78}
/* projects index */
#proj-hero{min-height:60svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) 40px}
#proj-hero h1{font-size:clamp(56px,15vw,240px);font-weight:500;letter-spacing:-.03em;line-height:.9}
#proj-hero .count{font-family:var(--mono);font-size:14px;opacity:.6;margin-bottom:20px}
#proj-list-section{background:var(--off-white);color:var(--ink);padding:clamp(40px,7vh,90px) var(--pad) clamp(80px,12vh,170px)}
#proj-list-section .project-list{max-width:var(--maxw);margin:0 auto}

@media (prefers-reduced-motion: no-preference){
/* --- scanline cascade: big section headings --- */
.split-cine{position:relative}
.split-cine .split-word{perspective:340px}
.split-cine .split-word-inner{transform:translateY(112%) rotateX(-55deg);transform-origin:50% 100%;
  filter:blur(6px);transition:transform .9s var(--ease),filter .7s var(--ease)}
.split-cine.in .split-word-inner{transform:translateY(0) rotateX(0);filter:blur(0)}
.split-cine::after{content:"";position:absolute;left:0;top:-6%;height:112%;width:2px;
  background:var(--blue);opacity:0;pointer-events:none}
.split-cine.in::after{animation:beamsweep var(--beam-t,.55s) linear forwards}
@keyframes beamsweep{0%{opacity:.9;transform:translateX(0)}85%{opacity:.9}
  100%{opacity:0;transform:translateX(var(--beam-x,60vw))}}
/* --- quiet voice: the pitch paragraph --- */
.split-para .split-word-inner{transform:translateY(58%);opacity:0;filter:blur(4px);
  transition:transform .7s var(--ease),opacity .5s linear,filter .6s var(--ease)}
.split-para.in .split-word-inner{transform:none;opacity:1;filter:blur(0)}
/* --- eyebrow: clip wipe + focus pull + dot pop (ping ring cut) --- */
.eyebrow.reveal{opacity:1;transform:none;filter:blur(5px);
  clip-path:inset(-60% 101% -60% -8%);
  transition:clip-path .85s var(--ease),filter .8s var(--ease) .1s}
.eyebrow.reveal.in{filter:blur(0);clip-path:inset(-60% -8% -60% -8%)}
.eyebrow .dot{transform:scale(.2);transition:transform .55s cubic-bezier(.34,1.56,.64,1) .05s}
.eyebrow.reveal.in .dot{transform:scale(1)}
}

/* ---------------- toolkit SCAN LEDGER rows (.ti built by initToolkitRows) */
.project-item.ti{border-bottom-color:transparent;
  transition:padding .4s var(--ease),background-color .35s var(--ease)}
.ti::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:rgba(17,19,24,.16);transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--ease);transition-delay:var(--ti-d,0ms)}
.ti.in::after{transform:scaleX(1)}
.ti-num{display:inline-block;overflow:hidden;vertical-align:top}
.ti-num-in{display:inline-block;transform:translateY(110%);filter:blur(4px);
  transition:transform .55s var(--ease),filter .45s var(--ease);
  transition-delay:calc(var(--ti-d,0ms) + .08s)}
.ti.in .ti-num-in{transform:translateY(0);filter:blur(0)}
.ti-lift{display:inline-block;position:relative;transform-origin:50% 100%;
  transform:perspective(520px) translateY(115%) rotateX(-35deg);
  transition:transform .9s var(--ease)}          /* delay set inline by JS */
.ti.in .ti-lift{transform:perspective(520px) translateY(0) rotateX(0deg)}
.ti-a{display:block;transition:transform .38s var(--ease)}
.ti-b{display:block;position:absolute;left:0;top:0;transform:translateY(110%);
  color:var(--blue);transition:transform .38s var(--ease)}
.ti .p-tags{clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(14px);filter:blur(3px);
  transition:clip-path .7s var(--ease),opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease);
  transition-delay:calc(var(--ti-d,0ms) + .34s)}
.ti.in .p-tags{clip-path:inset(0 -1% 0 0);opacity:.65;transform:none;filter:blur(0)}
.ti.settled .p-tags{transition:opacity .35s var(--ease),transform .35s var(--ease);transition-delay:0s}
@media (hover:hover){
  .project-item.ti:hover .p-name{color:inherit}   /* the roll IS the colour now; .p-num keeps its blue flip */
  .ti:hover .ti-a{transform:translateY(-110%)}
  .ti:hover .ti-b{transform:translateY(0)}
  .ti.settled:hover .p-tags{opacity:1;transform:translateX(-4px)}
}

/* ---- telemetry micro-language ---- */
.tl-txt{display:inline-block;white-space:pre}
#hero-scroll .tl-txt{min-width:17ch}          /* locks the box: decode can never shift the flex row */
.tl-caret{display:inline-block;width:.6ch;height:.95em;margin-left:.45ch;background:currentColor;
  vertical-align:text-bottom;animation:tl-blink 1.06s steps(1,end) infinite}
@keyframes tl-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
#preloader-label{display:flex;align-items:center}
/* menu terminal indexes */
.menu-link{justify-content:flex-start}
.menu-link .arw{margin-left:auto}
.tl-idx{position:relative;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--blue);width:3ch;flex:0 0 auto;opacity:.55;transition:opacity .3s var(--ease)}
.menu-link:hover .tl-idx{opacity:1}
/* cursor press feedback (claims the dead #cursor.down hook, R4) */
#cursor-label{transition:opacity .25s,transform .28s var(--ease)}
#cursor.down #cursor-label{transform:scale(.9)}
/* reel marquees: stop burning compositor while invisible (R4 fix) */
.reel-mq-track{animation-play-state:paused}
#reel-panel.is-hover .reel-mq-track{animation-play-state:running}

/* ============================ music dial (radio.js) ======================== */
/* hold-to-open progress ring on the header sound button */
#header-right-sound-btn{position:relative}
.snd-hold-ring{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;opacity:0;
  transition:opacity .2s var(--ease);
  background:conic-gradient(var(--blue) calc(var(--hold,0)*360deg),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
#header-right-sound-btn.holding .snd-hold-ring{opacity:1}

/* ==================== capture deterrent (site.js initGuard) ================= */
/* NOT DRM — the open web can't truly stop screenshots/recording. This just
   raises the bar: no text selection (inputs exempt), a print blackout, and a
   veil while the tab is hidden. */
html.guarded, html.guarded *{-webkit-user-select:none;user-select:none}
html.guarded input,html.guarded textarea,html.guarded [contenteditable],
html.guarded [data-selectable]{-webkit-user-select:text;user-select:text}
html.guarded img,html.guarded video,html.guarded canvas{-webkit-user-drag:none}
/* veil while hidden / on PrintScreen */
#capture-shield{position:fixed;inset:0;z-index:2147483646;pointer-events:none;opacity:0;
  background:rgba(8,9,13,.98);
  transition:opacity .18s ease}
html.capture-veil #capture-shield{opacity:1}
html.capture-veil #app,html.capture-veil #canvas{filter:blur(22px)}
/* print: black the whole thing out */
@media print{
  html,body{background:#08090d!important}
  body *{visibility:hidden!important}
  body::after{content:"Atlas Intel — printing disabled.";visibility:visible;
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    color:#5B7CFA;font-family:var(--mono);font-size:16px;letter-spacing:.1em}
}

/* ============================ easter eggs (site.js initEggs) ================ */
.ftr-privacy{margin-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  color:rgba(255,255,255,.55)}
.ftr-privacy .dc-none{color:var(--green);cursor:help;white-space:nowrap;
  border-bottom:1px dashed rgba(193,255,0,.42);transition:color .3s var(--ease),border-color .3s var(--ease)}
.ftr-privacy .dc-none.sassed{color:#ff6a5a;border-bottom-color:rgba(255,106,90,.5)}
/* toast + glyph rain are fixed chrome (outside #app) so backdrop-filter is legal here */
#atl-egg-toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:12000;
  max-width:min(90vw,520px);padding:14px 20px;border-radius:14px;text-align:center;
  background:rgba(14,17,22,.82);border:1px solid rgba(255,255,255,.14);color:#eef1f6;
  font-family:var(--mono);font-size:13px;line-height:1.45;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
#atl-egg-toast.show{opacity:1;transform:translate(-50%,0)}
.atl-egg-rain{position:fixed;inset:0;z-index:11999;pointer-events:none;overflow:hidden}
.atl-egg-drop{position:absolute;top:-40px;will-change:transform,opacity;line-height:1;
  animation:atl-egg-fall linear forwards}
@keyframes atl-egg-fall{0%{transform:translateY(-40px) rotate(0);opacity:0}
  10%{opacity:1}88%{opacity:1}100%{transform:translateY(106vh) rotate(220deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .atl-egg-drop{display:none}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.2s!important}
  .reveal{opacity:1;transform:none;filter:none}
  .er-line{transition:none;opacity:1;transform:none}
  #end.end--video #end-sub,#end.end--video .dl-btn{clip-path:none;transition:none;transform:none;opacity:1}
  #hero-scroll .line{animation:none}
  .reel-mq-track,#end-marquee .run,.brand-row{animation:none!important}
  #reel-follow{transform:none!important}
  .tl-caret{animation:none;opacity:.55}
  /* backstops for mid-session preference flips (JS gates normally prevent these states) */
  .split-word-inner,.ac,.ac-in,.ti-lift,.ti-num-in{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
  .ti .p-tags{clip-path:none!important;opacity:.65!important;transform:none!important;filter:none!important}
  .ti::after{transform:scaleX(1)}
  #goal-tunnel .line{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  #goal-tunnel .l2::after,.split-cine::after{display:none}
  #end-kicker .ac{transform:none;opacity:1;filter:none}
  #end-head .split-word-inner{transform:none;filter:none}
}

/* ================================================ themed back button (site.js) */
/* Glass pill under the header on every page except home. Hand-drawn back arrow,
   label expands on hover. The pill is intentionally dark so its white ink reads
   on any ground -> no on-light handling needed. */
#atl-back{position:fixed;z-index:8500;left:var(--pad);top:clamp(70px,7vh,98px);
  display:inline-flex;align-items:center;height:42px;padding:0 12px;border-radius:100px;
  border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(180deg,rgba(42,49,66,.74),rgba(13,17,26,.84));
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  color:#fff;cursor:pointer;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.30);
  opacity:0;transform:translateX(-10px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .5s var(--ease),border-color .3s var(--ease)}
#atl-back.show{opacity:1;transform:none;pointer-events:auto}
#atl-back:hover{border-color:#fff}
#atl-back .ab-arw{display:inline-flex;width:22px;height:22px;flex:none;
  transition:transform .3s var(--ease)}
#atl-back .ab-arw svg{width:100%;height:100%;display:block}
#atl-back:hover .ab-arw{transform:translateX(-2px)}
#atl-back .ab-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font-family:'Aeonik',sans-serif;font-size:14px;line-height:1;letter-spacing:.01em;
  transition:max-width .35s var(--ease),opacity .3s var(--ease),margin .35s var(--ease)}
#atl-back:hover .ab-label,#atl-back:focus-visible .ab-label{max-width:70px;opacity:1;margin-left:8px}
@media (max-width:640px){#atl-back{top:auto;bottom:18px;left:14px}}

/* ================================================ one-time music hint (site.js)
   A refined glass pill that sits just below the header sound button with an
   up-caret pointing back at it (replaces the old hand-drawn bobbing arrow). */
#atl-mhint{position:fixed;z-index:8600;pointer-events:none;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity .42s var(--ease),transform .42s var(--ease)}
#atl-mhint.in{opacity:1;transform:none}
#atl-mhint.out{opacity:0;transform:translateY(-6px) scale(.97)}
#atl-mhint .mh-card{position:relative;display:flex;align-items:center;gap:9px;
  padding:9px 13px 9px 10px;border-radius:13px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(30,37,56,.95),rgba(13,17,26,.97));
  border:1px solid rgba(130,158,255,.30);color:#eef1fa;
  font-family:'Aeonik',sans-serif;font-size:13px;line-height:1.2;
  box-shadow:0 16px 40px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1)}
/* up-caret toward the button (top-right) */
#atl-mhint .mh-card::before{content:"";position:absolute;top:-6px;right:20px;width:11px;height:11px;
  background:rgba(30,37,56,.95);border-left:1px solid rgba(130,158,255,.30);
  border-top:1px solid rgba(130,158,255,.30);transform:rotate(45deg)}
#atl-mhint .mh-ic{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:8px;
  background:rgba(91,124,250,.16);color:#9fb4ff}
#atl-mhint .mh-ic svg{width:15px;height:15px}
#atl-mhint .mh-text b{font-weight:600;color:#fff}
/* gentle two-beat attention pulse on the icon, then rest (no infinite bob) */
#atl-mhint.in .mh-ic{animation:mhPulse 1.5s ease-in-out .35s 2}
@keyframes mhPulse{0%,100%{box-shadow:0 0 0 0 rgba(91,124,250,0)}50%{box-shadow:0 0 0 5px rgba(91,124,250,.16)}}
@media (prefers-reduced-motion:reduce){
  #atl-mhint,#atl-mhint .mh-ic{animation:none!important;transition:none!important}
}

/* ==========================================================================
   ===== data-perf tiers (low-GPU optimization) — CENTRALIZED cross-file =====
   js/perf.js stamps html[data-perf]: "0" dGPU, "1" integrated, "2" weak,
   "3" potato. This is a PARALLEL axis to prefers-reduced-* / is-scrolling /
   data-anim (all left intact) — it cuts compositor/paint cost on weak machines
   while REUSING the already-validated "off" fallback values from those blocks:
     .lg-surface  -> rgba(14,17,26,.97)                    (glass.css reduced-transparency)
     .mx-pop      -> linear-gradient(180deg,#1c2032,#12141f 46%,#0b0d14)   (radio.css @supports-not)
     .auth-card   -> linear-gradient(180deg,#181a22,#0b0c11)               (auth.css @supports-not)
     #scroll-indicator frost -> linear-gradient(...rgba(24,26,35,.92),rgba(12,13,18,.95)) (endfx.css is-scrolling)
     .tl-caret rest -> animation:none;opacity:.55                          (reduced-motion block above)
   Selectors carry html[data-perf=...] so they out-specify the base rules in the
   later-loaded glass/radio/endfx/scrollrail/auth sheets; !important only where
   a base rule is itself !important or lives in an @supports block.
   ========================================================================== */

/* -------------------------------------------------- tier 1: integrated GPU
   Keep the look; cut the worst per-frame cost. Halve the heavy live-blur radii
   on the persistent fixed pills, and drop permanent layer promotions. */
html[data-perf="1"][data-glass] .lg-surface:not(.mx-pop){
  -webkit-backdrop-filter:blur(8px) saturate(150%) brightness(1.05);
  backdrop-filter:blur(8px) saturate(150%) brightness(1.05)}
html[data-perf="1"] #scroll-indicator{
  -webkit-backdrop-filter:blur(6px) saturate(1.3);backdrop-filter:blur(6px) saturate(1.3)}
html[data-perf="1"] #scroll-rail{
  -webkit-backdrop-filter:blur(8px) saturate(1.25);backdrop-filter:blur(8px) saturate(1.25)}
html[data-perf="1"] #atl-back{
  -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}
/* clear permanent will-change layer promotions (loadanim pause lives in loadanims.css) */
html[data-perf="1"] #app{will-change:auto}
html[data-perf="1"] #goal-tunnel .line,
html[data-perf="1"] #end-title,
html[data-perf="1"] #hero-title,
html[data-perf="1"] #about-hero h1,
html[data-perf="1"] #proj-hero h1,
html[data-perf="1"] #reel-title,
html[data-perf="1"] #goal-title,
html[data-perf="1"] #featured-title{will-change:auto}

/* -------------------------------- tiers 2 + 3: weak / potato (shared block)
   :is(2,3) so tier 3 inherits every tier-2 saving, then a tier-3-only block
   below adds the hard-static freezes. */

/* (a) KILL all live backdrop-filter on real-glass fixed chrome + opaque fallbacks */
:is(html[data-perf="2"],html[data-perf="3"])[data-glass] .lg-surface:not(.mx-pop){
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:rgba(14,17,26,.97)!important}
:is(html[data-perf="2"],html[data-perf="3"]) .mx-pop,
:is(html[data-perf="2"],html[data-perf="3"]) #scroll-indicator,
:is(html[data-perf="2"],html[data-perf="3"]) #scroll-rail,
:is(html[data-perf="2"],html[data-perf="3"]) #scroll-rail .sr-tip,
:is(html[data-perf="2"],html[data-perf="3"]) #atl-back,
:is(html[data-perf="2"],html[data-perf="3"]) #atl-egg-toast,
:is(html[data-perf="2"],html[data-perf="3"]) .dl-btn--alt,
:is(html[data-perf="2"],html[data-perf="3"]) #atl-mhint .mh-card,
:is(html[data-perf="2"],html[data-perf="3"]) .auth-scrim,
:is(html[data-perf="2"],html[data-perf="3"]) .auth-card{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* opaque bg fallbacks so the killed blur doesn't leave the pills see-through */
:is(html[data-perf="2"],html[data-perf="3"]) .mx-pop{
  background:linear-gradient(180deg,#1c2032 0%,#12141f 46%,#0b0d14 100%)!important}
:is(html[data-perf="2"],html[data-perf="3"]) #scroll-indicator{
  background:linear-gradient(180deg,rgba(24,26,35,.92),rgba(12,13,18,.95))!important}
:is(html[data-perf="2"],html[data-perf="3"]) #scroll-rail{background:rgba(13,15,22,.92)!important}
:is(html[data-perf="2"],html[data-perf="3"]) #scroll-rail .sr-tip{background:rgba(13,15,22,.97)!important}
:is(html[data-perf="2"],html[data-perf="3"]) #atl-back{
  background:linear-gradient(180deg,rgba(42,49,66,.94),rgba(13,17,26,.97))!important}
:is(html[data-perf="2"],html[data-perf="3"]) #atl-egg-toast{background:rgba(14,17,22,.97)!important}
:is(html[data-perf="2"],html[data-perf="3"]) .auth-card{
  background:linear-gradient(180deg,#181a22,#0b0c11)!important}

/* (b) STOP the compositor loops that never rest (leave their end-state readable) */
:is(html[data-perf="2"],html[data-perf="3"]) .reel-mq-track,
:is(html[data-perf="2"],html[data-perf="3"]) #end-marquee .run,
:is(html[data-perf="2"],html[data-perf="3"]) .brand-row,
:is(html[data-perf="2"],html[data-perf="3"]) #hero-scroll .line,
:is(html[data-perf="2"],html[data-perf="3"]) #end.end--video #end-topline,
:is(html[data-perf="2"],html[data-perf="3"]) #end.end--video.is-revealed #end-reveal-buttons .dl-btn:not(.dl-btn--alt),
:is(html[data-perf="2"],html[data-perf="3"]) .sn-dot,
:is(html[data-perf="2"],html[data-perf="3"]) #hero-scroll::before,
:is(html[data-perf="2"],html[data-perf="3"]) .apd-proc-pulse,
:is(html[data-perf="2"],html[data-perf="3"]) #atl-mhint .mh-ic,
:is(html[data-perf="2"],html[data-perf="3"]) #music-pop.is-playing .mx-pointer,
:is(html[data-perf="2"],html[data-perf="3"]) #music-pop.is-playing .mx-item.is-cur svg{
  animation:none!important}
/* caret stays lit but stops blinking (reuse reduced-motion rest value) */
:is(html[data-perf="2"],html[data-perf="3"]) .tl-caret{animation:none!important;opacity:.55}

/* (c) drop mix-blend-mode (per-frame recompute against the live backdrop) */
:is(html[data-perf="2"],html[data-perf="3"]) #header-logo,
:is(html[data-perf="2"],html[data-perf="3"]) #cursor{mix-blend-mode:normal!important}

/* (d) release permanent will-change promotions + marquee tracks */
:is(html[data-perf="2"],html[data-perf="3"]) #app,
:is(html[data-perf="2"],html[data-perf="3"]) #reel-panel,
:is(html[data-perf="2"],html[data-perf="3"]) #reel-words,
:is(html[data-perf="2"],html[data-perf="3"]) #reel-words .rw,
:is(html[data-perf="2"],html[data-perf="3"]) .reel-mq-track,
:is(html[data-perf="2"],html[data-perf="3"]) #reel-follow,
:is(html[data-perf="2"],html[data-perf="3"]) #end-pin,
:is(html[data-perf="2"],html[data-perf="3"]) #end-video,
:is(html[data-perf="2"],html[data-perf="3"]) #end-video-b,
:is(html[data-perf="2"],html[data-perf="3"]) #end-mask,
:is(html[data-perf="2"],html[data-perf="3"]) #end-topline,
:is(html[data-perf="2"],html[data-perf="3"]) #footer-wordmark-track,
:is(html[data-perf="2"],html[data-perf="3"]) .atl-egg-drop,
:is(html[data-perf="2"],html[data-perf="3"]) #goal-tunnel .line,
:is(html[data-perf="2"],html[data-perf="3"]) #end-title,
:is(html[data-perf="2"],html[data-perf="3"]) #hero-title,
:is(html[data-perf="2"],html[data-perf="3"]) #about-hero h1,
:is(html[data-perf="2"],html[data-perf="3"]) #proj-hero h1,
:is(html[data-perf="2"],html[data-perf="3"]) #reel-title,
:is(html[data-perf="2"],html[data-perf="3"]) #goal-title,
:is(html[data-perf="2"],html[data-perf="3"]) #featured-title{will-change:auto!important}

/* -------------------------------------------------- tier 3 only: potato/no-GPU
   Hard static. Freeze ALL remaining decorative animation with the SAFE global
   clamp reused from the prefers-reduced-motion block (animation ~0s but
   transitions still resolve in .2s, so one-shot reveals reach their VISIBLE end
   state instead of stranding), then force the reveal end-states directly,
   drop blur reveals, flatten the multi-layer glass shadows, and release every
   will-change. */
html[data-perf="3"] *,
html[data-perf="3"] *::before,
html[data-perf="3"] *::after{
  animation-duration:.001s!important;transition-duration:.2s!important;will-change:auto!important}
/* reveal / kinetic end-states (mirrors the reduced-motion backstops above) */
html[data-perf="3"] .reveal{opacity:1!important;transform:none!important;filter:none!important}
html[data-perf="3"] .er-line{transition:none!important;opacity:1!important;transform:none!important}
html[data-perf="3"] #end.end--video #end-sub,
html[data-perf="3"] #end.end--video .dl-btn{clip-path:none!important;transition:none!important;transform:none!important;opacity:1!important}
html[data-perf="3"] .split-word-inner,
html[data-perf="3"] .ac,
html[data-perf="3"] .ac-in,
html[data-perf="3"] .ti-lift,
html[data-perf="3"] .ti-num-in{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
html[data-perf="3"] .ti .p-tags{clip-path:none!important;opacity:.65!important;transform:none!important;filter:none!important}
html[data-perf="3"] #goal-tunnel .line{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
html[data-perf="3"] #reel-follow{transform:none!important}
/* blur reveals resolve to sharp instantly */
html[data-perf="3"] #hero-title,
html[data-perf="3"] #hero-title .ac-in{filter:none!important}
/* flatten the multi-layer glass box-shadow stacks to one flat border + one shadow */
html[data-perf="3"][data-glass] .lg-surface:not(.mx-pop),
html[data-perf="3"][data-glass] .glass-faux{
  box-shadow:0 8px 24px rgba(2,6,14,.45)!important;
  border:1px solid rgba(255,255,255,.14)!important}