/* Direction D: Immersive. Loaded after site.css. Copy and markup are unchanged; this file restyles the page as a dark
   studio stage. The WebGL scene (d-fx.js) is progressive enhancement: it is injected after load on wide, fine-pointer,
   motion-OK screens only. Without it (mobile, reduced motion, data saver, no WebGL) the page gets the calm version:
   the same static backdrop and a still CSS chrome ring. Uses the site tokens (--accent, --vio, --glow, --mono...). */

@font-face{font-family:"Silkscreen";src:url(fonts/silkscreen-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --canvas:#050507;
  --d-pixel:"Silkscreen",var(--mono);
  --d-cyan:56,214,255;
  --d-pink:255,92,200;
  --d-iri:linear-gradient(115deg,var(--accent),rgb(var(--d-cyan)) 28%,rgb(var(--vio)) 52%,rgb(var(--d-pink)) 74%,var(--accent));
  --d-glass:rgba(12,14,19,.58);
  --d-glass-line:rgba(255,255,255,.09);
}
html{background:var(--canvas)}
body{background:transparent}

/* ---------- stage backdrop (static, also the calm version) ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vmax 45vmax at 85% -10%,rgba(var(--vio),.20),transparent 60%),
    radial-gradient(50vmax 40vmax at -10% 110%,rgba(var(--glow),.10),transparent 60%),
    radial-gradient(30vmax 30vmax at 50% 50%,rgba(var(--d-cyan),.04),transparent 70%),
    var(--canvas)}
/* film grain + scanlines, very faint */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
#d-gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
html.d-gl-on #d-gl{opacity:1}

/* sections float on the stage: no opaque sheets, no dot grid */
main>.layer{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
main>.layer:not(.hero)::before{display:none}
main>.layer::after{display:none}
main>.layer.section{border-bottom:0}
.site-footer{background:transparent}
.hero-bg,html .grid-fx{display:none!important}
.site-header{background:rgba(5,5,7,.55);border-bottom-color:rgba(255,255,255,.06)}
main>.layer>.container[data-frame]::before{color:rgba(255,255,255,.32)}

/* ---------- pixel display type ---------- */
/* Silkscreen is drawn on an 8px grid: use it at 16px only, so it stays crisp */
.eyebrow,.card-n,.tour-index .n{font-family:var(--d-pixel);font-weight:400;letter-spacing:.02em;font-size:16px;line-height:1}
.eyebrow{text-transform:uppercase}
.eyebrow::before{content:"[";opacity:.6;margin-right:0}
.eyebrow::after{content:"]";opacity:.6}

/* ---------- hero ---------- */
.hero{border-bottom:0;padding-top:clamp(32px,7vh,96px)}
.hero-copy h1{position:relative;font-size:clamp(44px,7.4vw,112px);line-height:.92;letter-spacing:-.055em;max-width:9.5em}
.hero-copy h1 .d-g{position:absolute;inset:0;pointer-events:none;opacity:0}
/* static chrome ring for the calm version (the WebGL ring replaces it) */
main>.layer.hero::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:auto;animation:none;
  width:min(46vw,620px);aspect-ratio:1;right:max(-8vw,-120px);top:clamp(-60px,-4vw,0px);border-radius:50%;
  background:conic-gradient(from 200deg,#fff,#6c7380 12%,#16181d 22%,rgb(var(--d-cyan)) 32%,#e9edf2 40%,#2a2d33 52%,rgb(var(--vio)) 62%,#f4f5f6 70%,#1b1d22 82%,rgb(var(--d-pink)) 90%,#fff);
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63.5%,#000 98%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 62%,#000 63.5%,#000 98%,transparent 100%);
  opacity:.55;filter:saturate(.9) blur(.3px);transition:opacity 1s}
html.d-gl-on main>.layer.hero::before{opacity:0}
.hero .container{position:relative;z-index:1}
/* soft dark pool behind the hero copy so the scene never fights the headline */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-12% -18% -12% -30%;pointer-events:none;background:radial-gradient(closest-side,rgba(5,5,7,.78),rgba(5,5,7,.45) 60%,transparent)}

/* the product clip as a floating glass card */
.demo-media{border-radius:10px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 50px 90px -30px rgba(0,0,0,.95),0 0 120px -40px rgba(var(--vio),.55)}
.demo-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:var(--d-iri);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}

/* ---------- glass objects over the scene ---------- */
.card,.stat,.cta,.frame .shot,.tour-index button{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.card{background:var(--d-glass);border-color:var(--d-glass-line);border-radius:8px;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,0%),rgba(255,255,255,.10),transparent 60%),
             linear-gradient(115deg,transparent 30%,rgba(var(--d-cyan),.08) 45%,rgba(var(--vio),.10) 55%,rgba(var(--d-pink),.08) 65%,transparent 80%);
  background-size:auto,250% 250%;background-position:0 0,var(--sx,0%) 0;mix-blend-mode:screen}
.card:hover::after{opacity:1}
.card:hover{border-color:rgba(255,255,255,.22)}
.cta{position:relative;overflow:hidden;background:rgba(10,12,17,.5);border-color:rgba(255,255,255,.12);border-radius:14px}
.cta h2{font-size:clamp(34px,5vw,72px);line-height:.95;letter-spacing:-.05em}
.frame .shot{border-radius:8px}
.faq details{border-color:rgba(255,255,255,.08)}
.faq summary:hover h3{color:var(--text);text-shadow:-1.5px 0 rgba(var(--d-pink),.7),1.5px 0 rgba(var(--d-cyan),.7)}
.prose,.faq-a,.feature-list p{color:#b9bec7}
/* long-read columns sit on a glass slab: the scene stays visible around and blurred behind, text stays AA */
.grid>.col-main{position:relative;padding:var(--s4);border-radius:12px;background:rgba(6,7,10,.66);border:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 30px 80px -40px #000}
.grid-faq>.col-main{padding-block:var(--s1)}

/* ---------- wide + motion-OK only: tilt, glitch, cursor, HUD (classes are set by d-boot.js) ---------- */
html.d-fx .card,html.d-fx .demo-media{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--ease),border-color .2s,box-shadow .25s}
html.d-fx .card:hover{--ty:-4px}
html.d-fx .is-tilting{transition:transform .08s linear,border-color .2s,box-shadow .25s}

/* the clip card rises and straightens as it scrolls in */
@supports (animation-timeline:view()){
  html.d-fx .hero-demo .demo-media{animation:d-rise linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes d-rise{from{translate:0 60px;scale:.92;rotate:x 16deg;opacity:.5}to{translate:0 0;scale:1;rotate:x 0deg;opacity:1}}
}

/* H1 glitch: two offset copies (aria-hidden spans built by d-boot.js), sliced, a few bursts after first paint */
html.d-fx .hero-copy h1 .d-g{opacity:1;color:transparent}
html.d-fx .hero-copy h1 .d-g1{text-shadow:-3px 0 rgba(var(--d-pink),.85);clip-path:inset(100% 0 0 0)}
html.d-fx .hero-copy h1 .d-g2{text-shadow:3px 0 rgba(var(--d-cyan),.85);clip-path:inset(100% 0 0 0)}
html.d-fx .hero-copy h1.d-burst .d-g1{animation:d-g1 .9s steps(1) both}
html.d-fx .hero-copy h1.d-burst .d-g2{animation:d-g2 .9s steps(1) both}
@keyframes d-g1{0%{clip-path:inset(10% 0 70% 0);translate:-6px 0}15%{clip-path:inset(55% 0 20% 0);translate:5px 0}30%{clip-path:inset(30% 0 52% 0);translate:-3px 0}45%{clip-path:inset(80% 0 4% 0);translate:7px 0}60%{clip-path:inset(4% 0 86% 0);translate:-5px 0}75%{clip-path:inset(42% 0 40% 0);translate:2px 0}100%{clip-path:inset(100% 0 0 0);translate:0 0}}
@keyframes d-g2{0%{clip-path:inset(62% 0 18% 0);translate:6px 0}15%{clip-path:inset(12% 0 74% 0);translate:-4px 0}30%{clip-path:inset(70% 0 12% 0);translate:4px 0}45%{clip-path:inset(22% 0 60% 0);translate:-7px 0}60%{clip-path:inset(48% 0 30% 0);translate:3px 0}75%{clip-path:inset(86% 0 2% 0);translate:-2px 0}100%{clip-path:inset(100% 0 0 0);translate:0 0}}

/* heading decode: the real text stays in the DOM; an aria-hidden overlay shows scrambled glyphs for ~0.7s */
.d-dec:not(.col-side h2){position:relative}
.d-dec>.d-scr{position:absolute;inset:0;pointer-events:none;color:var(--text);overflow:hidden}
.d-dec.d-run{color:transparent}
.d-dec.d-run>.d-scr .x{color:var(--accent);font-family:var(--d-pixel);font-weight:400;font-size:.75em}

/* cursor ring (fine pointer only) */
.d-cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);mix-blend-mode:difference;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .3s,border-color .25s,background-color .25s}
.d-cur.on{opacity:1}
.d-cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:#fff;background:rgba(255,255,255,.08)}
.d-cur.media{width:88px;height:88px;margin:-44px 0 0 -44px;border-color:rgba(var(--glow),.9)}
.d-dot{position:fixed;left:0;top:0;z-index:91;pointer-events:none;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.d-dot.on{opacity:1}

/* scene HUD (right edge) */
.d-hud{position:fixed;right:20px;top:50%;z-index:30;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);pointer-events:none}
.d-hud .n{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:400 24px/1 var(--d-pixel);color:var(--text)}
.d-hud .n small{font:400 16px/1 var(--d-pixel);color:rgba(255,255,255,.4)}
.d-hud .t{max-width:16ch;text-align:right;line-height:1.4;min-height:2.8em}
.d-hud .ticks{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.d-hud .ticks i{display:block;width:14px;height:2px;background:rgba(255,255,255,.18);transition:width .4s var(--ease),background-color .4s}
.d-hud .ticks i.on{width:30px;background:var(--accent)}
@media (max-width:1399px){.d-hud{display:none}}

/* ---------- calm version ---------- */
@media (max-width:899px){
  main>.layer.hero::before{width:86vw;right:-40vw;top:-4vw;opacity:.4}
  .card,.stat,.cta,.frame .shot,.tour-index button{-webkit-backdrop-filter:none;backdrop-filter:none}
  .card,.grid>.col-main{background:rgba(14,16,21,.92)}
  .grid>.col-main{padding:var(--s3) var(--s2)}
  body::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  #d-gl,.d-cur,.d-dot{display:none}
  html.d-fx .card,html.d-fx .demo-media{transform:none}
}

main>.layer.hero{overflow-x:clip}