:root{--bg:#050505;--fg:#f4f2ec;--muted:#9b9c9b;--line:rgba(255,255,255,.13);--orange:#fe7c0d;--acid:#d9ff43;--violet:#a58cff;--cyan:#54e8ff;--pad:clamp(24px,4.4vw,82px)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,Arial,sans-serif;overflow-x:hidden;cursor:none}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:none}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em}.eyebrow{font-size:clamp(12px,.75vw,15px);letter-spacing:.18em;color:#b1b2b0}.lead{font-size:clamp(18px,1.55vw,27px);line-height:1.45;color:#c1c1bd;max-width:650px}em{font-style:normal;color:var(--acid)}::selection{background:var(--orange);color:#111}
#webgl{position:fixed;inset:0;z-index:0;pointer-events:none}.fx-grid{position:fixed;inset:0;z-index:2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(circle at center,#000 15%,transparent 80%);opacity:.4}.fx-noise{position:fixed;inset:-40%;z-index:80;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:noise 1.4s steps(4) infinite}@keyframes noise{50%{transform:translate(2%,-2%)}}.fx-vignette{position:fixed;inset:0;z-index:79;pointer-events:none;background:radial-gradient(circle at center,transparent 34%,rgba(0,0,0,.78) 120%)}.fx-flare{position:fixed;z-index:3;width:32vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(254,124,13,.11),transparent 65%);filter:blur(25px);left:-10vw;top:20vh;pointer-events:none;transition:background .9s}.fx-bars i{position:fixed;left:0;right:0;height:0;background:#000;z-index:88;transition:height .45s cubic-bezier(.22,.8,.2,1)}.fx-bars i:first-child{top:0}.fx-bars i:last-child{bottom:0}body.scene-cut .fx-bars i{height:4.5vh}.fx-impact{position:fixed;inset:0;z-index:90;background:#fff;opacity:0;pointer-events:none}.cursor{position:fixed;z-index:999;pointer-events:none;border-radius:50%}.cursor-dot{width:5px;height:5px;background:var(--acid);box-shadow:0 0 15px var(--acid)}.cursor-ring{width:38px;height:38px;border:1px solid rgba(217,255,67,.55);transition:width .22s,height .22s,border-color .22s}.cursor-hot .cursor-ring{width:64px;height:64px;border-color:var(--acid)}
.boot{position:fixed;inset:0;z-index:500;background:#020202;display:grid;grid-template-columns:minmax(280px,42vw) 1fr;align-items:center;padding:8vw;gap:5vw;transition:opacity .9s,visibility .9s}.boot.gone{opacity:0;visibility:hidden}.boot-scan{position:absolute;left:0;right:0;height:1px;top:0;background:linear-gradient(90deg,transparent,var(--orange),transparent);box-shadow:0 0 35px var(--orange);animation:scan 3.3s ease-in-out infinite}@keyframes scan{50%{top:100%}}.boot-logo-wrap{position:relative;display:grid;place-items:center}.boot-logo{width:min(40vw,480px);filter:drop-shadow(0 0 45px rgba(254,124,13,.18));animation:bootFloat 4s ease-in-out infinite}.boot-logo-ghost{position:absolute;width:80%;aspect-ratio:1;border:1px solid rgba(254,124,13,.24);border-radius:50%;animation:spin 16s linear infinite}@keyframes bootFloat{50%{transform:translateY(-12px) rotate(-1deg)}}@keyframes spin{to{transform:rotate(360deg)}}.boot-kicker{font-size:13px;color:var(--orange)}.boot h1{font-size:clamp(54px,7vw,126px);line-height:.82;letter-spacing:-.07em;margin:18px 0 24px;font-weight:500}.boot h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}.boot-intro{font-size:clamp(17px,1.4vw,24px);color:#aaa;max-width:620px;line-height:1.5}.boot-actions{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}.cta{border:1px solid var(--line);background:rgba(255,255,255,.02);padding:16px 20px;font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.1em}.cta-hot{background:var(--orange);border-color:var(--orange);color:#111}.boot-meta{position:absolute;left:8vw;right:8vw;bottom:28px;display:flex;justify-content:space-between;font-size:10px;color:#666}
.hud{position:fixed;z-index:110;left:0;right:0;top:0;height:84px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference}.locked .hud{opacity:0}.brand{display:flex;align-items:center;gap:11px;font-weight:600}.brand img{width:27px;height:27px;object-fit:contain}.brand span{font-size:13px;letter-spacing:.04em}.hud-nav{display:flex;gap:28px;font-size:10px}.hud-nav a{opacity:.6}.hud-nav a:hover{opacity:1}.hud-tools{display:flex;align-items:center;gap:10px}.scene-counter{font-size:10px;color:#bbb;margin-right:10px}.hud-btn{border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.14);height:36px;padding:0 11px;display:flex;align-items:center;gap:7px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.08em}.hud-btn.is-on{border-color:rgba(217,255,67,.45)}.equalizer{display:flex;align-items:flex-end;gap:2px;height:12px}.equalizer i{width:2px;background:currentColor;height:4px;animation:eq .7s ease-in-out infinite alternate}.equalizer i:nth-child(2){height:10px;animation-delay:-.3s}.equalizer i:nth-child(3){height:7px;animation-delay:-.5s}@keyframes eq{to{height:12px}}.sound-off .equalizer i{animation:none;height:2px}.progress-rail{position:fixed;z-index:120;right:15px;top:18vh;bottom:18vh;width:1px;background:rgba(255,255,255,.09)}.progress-rail i{display:block;width:1px;height:0;background:var(--acid);box-shadow:0 0 12px var(--acid)}.side-label{position:fixed;z-index:100;right:26px;bottom:26px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;color:#666}.ticker{position:fixed;z-index:85;left:0;right:0;bottom:0;height:27px;border-top:1px solid rgba(255,255,255,.08);background:rgba(3,3,3,.6);overflow:hidden;display:flex;align-items:center}.ticker div{white-space:nowrap;font-size:9px;color:#5e6261;animation:ticker 24s linear infinite}@keyframes ticker{to{transform:translateX(-50%)}}
main{position:relative;z-index:5}.chapter{height:190vh;position:relative}.chapter-projects{height:360vh}.chapter-archive{height:250vh}.chapter-finale{height:145vh}.chapter-sticky{height:100vh;position:sticky;top:0;overflow:hidden;padding:120px var(--pad) 55px}.chapter-no{position:absolute;top:108px;left:var(--pad);font-size:10px;color:#666}.chapter-no::first-letter{color:var(--acid)}.chapter-prompt{position:absolute;bottom:52px;left:var(--pad);font-size:10px;color:#666}.chapter-prompt span{color:var(--acid)}
.hero-copy{position:absolute;left:8vw;top:26vh;width:min(78vw,1250px);z-index:4}.hero-copy h2,.section-copy h2,.archive-title h2,.final-copy h2{font-size:clamp(88px,14vw,250px);line-height:.68;letter-spacing:-.09em;margin:18px 0 34px;font-weight:500}.hero-copy h2 span{display:block}.hero-copy h2 .outline{margin-left:9vw;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}.hero-logo{position:absolute;right:-8vw;top:10vh;width:min(48vw,740px);opacity:.07;filter:blur(.3px)}.hero-logo img{width:100%;animation:slowSpin 34s linear infinite}@keyframes slowSpin{to{transform:rotate(360deg)}}.hero-copy .lead{margin-left:27vw}.orbit-icons{position:absolute;inset:0;pointer-events:none}.orbit-icon{position:absolute;width:112px;height:112px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:grid;place-items:center;background:rgba(5,5,5,.48);backdrop-filter:blur(7px);animation:float 5s ease-in-out infinite}.orbit-icon svg{width:34px;fill:none;stroke:var(--acid);stroke-width:1.3}.orbit-icon span{position:absolute;bottom:-25px;font:10px ui-monospace;color:#8d8f8b}.o-code{right:23vw;top:19vh}.o-chip{right:10vw;top:49vh;animation-delay:-2s}.o-ai{right:30vw;bottom:12vh;animation-delay:-3s}@keyframes float{50%{transform:translateY(-18px) rotate(5deg)}}
.section-copy{position:absolute;left:var(--pad);top:25vh;width:min(760px,55vw);z-index:6}.section-copy h2{font-size:clamp(76px,9vw,160px);line-height:.8}.section-copy h2 span,.archive-title h2 span,.final-copy h2 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}.signal-machine{position:absolute;right:6vw;top:18vh;width:min(36vw,580px);z-index:5}.machine-node{height:105px;border:1px solid var(--line);display:grid;grid-template-columns:42px 60px 1fr;align-items:center;padding:0 18px;background:rgba(5,5,5,.62);backdrop-filter:blur(12px);transform:translateX(60px);opacity:.25;transition:transform .65s,opacity .65s,border-color .65s}.machine-node.active{transform:none;opacity:1;border-color:rgba(84,232,255,.42)}.machine-node b{font:10px ui-monospace;color:var(--cyan)}.machine-node svg{width:30px;fill:none;stroke:var(--cyan);stroke-width:1.4}.machine-node span{font:13px ui-monospace;letter-spacing:.08em}.machine-link{height:50px;width:1px;margin-left:38px;background:rgba(84,232,255,.16);overflow:hidden}.machine-link i{display:block;width:4px;height:18px;margin-left:-2px;background:var(--cyan);box-shadow:0 0 16px var(--cyan);animation:packet 1.1s linear infinite}@keyframes packet{from{transform:translateY(-20px)}to{transform:translateY(70px)}}.data-stream{position:absolute;left:0;right:0;bottom:11vh;display:flex;gap:7vw;white-space:nowrap;font-size:10px;color:rgba(84,232,255,.35);transform:rotate(-2deg)}.data-stream span{animation:dataPulse 2s ease-in-out infinite}.data-stream span:nth-child(even){animation-delay:-1s}@keyframes dataPulse{50%{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}}
.ai-copy{width:min(800px,60vw)}.agent-constellation{position:absolute;right:-3vw;bottom:5vh;width:62vw;height:68vh;z-index:3}.agent-node{position:absolute;width:170px;height:170px;border-radius:50%;border:1px solid rgba(165,140,255,.25);display:grid;place-items:center;background:radial-gradient(circle,rgba(165,140,255,.09),rgba(5,5,5,.65));transform:scale(.75);opacity:.35;transition:transform .55s,opacity .55s,box-shadow .55s}.agent-node.active{transform:scale(1);opacity:1;box-shadow:0 0 80px rgba(165,140,255,.12)}.agent-node strong{font:11px ui-monospace;letter-spacing:.1em}.agent-node small{position:absolute;top:28px;color:var(--violet);font:9px ui-monospace}.a1{left:4%;top:40%}.a2{left:39%;top:12%}.a3{right:3%;top:3%}.a4{right:5%;bottom:3%}.agent-constellation svg{position:absolute;inset:0;width:100%;height:100%}.agent-constellation path{fill:none;stroke:rgba(165,140,255,.2);stroke-width:1;stroke-dasharray:7 13;animation:dash 6s linear infinite}@keyframes dash{to{stroke-dashoffset:-180}}.ai-words span{position:absolute;font-weight:600;color:rgba(165,140,255,.07);font-size:clamp(42px,6vw,110px);letter-spacing:-.04em;animation:drift 11s ease-in-out infinite}.ai-words span:nth-child(1){left:43%;top:18%}.ai-words span:nth-child(2){right:5%;top:32%;animation-delay:-3s}.ai-words span:nth-child(3){left:35%;bottom:17%;animation-delay:-6s}.ai-words span:nth-child(4){right:14%;bottom:7%;animation-delay:-8s}@keyframes drift{50%{transform:translate(25px,-20px) rotate(2deg)}}
.project-stage{background:linear-gradient(135deg,rgba(255,255,255,.018),transparent 52%)}.project-act{position:absolute;inset:0;padding:120px var(--pad) 55px;opacity:0;transform:scale(.92) translateY(45px);pointer-events:none;transition:opacity .65s,transform .8s cubic-bezier(.2,.8,.2,1)}.project-act.is-active{opacity:1;transform:none;pointer-events:auto}.project-copy{position:absolute;left:8vw;top:22vh;z-index:5;width:min(720px,50vw)}.project-copy h2{font-size:clamp(92px,12vw,210px);line-height:.73;letter-spacing:-.09em;font-weight:500;margin:16px 0 30px}.project-copy>p:not(.eyebrow){font-size:clamp(18px,1.45vw,25px);line-height:1.55;color:#aaa;max-width:610px}.tech{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}.tech span{font-size:10px;padding:9px 11px;border:1px solid var(--line);background:rgba(0,0,0,.2)}.project-watermark{position:absolute;right:4vw;top:5vh;font-size:42vw;line-height:.8;font-weight:600;color:rgba(255,255,255,.018);letter-spacing:-.14em}.project-emblem{position:absolute;right:8vw;top:24vh;width:min(34vw,520px);aspect-ratio:1}.emblem-ai{border-radius:50%;border:1px solid rgba(165,140,255,.25);display:grid;place-items:center}.emblem-ai i{position:absolute;border:1px solid rgba(165,140,255,.3);border-radius:50%;animation:spin 12s linear infinite}.emblem-ai i:nth-child(1){inset:8%}.emblem-ai i:nth-child(2){inset:22%;border-style:dashed;animation-direction:reverse}.emblem-ai i:nth-child(3){inset:35%}.emblem-ai b{font:42px ui-monospace;color:var(--violet);text-shadow:0 0 35px rgba(165,140,255,.5)}.emblem-pcb{background-image:radial-gradient(circle,rgba(84,232,255,.28) 1px,transparent 1px);background-size:22px 22px;border:1px solid rgba(84,232,255,.2);transform:perspective(650px) rotateX(55deg) rotateZ(-20deg)}.emblem-pcb .chip{position:absolute;left:36%;top:36%;width:28%;aspect-ratio:1;border:1px solid var(--cyan);display:grid;place-items:center;font:12px ui-monospace;background:#071012;box-shadow:0 0 60px rgba(84,232,255,.15)}.emblem-pcb i{position:absolute;background:var(--cyan);opacity:.3}.emblem-pcb i:nth-of-type(1){height:1px;width:35%;left:5%;top:48%}.emblem-pcb i:nth-of-type(2){width:1px;height:30%;left:50%;top:8%}.emblem-pcb i:nth-of-type(3){height:1px;width:34%;right:4%;top:60%}.emblem-pcb i:nth-of-type(4){width:1px;height:26%;left:66%;bottom:5%}.emblem-radar{border:1px solid rgba(217,255,67,.25);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 20%,rgba(217,255,67,.08) 20.2% 20.5%,transparent 20.7% 40%)}.emblem-radar b{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(217,255,67,.35),transparent 23%,transparent);animation:spin 3s linear infinite}.emblem-radar i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 20px var(--acid)}.emblem-radar i:nth-child(1){left:30%;top:25%}.emblem-radar i:nth-child(2){right:24%;top:52%}.emblem-radar i:nth-child(3){left:55%;bottom:18%}.project-icon-cloud span{position:absolute;font:10px ui-monospace;border:1px solid var(--line);padding:10px 12px;background:rgba(5,5,5,.65);animation:float 5s ease-in-out infinite}.project-icon-cloud span:nth-child(1){right:36vw;top:16vh}.project-icon-cloud span:nth-child(2){right:5vw;top:17vh;animation-delay:-1s}.project-icon-cloud span:nth-child(3){right:42vw;bottom:14vh;animation-delay:-2s}.project-icon-cloud span:nth-child(4){right:8vw;bottom:12vh;animation-delay:-3s}.project-nav{position:absolute;left:var(--pad);right:var(--pad);bottom:54px;display:flex;justify-content:center;gap:34px;font-size:10px;color:#555}.project-nav span.on{color:var(--acid)}
.archive-stage{background:linear-gradient(180deg,rgba(254,124,13,.025),transparent 65%)}.archive-title{position:absolute;left:var(--pad);top:18vh;z-index:5}.archive-title h2{font-size:clamp(68px,8vw,145px);line-height:.83}.memory-strip{position:absolute;left:46vw;top:20vh;display:flex;gap:30px;width:max-content;will-change:transform}.memory{width:310px;height:430px;margin:0;background:#0a0a0a;border:1px solid rgba(254,124,13,.18);padding:10px;transform:rotate(var(--r,0deg));box-shadow:0 30px 80px rgba(0,0,0,.35)}.memory:nth-child(2n){--r:2deg;transform:translateY(90px) rotate(var(--r))}.memory:nth-child(3n){--r:-2deg;transform:translateY(-25px) rotate(var(--r))}.memory img{width:100%;height:350px;object-fit:cover;filter:saturate(.75) contrast(1.08)}.memory.m7 img{object-fit:contain;background:#070707;padding:35px}.memory figcaption{display:flex;justify-content:space-between;gap:10px;padding:15px 5px 0;font:10px ui-monospace;color:#888}.memory figcaption b{color:var(--orange)}.archive-link{position:absolute;left:var(--pad);bottom:70px;border-bottom:1px solid var(--orange);padding-bottom:9px;font-size:11px}.archive-quote{position:absolute;right:var(--pad);bottom:60px;max-width:500px;text-align:right;color:#777;font-size:16px;font-style:italic}
.finale-stage{display:grid;place-items:center;text-align:center}.final-logo{position:absolute;width:min(52vw,740px);opacity:.045;filter:drop-shadow(0 0 50px rgba(254,124,13,.18));animation:slowSpin 45s linear infinite}.final-copy{position:relative;z-index:4}.final-copy h2{font-size:clamp(110px,17vw,310px)}.final-copy p:last-child{color:#777;letter-spacing:.12em}.final-links{position:absolute;bottom:70px;display:flex;gap:32px;font-size:11px}.final-links a{border-bottom:1px solid transparent;padding-bottom:8px}.final-links a:hover{border-color:var(--acid)}.final-orbits i{position:absolute;left:50%;top:50%;border:1px solid rgba(217,255,67,.12);border-radius:50%;transform:translate(-50%,-50%);animation:spin 20s linear infinite}.final-orbits i:nth-child(1){width:55vw;height:55vw}.final-orbits i:nth-child(2){width:42vw;height:42vw;animation-direction:reverse;animation-duration:13s}.final-orbits i:nth-child(3){width:28vw;height:28vw;animation-duration:9s}
.captions{position:fixed;z-index:210;left:50%;bottom:55px;transform:translateX(-50%) translateY(20px);width:min(900px,calc(100vw - 44px));background:rgba(3,3,3,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(15px);padding:14px 18px;display:flex;gap:18px;align-items:flex-start;opacity:0;transition:opacity .25s,transform .25s}.captions.show{opacity:1;transform:translateX(-50%) translateY(0)}.captions-speaker{color:var(--acid);font-size:10px;padding-top:3px}.captions p{margin:0;font-size:clamp(15px,1.15vw,20px);line-height:1.4}
body[data-scene="identity"]{--scene-accent:var(--orange)}body[data-scene="physical"]{--scene-accent:var(--cyan)}body[data-scene="intelligence"]{--scene-accent:var(--violet)}body[data-scene="projects"]{--scene-accent:var(--acid)}body[data-scene="archive"]{--scene-accent:var(--orange)}body[data-scene="finale"]{--scene-accent:var(--acid)}.progress-rail i{background:var(--scene-accent);box-shadow:0 0 12px var(--scene-accent)}
@media(max-width:960px){body{cursor:auto}.cursor{display:none}button{cursor:pointer}.hud-nav,.scene-counter{display:none}.hud{padding:0 18px}.brand span{display:none}.hud-btn span:not(.equalizer){font-size:9px}.boot{grid-template-columns:1fr;text-align:center;padding:70px 24px}.boot-logo{width:190px}.boot-copy{margin-top:-20px}.boot h1{font-size:18vw}.boot-meta{left:24px;right:24px}.boot-meta span:nth-child(2){display:none}.chapter{height:175vh}.chapter-projects{height:320vh}.chapter-archive{height:240vh}.chapter-sticky{padding:105px 22px 45px}.chapter-no{top:92px;left:22px}.hero-copy{left:22px;top:26vh;width:92vw}.hero-copy h2{font-size:28vw}.hero-copy h2 .outline{margin-left:2vw}.hero-copy .lead{margin-left:9vw;width:78vw}.hero-logo{right:-42vw;width:110vw;top:24vh}.orbit-icon{width:82px;height:82px}.o-code{right:8vw;top:18vh}.o-chip{right:3vw;top:58vh}.o-ai{right:34vw;bottom:10vh}.section-copy{left:22px;top:21vh;width:88vw}.section-copy h2{font-size:19vw}.signal-machine{right:22px;left:22px;top:auto;bottom:9vh;width:auto}.machine-node{height:75px}.machine-link{height:28px}.data-stream{display:none}.agent-constellation{right:-80vw;width:150vw;opacity:.4}.ai-copy{width:90vw}.project-copy{left:22px;top:18vh;width:88vw}.project-copy h2{font-size:22vw}.project-emblem{right:-22vw;top:43vh;width:90vw;opacity:.42}.project-icon-cloud{display:none}.project-nav{left:22px;right:22px;gap:15px;font-size:8px}.archive-title{left:22px;top:16vh;width:90vw}.archive-title h2{font-size:17vw}.memory-strip{left:20vw;top:50vh}.memory{width:230px;height:320px}.memory img{height:250px}.archive-quote{display:none}.archive-link{left:22px}.final-copy h2{font-size:25vw}.final-logo{width:110vw}.captions{bottom:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* =========================================================
   v0.9 // FLUID PASS
   Cleaner opening composition + lower animation overhead.
   ========================================================= */

/* Keep the texture cinematic but stop making it jump every few frames. */
.fx-noise{animation:none!important;opacity:.018!important;transform:none!important}
.fx-grid{opacity:.23!important;background-size:96px 96px!important}
.fx-flare{filter:blur(46px)!important;opacity:.72;transition:background 1.6s ease,opacity 1.2s ease!important}
.fx-bars i{transition:height .7s cubic-bezier(.22,.8,.2,1)!important}
body.scene-cut .fx-bars i{height:1.3vh!important}
.cursor-ring{transition:width .3s ease,height .3s ease,border-color .3s ease!important}

/* Entry screen: one focal point, less UI noise. */
.boot{
  display:grid!important;
  place-items:center!important;
  grid-template-columns:1fr!important;
  text-align:center!important;
  padding:32px!important;
  gap:0!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(254,124,13,.075),transparent 34%),
    #020202!important;
}
.boot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 49.95%,rgba(255,255,255,.055) 50%,transparent 50.05%);
  opacity:.45;
}
.boot-aura{position:absolute;width:min(68vw,820px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(254,124,13,.08);box-shadow:0 0 160px rgba(254,124,13,.055);animation:bootBreathe 7s ease-in-out infinite}
@keyframes bootBreathe{50%{transform:scale(1.035);opacity:.6}}
.boot-center{position:relative;z-index:2;width:min(1000px,94vw);display:flex;flex-direction:column;align-items:center}
.boot-logo{width:clamp(110px,13vw,190px)!important;margin:0 0 30px;filter:drop-shadow(0 0 35px rgba(254,124,13,.22))!important;animation:none!important}
.boot-kicker{font-size:11px!important;letter-spacing:.19em;color:var(--orange)!important;margin:0 0 20px}
.boot h1{font-size:clamp(58px,8.8vw,150px)!important;line-height:.83!important;letter-spacing:-.075em!important;margin:0!important;font-weight:500!important}
.boot h1 span{color:var(--orange)!important;-webkit-text-stroke:0!important}
.boot-intro{font-size:clamp(18px,1.45vw,25px)!important;color:#aaa!important;margin:28px auto 0!important;max-width:650px!important}
.boot-actions{justify-content:center!important;margin-top:38px!important}
.boot-meta{left:32px!important;right:32px!important;bottom:25px!important;font-size:10px!important;color:#5f5f5f!important}

/* Home scene: intentionally quiet. The WebGL logo does the movement. */
.chapter-identity{height:165vh!important}
.hero-stage{background:linear-gradient(90deg,rgba(0,0,0,.32),transparent 62%)}
.hero-origin-mark{position:absolute;right:-6vw;top:50%;transform:translateY(-50%);width:min(51vw,780px);opacity:.035;pointer-events:none}
.hero-origin-mark img{width:100%;display:block;filter:grayscale(1) brightness(1.9);transform:rotate(-5deg)}
.hero-copy{left:8vw!important;top:50%!important;transform:translateY(-48%);width:min(1120px,82vw)!important}
.hero-copy h2{font-size:clamp(96px,15vw,270px)!important;line-height:.66!important;margin:18px 0 38px!important}
.hero-copy h2 .outline{margin-left:8vw!important}
.hero-copy .lead{margin-left:29vw!important;max-width:680px!important;font-size:clamp(20px,2vw,32px)!important;line-height:1.35!important;color:#b4b4b0!important}
.hero-capabilities{position:absolute;left:var(--pad);right:var(--pad);bottom:92px;display:flex;align-items:center;gap:16px;color:#71716e;font-size:11px;letter-spacing:.13em}
.hero-capabilities i{height:1px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(254,124,13,.26),rgba(255,255,255,.08))}
.chapter-prompt{bottom:42px!important;font-size:11px!important}

/* Softer morphing and fewer sudden transforms across the rest of the site. */
.machine-node{transition:transform .9s cubic-bezier(.16,.8,.2,1),opacity .9s ease,border-color .9s ease!important;will-change:transform,opacity}
.agent-node{transition:transform .9s cubic-bezier(.16,.8,.2,1),opacity .9s ease,box-shadow .9s ease!important;will-change:transform,opacity}
.project-act{transition:opacity 1.05s ease,transform 1.15s cubic-bezier(.16,.8,.2,1)!important;will-change:transform,opacity}
.memory-strip{will-change:transform;transform:translate3d(0,0,0)}

/* Give the page a little more breathing room and reduce visual vibration. */
.ticker{opacity:.58}
.data-stream{opacity:.72}
.ai-words span{animation-duration:18s!important}
.agent-constellation path{animation-duration:11s!important}
.machine-link i{animation-duration:1.65s!important}
.emblem-ai i{animation-duration:20s!important}
.emblem-radar b{animation-duration:5.5s!important}

@media(max-width:960px){
  .boot{padding:24px!important}.boot-logo{width:120px!important}.boot h1{font-size:17vw!important}.boot-intro{font-size:17px!important}.boot-meta{left:20px!important;right:20px!important}
  .chapter-identity{height:150vh!important}.hero-copy{left:22px!important;width:91vw!important;top:48%!important}.hero-copy h2{font-size:27vw!important}.hero-copy .lead{margin-left:8vw!important;width:79vw!important;font-size:20px!important}.hero-origin-mark{right:-48vw;width:125vw;opacity:.026}.hero-capabilities{left:22px;right:22px;gap:9px;font-size:8px}.hero-capabilities i:nth-of-type(2),.hero-capabilities i:nth-of-type(3){display:none}.hero-capabilities span:nth-of-type(3),.hero-capabilities span:nth-of-type(4){display:none}
}


/* =========================================================
   v1.0 // SPECTACLE PASS
   Maximum visual impact using mostly transform/opacity work,
   while preserving the v0.9 fluid animation budget.
   ========================================================= */

/* Entry show ------------------------------------------------ */
.spectacle-layer{position:fixed;inset:0;z-index:470;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;background:#020202}
.spectacle-layer.run{visibility:visible;animation:spectacleLife 2.35s cubic-bezier(.16,.8,.2,1) both}
@keyframes spectacleLife{0%{opacity:1}76%{opacity:1}100%{opacity:0}}
.spectacle-iris{position:absolute;left:50%;top:50%;width:18vmin;aspect-ratio:1;border:1px solid rgba(254,124,13,.75);border-radius:50%;transform:translate(-50%,-50%) scale(.05);box-shadow:0 0 90px rgba(254,124,13,.3),inset 0 0 80px rgba(254,124,13,.16)}
.run .spectacle-iris{animation:irisBlast 2.1s cubic-bezier(.12,.75,.2,1) both}
@keyframes irisBlast{0%{transform:translate(-50%,-50%) scale(.03);opacity:0}15%{opacity:1}55%{transform:translate(-50%,-50%) scale(3.4);opacity:.65}100%{transform:translate(-50%,-50%) scale(9);opacity:0}}
.spectacle-logo{position:absolute;left:50%;top:50%;width:min(34vw,470px);transform:translate(-50%,-50%) scale(.52);opacity:0;filter:drop-shadow(0 0 42px rgba(254,124,13,.6))}
.spectacle-logo img{width:100%;display:block}
.run .spectacle-logo{animation:logoDetonate 2.15s cubic-bezier(.12,.78,.18,1) both}
@keyframes logoDetonate{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg);filter:blur(16px)}16%{opacity:1;filter:blur(0)}48%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}76%{transform:translate(-50%,-50%) scale(1.55) rotate(2deg);opacity:.8}100%{transform:translate(-50%,-50%) scale(6);opacity:0;filter:blur(7px)}}
.spectacle-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleX(1.35);font-size:clamp(100px,23vw,420px);line-height:.7;font-weight:800;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);white-space:nowrap;opacity:0}
.run .spectacle-word{animation:wordImpact 2.1s ease both}
@keyframes wordImpact{0%,32%{opacity:0;transform:translate(-50%,-42%) scaleX(1.7) scaleY(.7)}47%{opacity:.72;transform:translate(-50%,-50%) scaleX(1) scaleY(1)}72%{opacity:.18;transform:translate(-50%,-50%) scaleX(.92) scaleY(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(.78)}}
.spectacle-code{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.38);white-space:nowrap;opacity:0}.run .spectacle-code{animation:codeIn 1.8s .25s ease both}@keyframes codeIn{20%{opacity:0;letter-spacing:.55em}50%,85%{opacity:1;letter-spacing:.18em}100%{opacity:0}}
.spectacle-beam{position:absolute;left:-20vw;top:50%;width:140vw;height:1px;background:linear-gradient(90deg,transparent,rgba(254,124,13,.95),#fff,rgba(254,124,13,.85),transparent);box-shadow:0 0 24px rgba(254,124,13,.8);transform-origin:center;opacity:0}.sb1{transform:rotate(7deg)}.sb2{transform:rotate(-11deg)}.sb3{transform:rotate(31deg)}.run .spectacle-beam{animation:beamSlash 1.7s .22s ease-out both}.run .sb2{animation-delay:.34s}.run .sb3{animation-delay:.48s}@keyframes beamSlash{0%{opacity:0;transform:scaleX(.02) rotate(var(--beam-r,7deg))}18%{opacity:1}70%{opacity:.85;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.2)}}
.sb1{--beam-r:7deg}.sb2{--beam-r:-11deg}.sb3{--beam-r:31deg}

/* Dynamic cinematic typography -------------------------------- */
.kinetic-word{position:fixed;z-index:1;left:-4vw;top:50%;transform:translate3d(0,-50%,0);font-size:clamp(180px,29vw,560px);line-height:.65;font-weight:800;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.035);white-space:nowrap;pointer-events:none;transition:color .7s,-webkit-text-stroke-color .7s;will-change:transform,opacity}
.scene-glyph{position:fixed;z-index:4;right:4.5vw;top:18vh;font-size:clamp(52px,7vw,130px);color:var(--scene-accent);opacity:.09;pointer-events:none;filter:drop-shadow(0 0 18px var(--scene-accent));will-change:transform,opacity}
.motion-streaks{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .8s}.motion-streaks i{position:absolute;height:1px;width:34vw;background:linear-gradient(90deg,transparent,var(--scene-accent),transparent);box-shadow:0 0 12px var(--scene-accent);opacity:.18;left:-40vw;transform:rotate(-11deg)}.motion-streaks i:nth-child(1){top:18%}.motion-streaks i:nth-child(2){top:33%;width:22vw}.motion-streaks i:nth-child(3){top:46%;width:45vw}.motion-streaks i:nth-child(4){top:61%;width:26vw}.motion-streaks i:nth-child(5){top:73%;width:39vw}.motion-streaks i:nth-child(6){top:86%;width:18vw}.experience-live .motion-streaks{opacity:.48}.experience-live .motion-streaks i{animation:streakFly 5.8s linear infinite}.experience-live .motion-streaks i:nth-child(2){animation-delay:-3.6s;animation-duration:7.2s}.experience-live .motion-streaks i:nth-child(3){animation-delay:-1.9s;animation-duration:8.4s}.experience-live .motion-streaks i:nth-child(4){animation-delay:-5.1s;animation-duration:6.4s}.experience-live .motion-streaks i:nth-child(5){animation-delay:-4.2s;animation-duration:9.2s}.experience-live .motion-streaks i:nth-child(6){animation-delay:-.7s;animation-duration:6.9s}@keyframes streakFly{to{transform:translateX(190vw) rotate(-11deg)}}

/* Entry itself remains clean; button creates the spectacle. */
.boot.gone{transform:scale(1.035);filter:blur(8px);transition:opacity .7s,visibility .7s,transform .9s,filter .9s}
.experience-live .fx-flare{opacity:.95}

/* Scene choreography ------------------------------------------ */
.chapter-sticky::after{content:"";position:absolute;inset:10vh 7vw;pointer-events:none;border:1px solid rgba(255,255,255,.025);opacity:.25;transform:scale(.96);transition:opacity .8s,transform 1.2s cubic-bezier(.16,.8,.2,1)}
.experience-live .chapter-sticky::after{transform:scale(1)}
body[data-scene="physical"] .motion-streaks{opacity:.72}body[data-scene="projects"] .motion-streaks{opacity:.62}body[data-scene="finale"] .motion-streaks{opacity:.25}
body[data-scene="intelligence"] .kinetic-word{-webkit-text-stroke-color:rgba(165,140,255,.075)}body[data-scene="physical"] .kinetic-word{-webkit-text-stroke-color:rgba(84,232,255,.065)}body[data-scene="projects"] .kinetic-word{-webkit-text-stroke-color:rgba(217,255,67,.055)}body[data-scene="archive"] .kinetic-word{-webkit-text-stroke-color:rgba(254,124,13,.055)}

/* Project act transitions are larger, but still GPU-only. */
.project-act{perspective:900px}.project-act.is-active .project-copy{animation:projectCopyIn 1.15s cubic-bezier(.16,.8,.2,1) both}.project-act.is-active .project-emblem{animation:emblemImpact 1.4s cubic-bezier(.16,.8,.2,1) both}@keyframes projectCopyIn{0%{opacity:0;transform:translate3d(-8vw,6vh,0) scale(.94)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}@keyframes emblemImpact{0%{opacity:0;transform:translate3d(14vw,-4vh,0) scale(.45) rotate(28deg)}100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}}
.project-watermark{transition:transform 1.8s cubic-bezier(.16,.8,.2,1),opacity 1.1s}.project-act.is-active .project-watermark{transform:translate3d(-2vw,-2vh,0) scale(1.08)}

/* Expanded archive: visual history -> YouTube -> Flash. */
.chapter-archive{height:390vh!important}.archive-stage{overflow:hidden}.memory-strip{transition:opacity .6s ease,filter .8s ease}.archive-title{transition:opacity .7s ease,transform .9s cubic-bezier(.16,.8,.2,1)}
.media-archives{position:absolute;inset:0;z-index:18;pointer-events:none}.media-portal{position:absolute;inset:0;padding:15vh var(--pad) 9vh;display:grid;grid-template-columns:minmax(320px,44vw) minmax(340px,1fr);align-items:center;gap:clamp(35px,6vw,110px);opacity:0;transform:translate3d(0,7vh,0) scale(.97);pointer-events:none;will-change:transform,opacity}.media-portal.active{pointer-events:auto}.portal-index{position:absolute;top:110px;left:var(--pad);font-size:10px;color:#656565}.portal-visual{position:relative;width:100%;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.16);overflow:hidden;background:#050505;box-shadow:0 40px 100px rgba(0,0,0,.4);transform:perspective(900px) rotateY(4deg)}.portal-visual>img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.1) saturate(.78)}.video-visual::before{content:"2018 / DIGITAL → ANALÓGICO";position:absolute;z-index:4;left:18px;top:16px;font:9px ui-monospace;color:#fff;letter-spacing:.12em;background:rgba(0,0,0,.58);padding:8px 9px}.play-button{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:#ff0033;color:white;font-size:25px;box-shadow:0 0 65px rgba(255,0,51,.35)}.scanline,.crt-grid{position:absolute;inset:0;z-index:3;pointer-events:none}.scanline{background:linear-gradient(180deg,transparent 0 48%,rgba(255,255,255,.16) 49%,transparent 51%);background-size:100% 9px;opacity:.16}.portal-copy{position:relative;max-width:780px}.portal-copy h3{font-size:clamp(52px,6.2vw,115px);line-height:.78;letter-spacing:-.07em;margin:15px 0 28px;font-weight:500}.portal-copy h3 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}.portal-copy>p:not(.eyebrow){font-size:clamp(17px,1.25vw,22px);line-height:1.5;color:#b6b6b2;max-width:700px}.portal-icon{width:62px;height:62px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);margin-bottom:24px}.portal-icon svg{width:34px;fill:none;stroke:currentColor;stroke-width:1.25}.youtube-icon{color:#ff244f}.youtube-icon svg{fill:#ff244f;stroke:none}.youtube-icon .play{fill:white}.flash-icon{color:#ffd43b}.flash-icon svg{fill:none;stroke:#ffd43b;stroke-width:1.6}.portal-chips,.flash-spec{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.portal-chips span,.flash-spec span{border:1px solid rgba(255,255,255,.12);padding:8px 10px;font-size:9px;color:#8e8e8b}.portal-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:25px;font-size:10px}.portal-links a{border-bottom:1px solid currentColor;padding-bottom:8px}.youtube-portal .portal-links a{color:#ff5574}.flash-portal .portal-links a{color:#ffd43b}.flash-visual{background:radial-gradient(circle at 50% 35%,#181818,#020202)}.flash-visual>img.failed{display:none}.flash-fallback{position:absolute;inset:0;display:grid;place-items:center;align-content:center;background:linear-gradient(135deg,#090909,#131313);font-family:ui-monospace;text-align:center}.flash-fallback b{font-size:clamp(38px,5vw,82px);color:#fff;letter-spacing:-.06em}.flash-fallback strong{font-size:clamp(30px,4vw,66px);color:#ff3948;letter-spacing:.05em}.flash-fallback small{margin-top:15px;color:#777;letter-spacing:.2em}.flash-fallback i{position:absolute;width:75%;height:60%;border:1px solid rgba(255,57,72,.2);transform:skewY(-5deg)}.flash-visual>img:not(.failed){position:relative;z-index:2}.crt-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(90deg,rgba(255,0,0,.03),rgba(0,255,0,.02),rgba(0,0,255,.03));mix-blend-mode:screen}.flash-spec span{color:#ffd43b;border-color:rgba(255,212,59,.22)}
.archive-link,.archive-quote{z-index:30}.archive-link{bottom:56px}.archive-quote{bottom:46px}

/* Finale/replay ------------------------------------------------ */
.replay-btn{appearance:none;border:0;border-bottom:1px solid var(--acid);background:none;color:var(--acid);font:inherit;letter-spacing:inherit;padding:0 0 8px}.final-links{align-items:center;flex-wrap:wrap;justify-content:center}.final-links a{white-space:nowrap}

/* Performance guardrails. */
@media(max-width:960px){
  .kinetic-word{font-size:45vw;left:-10vw}.scene-glyph{right:18px;top:16vh}.motion-streaks{opacity:.28!important}
  .spectacle-logo{width:52vw}.spectacle-word{font-size:31vw}.spectacle-code{font-size:8px}
  .chapter-archive{height:430vh!important}.media-portal{padding:16vh 22px 10vh;grid-template-columns:1fr;gap:22px;align-content:center}.portal-index{top:92px;left:22px}.portal-visual{width:min(82vw,500px);justify-self:center;aspect-ratio:16/9}.portal-copy{text-align:left}.portal-copy h3{font-size:15vw;margin:9px 0 18px}.portal-copy>p:not(.eyebrow){font-size:16px}.portal-icon{display:none}.portal-chips,.flash-spec{margin:16px 0}.portal-links{gap:14px;margin-top:16px}.media-portal .eyebrow{font-size:9px}.archive-link{bottom:48px}.archive-title{top:14vh}.memory-strip{top:46vh}
  .final-links{bottom:55px;gap:15px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.spectacle-layer,.kinetic-word,.motion-streaks,.scene-glyph{display:none!important}}

/* v1.0.2 — Chapter 02 is one continuous signal, not four repeated cards */
:root{--signal-flow:0}
.signal-pipeline{
  position:absolute!important;
  right:5vw!important;
  top:50%!important;
  transform:translateY(-45%);
  width:min(46vw,760px)!important;
  height:300px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  gap:0;
  z-index:7;
}
.pipeline-track{
  position:absolute;
  left:8%;right:8%;top:50%;height:1px;
  background:rgba(84,232,255,.13);
  overflow:visible;
}
.pipeline-fill{
  position:absolute;left:0;top:-1px;height:3px;width:100%;
  transform:scaleX(var(--signal-flow));transform-origin:left center;
  background:linear-gradient(90deg,rgba(84,232,255,.2),#54e8ff,#fff);
  box-shadow:0 0 18px rgba(84,232,255,.55);
  transition:transform .11s linear;
}
.signal-packet{
  position:absolute;left:calc(var(--signal-flow) * 100%);top:50%;
  width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff;box-shadow:0 0 14px #fff,0 0 34px #54e8ff,0 0 75px rgba(84,232,255,.5);
  transition:left .11s linear;
}
.pipeline-stage{
  position:relative;z-index:2;justify-self:center;
  width:118px;height:118px;border-radius:50%;
  border:1px solid rgba(84,232,255,.15);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(84,232,255,.045),rgba(3,5,8,.78) 68%);
  backdrop-filter:blur(9px);
  opacity:.28;transform:scale(.82);
  transition:opacity .7s ease,transform .85s cubic-bezier(.16,.8,.2,1),border-color .7s,box-shadow .7s;
}
.pipeline-stage::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid transparent;
  transition:border-color .6s,transform .8s;transform:scale(.85)
}
.pipeline-stage svg{width:31px;height:31px;fill:none;stroke:#54e8ff;stroke-width:1.4;margin-bottom:9px}
.pipeline-stage small{font:9px ui-monospace,monospace;color:#54e8ff;letter-spacing:.13em;margin-bottom:5px;white-space:nowrap}
.pipeline-stage strong{font:10px ui-monospace,monospace;color:#fff;letter-spacing:.08em;white-space:nowrap}
.pipeline-stage.passed{opacity:.65;transform:scale(.93);border-color:rgba(84,232,255,.25)}
.pipeline-stage.active{opacity:1;transform:scale(1.13);border-color:rgba(84,232,255,.72);box-shadow:0 0 55px rgba(84,232,255,.13),inset 0 0 28px rgba(84,232,255,.05)}
.pipeline-stage.active::after{border-color:rgba(84,232,255,.23);transform:scale(1.1)}

@media(max-width:960px){
  .signal-pipeline{left:22px!important;right:22px!important;top:auto!important;bottom:10vh!important;transform:none;width:auto!important;height:330px;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}
  .pipeline-track{left:57px;right:auto;top:8%;bottom:8%;width:1px;height:auto}
  .pipeline-fill{top:0;left:-1px;width:3px;height:100%;transform:scaleY(var(--signal-flow));transform-origin:center top}
  .signal-packet{left:50%;top:calc(var(--signal-flow) * 100%);transition:top .11s linear}
  .pipeline-stage{width:auto;height:62px;border-radius:12px;justify-self:stretch;display:grid;grid-template-columns:52px 1fr 1fr;padding:0 14px;transform:translateX(24px);text-align:left}
  .pipeline-stage svg{margin:0;width:27px;height:27px}.pipeline-stage small,.pipeline-stage strong{margin:0}.pipeline-stage.active{transform:translateX(0) scale(1)}.pipeline-stage.passed{transform:translateX(0) scale(.98)}
}


/* v1.0.4 — continuous stage transitions -------------------------------- */
.pipeline-stage{
  --stage-e:0;
  --stage-done:0;
  opacity:calc(.28 + var(--stage-e) * .72 + var(--stage-done) * .16)!important;
  transform:scale(calc(.84 + var(--stage-e) * .25 + var(--stage-done) * .07))!important;
  border-color:rgba(84,232,255,calc(.14 + var(--stage-e) * .58 + var(--stage-done) * .12))!important;
  box-shadow:0 0 calc(12px + var(--stage-e) * 54px) rgba(84,232,255,calc(var(--stage-e) * .14)),inset 0 0 28px rgba(84,232,255,calc(var(--stage-e) * .055))!important;
  transition:none!important;
}
.pipeline-stage::after{transform:scale(calc(.86 + var(--stage-e) * .25))!important;border-color:rgba(84,232,255,calc(var(--stage-e) * .23))!important;transition:none!important}
.agent-node{
  --agent-e:0;
  opacity:calc(.32 + var(--agent-e) * .68)!important;
  transform:scale(calc(.76 + var(--agent-e) * .24))!important;
  box-shadow:0 0 calc(8px + var(--agent-e) * 72px) rgba(165,140,255,calc(var(--agent-e) * .13))!important;
  transition:none!important;
}
.project-act{transition:none!important;will-change:transform,opacity}
.project-act .project-copy,.project-act .project-emblem{animation:none!important}
.project-act .project-copy,.project-act .project-emblem,.project-act .project-watermark{transition:none!important}
body.scene-transitioning .motion-streaks{opacity:.16!important}
body.scene-transitioning .kinetic-word{filter:blur(1.5px);transition:filter .35s ease}
body.scene-transitioning .fx-grid{opacity:.22;transition:opacity .5s ease}
@media(max-width:960px){
  .pipeline-stage{transform:translateX(calc((1 - var(--stage-e)) * 18px)) scale(calc(.97 + var(--stage-e) * .03))!important}
}


/* === v10.5 / CV CONTENT PASS =========================================== */
.hero-proof{
  margin-top:clamp(1.4rem,3vh,2.5rem);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  max-width:min(900px,78vw);
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.08);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.hero-proof>div{
  min-height:76px;
  padding:12px 14px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  background:rgba(5,5,5,.72);
}
.hero-proof strong{
  font:700 clamp(1.15rem,2.2vw,2rem)/.9 var(--display,Arial,sans-serif);
  letter-spacing:-.05em;
  color:var(--orange,#fe7c0d);
}
.hero-proof span{
  font:600 clamp(.62rem,.72vw,.78rem)/1.15 var(--mono,monospace);
  letter-spacing:.08em;
  color:rgba(255,255,255,.65);
}
.field-proof{
  position:absolute;
  left:clamp(28px,5vw,88px);
  bottom:clamp(72px,8vh,116px);
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  font-size:clamp(.68rem,.76vw,.82rem);
  letter-spacing:.08em;
  color:rgba(255,255,255,.52);
}
.field-proof b{color:#fff;font-size:1.2em}
.career-reel{
  position:absolute;
  inset:14vh 6vw auto 6vw;
  z-index:12;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,7vh,0) scale(.975);
  transition:opacity .4s linear,transform .4s linear;
}
.career-head h3{
  margin:.25rem 0 1.2rem;
  font-size:clamp(2rem,4vw,4.7rem);
  line-height:.85;
  letter-spacing:-.065em;
}
.career-head h3 span{color:var(--orange,#fe7c0d)}
.career-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  gap:1px;
  max-width:1300px;
}
.career-track article{
  min-height:112px;
  padding:16px;
  background:rgba(5,5,5,.84);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.career-track b{
  color:var(--orange,#fe7c0d);
  font-size:.78rem;
  letter-spacing:.12em;
  margin-bottom:10px;
}
.career-track strong{
  font-size:clamp(.75rem,.92vw,1rem);
  line-height:1.15;
  color:#fff;
}
.career-track small{
  margin-top:7px;
  font-size:.62rem;
  line-height:1.15;
  color:rgba(255,255,255,.48);
}
.career-track article.current{box-shadow:inset 0 -2px 0 var(--orange,#fe7c0d)}
.skills-ribbon{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:13px;
  max-width:1200px;
}
.skills-ribbon span{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(5,5,5,.66);
  color:rgba(255,255,255,.7);
  font-size:.62rem;
  letter-spacing:.08em;
}

@media (max-width:900px){
  .hero-proof{grid-template-columns:repeat(2,1fr);max-width:92vw}
  .hero-proof>div{min-height:60px}
  .field-proof{left:24px;right:24px;bottom:64px}
  .career-track{grid-template-columns:repeat(2,1fr)}
  .career-track article{min-height:88px}
  .career-reel{inset:12vh 4vw auto 4vw}
}
@media (max-width:600px){
  .hero-proof{display:none}
  .field-proof{display:none}
  .career-head h3{font-size:2.2rem}
  .career-track article{padding:10px;min-height:74px}
  .skills-ribbon{display:none}
}


/* === v10.6 / GSAP + FRAME-PACING PASS ================================ */
/* Programmatic film scroll is already smoothed by the animation engine.
   Native scroll-behavior:smooth would interpolate every scrollTo again and
   fight GSAP/audio-driven motion. */
html{scroll-behavior:auto!important}

/* Avoid continuously re-blurring the moving WebGL behind translucent cards.
   Static alpha backgrounds are significantly cheaper on integrated/mobile GPUs. */
.hero-proof,.pipeline-stage,.orbit-icon,.machine-node{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* These elements are updated on every audio/GSAP tick. CSS transitions on the
   same properties create a second interpolation layer and visible lag/jitter. */
.experience-live .memory-strip,
.experience-live .archive-title,
.experience-live .career-reel,
.experience-live .media-portal,
.signal-packet{transition:none!important}

/* Large animated filters are paint-heavy and were a source of frame spikes. */
body.scene-transitioning .kinetic-word{filter:none!important}
.boot.gone{filter:none!important}
.fx-flare{filter:none!important;background:radial-gradient(circle,rgba(254,124,13,.105),rgba(254,124,13,.025) 38%,transparent 70%)!important}
.memory-strip{filter:none!important}

/* mix-blend-mode forces an extra compositing path while the entire scene below
   is moving. Keep the HUD stable and cheap. */
.hud{mix-blend-mode:normal!important;text-shadow:0 1px 8px rgba(0,0,0,.65)}

/* Explicit compositor hints only for the few elements continuously animated. */
#webgl canvas,.kinetic-word,.scene-glyph,.project-act,.media-portal,.career-reel,.memory-strip,.signal-packet{
  will-change:transform,opacity;
}

.academic-line{
  margin-top:18px;
  font-size:clamp(.66rem,.75vw,.82rem);
  color:rgba(165,140,255,.72);
  letter-spacing:.11em;
}


/* === v10.7 / HYPERDRIVE ================================================= */
/* Hard mobile containment. Transformed/outlined display text must never widen
   the layout viewport on Safari/Chrome mobile. */
html,body{width:100%;max-width:100%;overflow-x:clip!important}
main,.chapter,.chapter-sticky,.boot,.hud{max-width:100%;overflow-x:clip}
img,svg,canvas{max-width:100%}

.fx-hyperframe{position:fixed;inset:0;z-index:82;pointer-events:none;opacity:.28}
.fx-hyperframe i{position:absolute;width:54px;height:54px;border-color:rgba(255,255,255,.24);border-style:solid;opacity:.34}
.fx-hyperframe i:nth-child(1){left:22px;top:104px;border-width:1px 0 0 1px}
.fx-hyperframe i:nth-child(2){right:22px;top:104px;border-width:1px 1px 0 0}
.fx-hyperframe i:nth-child(3){left:22px;bottom:48px;border-width:0 0 1px 1px}
.fx-hyperframe i:nth-child(4){right:22px;bottom:48px;border-width:0 1px 1px 0}
.fx-shockwave{--shock:#fff;position:fixed;left:50%;top:50%;z-index:86;width:min(72vmin,680px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;display:grid;place-items:center}
.fx-shockwave i{position:absolute;width:100%;height:100%;border:1px solid var(--shock);border-radius:50%;opacity:0;box-shadow:0 0 80px color-mix(in srgb,var(--shock) 25%,transparent)}
.fx-shockwave b{position:absolute;width:100vw;height:1px;background:linear-gradient(90deg,transparent,var(--shock),transparent);opacity:0;transform-origin:center}
.resume-cue{position:fixed;left:50%;bottom:54px;z-index:160;transform:translate3d(-50%,18px,0);opacity:0;pointer-events:none;display:flex;gap:14px;align-items:center;padding:10px 13px;border:1px solid rgba(255,255,255,.13);background:rgba(3,3,3,.82);font-size:9px;color:#858585;transition:opacity .25s,transform .35s cubic-bezier(.16,.8,.2,1)}
.resume-cue span{color:var(--acid)}.resume-cue b{font-weight:400}.resume-cue.show{opacity:1;transform:translate3d(-50%,0,0)}

/* scene-dependent frame tint gives every chapter an immediate identity */
body[data-scene="physical"] .fx-hyperframe{color:var(--cyan)}
body[data-scene="intelligence"] .fx-hyperframe{color:var(--violet)}
body[data-scene="projects"] .fx-hyperframe{color:var(--acid)}
body[data-scene="archive"] .fx-hyperframe{color:var(--orange)}

/* Protect absurdly large type without making it visually timid. */
.hero-copy h2,.section-copy h2,.project-copy h2,.archive-title h2,.final-copy h2,.portal-copy h3,.career-head h3{
  max-width:100%;overflow-wrap:anywhere;text-wrap:balance;
}

@media(max-width:960px){
  :root{--pad:18px}
  body{min-width:0}
  .hud{width:100%;max-width:100dvw;gap:8px}.hud-tools{gap:5px}.hud-btn{padding:0 8px;min-width:36px}
  .boot{width:100dvw;max-width:100dvw;padding:64px 18px 56px}.boot-center{min-width:0;width:100%}.boot h1{font-size:clamp(40px,13.5vw,76px)!important;line-height:.86;overflow-wrap:anywhere}.boot-intro{font-size:16px}.boot-actions{justify-content:center}.cta{max-width:100%;padding:14px 15px}
  .chapter-sticky{width:100dvw;max-width:100dvw;padding-left:18px;padding-right:18px}
  .chapter-no{left:18px;right:18px;max-width:calc(100dvw - 36px)}
  .hero-copy{left:18px!important;right:18px!important;width:auto!important;max-width:none!important;top:42%!important}.hero-copy h2{font-size:clamp(58px,23vw,104px)!important;line-height:.72}.hero-copy h2 .outline{margin-left:0!important}.hero-copy .lead{margin-left:0!important;width:min(88vw,560px)!important;font-size:clamp(16px,4.4vw,20px)!important}.hero-proof{width:100%;max-width:100%!important}
  .hero-origin-mark{right:-24vw!important;width:94vw!important}
  .section-copy{left:18px!important;right:18px!important;width:auto!important;max-width:none!important;top:16vh!important}.section-copy h2{font-size:clamp(52px,16.6vw,86px)!important;line-height:.82}.section-copy .lead{font-size:clamp(15px,4.25vw,19px);max-width:92%}
  .ai-copy{width:auto!important}.academic-line{max-width:88vw;line-height:1.45}
  .project-copy{left:18px!important;right:18px!important;width:auto!important;max-width:none!important;top:17vh!important}.project-copy h2{font-size:clamp(58px,20vw,102px)!important;line-height:.77;overflow-wrap:normal}.project-act-3 .project-copy h2{font-size:clamp(48px,16vw,82px)!important}.project-copy>p:not(.eyebrow){font-size:clamp(15px,4.2vw,18px);max-width:92%}.project-emblem{right:-10vw!important;width:72vw!important;max-width:380px!important;top:48vh!important}.project-watermark{right:-4vw;font-size:72vw}
  .archive-title{left:18px!important;right:18px!important;width:auto!important}.archive-title h2{font-size:clamp(48px,15vw,80px)!important;line-height:.86}.memory-strip{left:14vw!important}.memory{width:min(68vw,245px)}
  .career-reel{left:18px!important;right:18px!important;inset-inline:18px!important}.career-head h3{font-size:clamp(34px,10vw,58px)!important}.career-track{width:100%;max-width:100%}.career-track strong{overflow-wrap:anywhere}
  .media-portal{left:0;right:0;width:100dvw;max-width:100dvw;padding-left:18px!important;padding-right:18px!important}.portal-copy,.portal-visual{min-width:0;max-width:100%}.portal-copy h3{font-size:clamp(44px,13vw,72px)!important;line-height:.82;overflow-wrap:anywhere}.portal-links a{overflow-wrap:anywhere}
  .final-copy{width:calc(100dvw - 36px)}.final-copy h2{font-size:clamp(58px,18.5vw,98px)!important;line-height:.76}.final-links{left:18px;right:18px;max-width:calc(100dvw - 36px);gap:12px!important}.final-logo{width:92vw!important}
  .kinetic-word{font-size:42vw!important;left:-5vw!important;max-width:110vw}.spectacle-word{font-size:27vw!important;max-width:100vw}.scene-glyph{font-size:min(32vw,150px)}
  .resume-cue{left:18px;right:18px;bottom:42px;transform:translate3d(0,18px,0);justify-content:center;text-align:center;flex-wrap:wrap}.resume-cue.show{transform:translate3d(0,0,0)}
  .fx-hyperframe i{width:28px;height:28px}.fx-hyperframe i:nth-child(1),.fx-hyperframe i:nth-child(3){left:10px}.fx-hyperframe i:nth-child(2),.fx-hyperframe i:nth-child(4){right:10px}
}
@media(max-width:520px){
  .hero-proof{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.hero-proof>div{min-width:0;padding:9px 8px}.hero-proof strong{font-size:18px}.hero-proof span{font-size:8px}
  .hud .brand{max-width:32px}.hud-btn span:not(.equalizer){display:none}.hud-btn{width:36px;padding:0;justify-content:center}
  .tech{gap:5px}.tech span{font-size:8px;padding:7px 8px}
  .career-track{grid-template-columns:1fr 1fr}.career-track article{min-width:0}
}
@media(pointer:coarse){.cursor{display:none!important}body,button{cursor:auto!important}}


/* === v10.8 / CONTINUO CURIOSO VIDEOCLIP MODE ========================== */
:root{
  --music-bass:0;
  --music-mid:0;
  --music-high:0;
  --music-energy:0;
  --music-beat:0;
}
.cta-music{
  position:relative;
  border-color:rgba(217,255,67,.5)!important;
  color:#eaff84!important;
  background:linear-gradient(110deg,rgba(217,255,67,.07),rgba(165,140,255,.07))!important;
}
.cta-music::before{
  content:"SPECIAL";
  position:absolute;left:11px;top:-8px;
  padding:2px 5px;background:#020202;
  color:#d9ff43;font:600 7px/1 ui-monospace,monospace;letter-spacing:.16em;
}
.hud-music{border-color:rgba(165,140,255,.3)!important}
body.music-mode .hud-music{color:#d9ff43!important;border-color:#d9ff43!important;box-shadow:0 0 22px rgba(217,255,67,.12)}
body.music-mode #captionsToggle{opacity:.28}

.music-mode-layer{
  position:fixed;inset:0;z-index:91;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
  contain:layout paint style;
}
body.music-mode .music-mode-layer{opacity:1;visibility:visible}
.music-mode-layer::before{
  content:"";position:absolute;inset:-15%;
  background:
    radial-gradient(circle at 50% 50%,rgba(217,255,67,.09),transparent 18%),
    conic-gradient(from 0deg at 50% 50%,transparent 0 20%,rgba(84,232,255,.035) 28%,transparent 35% 58%,rgba(165,140,255,.035) 68%,transparent 75%);
  transform:scale(calc(1 + var(--music-bass)*.04)) rotate(calc(var(--music-mid)*3deg));
  opacity:calc(.14 + var(--music-energy)*.25);
}
.music-vignette{
  position:absolute;inset:0;
  box-shadow:inset 0 0 18vw rgba(0,0,0,.82);
  background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 28%,transparent 72%,rgba(0,0,0,.24));
}
#musicSpectrum{
  position:absolute;left:0;right:0;bottom:30px;width:100%;height:22vh;
  opacity:.32;mix-blend-mode:screen;transform:translateZ(0);
}
.music-mode-top{
  position:absolute;left:var(--pad);right:var(--pad);top:94px;
  display:flex;justify-content:space-between;gap:16px;
  font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.42);
}
.music-mode-top span{color:rgba(217,255,67,.76)}
.music-mode-top b{font-weight:500;color:rgba(255,255,255,.66)}
.music-impact-copy{
  position:absolute;left:50%;top:50%;width:min(94vw,1500px);
  transform:translate3d(-50%,-50%,0);text-align:center;
  display:grid;place-items:center;gap:12px;
}
.music-impact-copy strong{
  max-width:100%;
  font-size:clamp(38px,8vw,148px);line-height:.84;letter-spacing:-.06em;font-weight:800;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18);
  opacity:.5;overflow-wrap:anywhere;will-change:transform,opacity;
  transform:scale(calc(1 + var(--music-bass)*.018));
}
.music-impact-copy span{
  max-width:92vw;
  font:600 clamp(8px,.82vw,13px)/1.3 ui-monospace,monospace;
  letter-spacing:.17em;color:rgba(217,255,67,.7);
}
.music-progress{
  position:absolute;left:var(--pad);right:var(--pad);bottom:42px;height:1px;
  background:rgba(255,255,255,.08);
}
.music-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#fe7c0d,#54e8ff,#a58cff,#d9ff43,#fff);
  box-shadow:0 0 16px rgba(217,255,67,.45);
}
body.music-mode .fx-hyperframe{opacity:calc(.16 + var(--music-energy)*.34)!important}
body.music-mode .fx-flare{opacity:calc(.08 + var(--music-high)*.20)!important}
body.music-mode .scene-glyph{opacity:calc(.035 + var(--music-mid)*.09)!important}
body.music-mode .progress-rail i{background:#d9ff43!important}

@media(max-width:700px){
  .boot-actions{display:grid!important;grid-template-columns:1fr!important;width:min(100%,430px);margin-inline:auto}
  .music-mode-top{left:16px;right:16px;top:70px;font-size:7px}
  .music-mode-top span{max-width:66vw}
  .music-impact-copy{width:94vw;top:47%}
  .music-impact-copy strong{font-size:clamp(30px,11vw,62px);line-height:.9}
  .music-impact-copy span{font-size:8px;letter-spacing:.11em}
  #musicSpectrum{height:15vh;bottom:28px}
  .music-progress{left:16px;right:16px;bottom:37px}
}


/* === v10.9 / ULTRA EPIC ================================================= */
:root{
  --ultra-flash:0;
  --ultra-punch:0;
  --ultra-spin:0deg;
}
.cta-ultra{
  position:relative;
  border-color:rgba(255,255,255,.52)!important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.06),rgba(165,140,255,.11),rgba(84,232,255,.08))!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:visible!important;
}
.cta-ultra b{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.9)}
.cta-ultra small{
  position:absolute;right:9px;top:-8px;padding:2px 5px;
  font:700 7px/1 ui-monospace,monospace;letter-spacing:.15em;
  background:#fff;color:#000;
}
.cta-ultra::after{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:translateX(-120%);pointer-events:none;
}
.cta-ultra:hover::after{animation:ultraBtn .8s ease}
@keyframes ultraBtn{to{transform:translateX(120%)}}
.hud-ultra{border-color:rgba(255,255,255,.2)!important}
body.ultra-mode .hud-ultra{
  color:#fff!important;border-color:#fff!important;
  box-shadow:0 0 28px rgba(255,255,255,.18),inset 0 0 18px rgba(165,140,255,.08);
}

.ultra-layer{
  position:fixed;inset:0;z-index:92;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;contain:strict;
}
body.ultra-mode .ultra-layer{opacity:1;visibility:visible}
.ultra-flash{
  position:absolute;inset:0;
  background:#fff;
  opacity:calc(var(--ultra-flash)*.58);
  will-change:opacity;
}
.ultra-radial{
  position:absolute;inset:-25%;
  background:
    repeating-conic-gradient(from var(--ultra-spin) at 50% 50%,
      rgba(255,255,255,.15) 0deg,
      transparent 1.8deg 8deg,
      rgba(84,232,255,.08) 9deg,
      transparent 10deg 18deg);
  transform:scale(calc(1 + var(--ultra-punch)*.10)) rotate(var(--ultra-spin));
  opacity:calc(.04 + var(--music-energy)*.13 + var(--ultra-flash)*.16);
  will-change:transform,opacity;
}
.ultra-scan{
  position:absolute;left:-10%;right:-10%;height:2px;top:50%;
  background:linear-gradient(90deg,transparent,#fff 20%,#54e8ff 50%,#fff 80%,transparent);
  box-shadow:0 0 30px #54e8ff,0 0 70px rgba(255,255,255,.6);
  transform:translate3d(0,calc((var(--music-mid) - .5)*72vh),0) scaleX(calc(.35 + var(--music-high)*1.3));
  opacity:calc(var(--ultra-punch)*.42);
}
.ultra-cross{position:absolute;inset:0;opacity:calc(.04 + var(--ultra-flash)*.16)}
.ultra-cross i,.ultra-cross b{position:absolute;display:block;background:rgba(255,255,255,.6)}
.ultra-cross i{left:50%;top:0;bottom:0;width:1px;transform:scaleY(calc(.1 + var(--ultra-punch)))}
.ultra-cross b{top:50%;left:0;right:0;height:1px;transform:scaleX(calc(.1 + var(--ultra-punch)))}
.ultra-corners i{position:absolute;width:7vw;height:7vw;max-width:90px;max-height:90px;border-color:rgba(255,255,255,.3);opacity:calc(.12 + var(--ultra-punch)*.35)}
.ultra-corners i:nth-child(1){left:2.5vw;top:2.5vw;border-left:1px solid;border-top:1px solid}
.ultra-corners i:nth-child(2){right:2.5vw;top:2.5vw;border-right:1px solid;border-top:1px solid}
.ultra-corners i:nth-child(3){left:2.5vw;bottom:2.5vw;border-left:1px solid;border-bottom:1px solid}
.ultra-corners i:nth-child(4){right:2.5vw;bottom:2.5vw;border-right:1px solid;border-bottom:1px solid}
.ultra-label{
  position:absolute;top:72px;left:50%;transform:translateX(-50%);
  width:min(86vw,900px);display:flex;justify-content:space-between;
  color:rgba(255,255,255,.52);font-size:8px;letter-spacing:.18em;
}
.ultra-label b{color:#fff}
body.ultra-mode .music-impact-copy strong{
  color:rgba(255,255,255,.03);
  -webkit-text-stroke:1px rgba(255,255,255,calc(.22 + var(--music-high)*.22));
  opacity:calc(.30 + var(--music-energy)*.42);
  transform:
    translate3d(calc((var(--music-high) - .5)*1vw),0,0)
    scale(calc(1 + var(--music-bass)*.045 + var(--ultra-punch)*.04));
  text-shadow:
    calc(var(--ultra-punch)*5px) 0 rgba(84,232,255,.22),
    calc(var(--ultra-punch)*-5px) 0 rgba(165,140,255,.18);
}
body.ultra-mode .music-impact-copy span{
  opacity:calc(.25 + var(--music-high)*.65);
  color:#fff;
}
body.ultra-mode .music-mode-top span{color:#fff}
body.ultra-mode #musicSpectrum{opacity:.5}
body.ultra-mode .kinetic-word{
  opacity:calc(.20 + var(--music-energy)*.40)!important;
  filter:none!important;
}
body.ultra-mode .fx-bars i{
  height:calc(3vh + var(--ultra-punch)*4vh);
}
body.ultra-mode .fx-vignette{opacity:.72}
body.ultra-mode .fx-noise{opacity:.055}

@media(max-width:700px){
  .cta-ultra small{right:6px}
  .ultra-label{top:58px;width:88vw;font-size:6.5px}
  body.ultra-mode .music-impact-copy strong{
    font-size:clamp(40px,15vw,82px);
    max-width:96vw;
    overflow-wrap:anywhere;
  }
  .ultra-corners i{width:13vw;height:13vw}
}


/* === v10.10 / REAL MODE SWITCHER ======================================= */
body.normal-mode{--mode-a:#fe7c0d;--mode-b:#54e8ff}
body.music-mode:not(.ultra-mode){--mode-a:#54e8ff;--mode-b:#a58cff}
body.ultra-mode{--mode-a:#ffffff;--mode-b:#d9ff43}
.mode-selector{display:flex;align-items:center;gap:6px;padding:3px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.mode-selector-label{font-size:7px;letter-spacing:.17em;color:rgba(255,255,255,.28);padding:0 5px}
.mode-selector .hud-btn{height:30px;padding:0 8px;border-color:transparent;background:transparent;transition:border-color .25s ease,color .25s ease,background .25s ease,box-shadow .25s ease}
body.normal-mode .hud-normal{color:#fe7c0d;border-color:rgba(254,124,13,.6);background:rgba(254,124,13,.08);box-shadow:0 0 18px rgba(254,124,13,.08)}
/* Critical fix: VIDEO is active only in video mode, never merely because ULTRA also uses music-mode. */
body.music-mode:not(.ultra-mode) .hud-music{color:#54e8ff!important;border-color:rgba(84,232,255,.65)!important;background:rgba(84,232,255,.08)!important;box-shadow:0 0 22px rgba(84,232,255,.13)!important}
body.ultra-mode .hud-music{color:inherit!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important}
body.ultra-mode .hud-ultra{color:#fff!important;border-color:#fff!important;background:rgba(255,255,255,.08)!important;box-shadow:0 0 28px rgba(255,255,255,.18),inset 0 0 18px rgba(165,140,255,.08)!important}
body.normal-mode .hud-ultra,body.normal-mode .hud-music,body.music-mode:not(.ultra-mode) .hud-ultra,body.music-mode:not(.ultra-mode) .hud-normal,body.ultra-mode .hud-normal{opacity:.55}

/* Each mode has its own atmosphere, not just a different audio track. */
body.normal-mode .hud{background:linear-gradient(180deg,rgba(5,5,5,.34),transparent)}
body.music-mode:not(.ultra-mode) .hud{background:linear-gradient(180deg,rgba(9,4,24,.42),transparent)}
body.music-mode:not(.ultra-mode) .ticker{border-color:rgba(84,232,255,.13)}
body.music-mode:not(.ultra-mode) .progress-rail i{background:linear-gradient(#54e8ff,#a58cff)!important;box-shadow:0 0 14px #54e8ff}
body.music-mode:not(.ultra-mode) .fx-bars i{background:linear-gradient(180deg,rgba(84,232,255,.55),rgba(165,140,255,.05))}
body.music-mode:not(.ultra-mode) .scene-glyph{color:#a58cff!important}
body.ultra-mode .hud{background:linear-gradient(180deg,rgba(0,0,0,.58),transparent)}
body.ultra-mode .ticker{border-color:rgba(255,255,255,.16)}
body.ultra-mode .progress-rail i{background:#fff!important;box-shadow:0 0 18px #fff!important}

.mode-switch-fx{position:fixed;inset:0;z-index:180;pointer-events:none;visibility:hidden;overflow:hidden}
.mode-switch-fx i,.mode-switch-fx b,.mode-switch-fx span{position:absolute;display:block;will-change:transform,opacity}
.mode-switch-fx i{inset:0;background:radial-gradient(circle at 50% 50%,var(--mode-a,#fff),transparent 16%,transparent 55%);opacity:0}
.mode-switch-fx b{left:50%;top:50%;width:2px;height:2px;border:1px solid var(--mode-a,#fff);border-radius:50%;box-shadow:0 0 45px var(--mode-a,#fff);opacity:0}
.mode-switch-fx span{left:-10%;right:-10%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--mode-a,#fff),var(--mode-b,#fff),transparent);box-shadow:0 0 24px var(--mode-a,#fff);opacity:0}
.mode-switch-fx.switching{visibility:visible}
.mode-switch-fx.switching i{animation:modeFlash .52s ease-out}
.mode-switch-fx.switching b{animation:modeRing .72s cubic-bezier(.14,.76,.24,1)}
.mode-switch-fx.switching span{animation:modeScan .58s cubic-bezier(.2,.8,.2,1)}
@keyframes modeFlash{0%{opacity:.32;transform:scale(.45)}35%{opacity:.11}100%{opacity:0;transform:scale(3.2)}}
@keyframes modeRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(900)}}
@keyframes modeScan{0%{opacity:0;transform:translateY(-28vh) scaleX(.1)}30%{opacity:.75}100%{opacity:0;transform:translateY(28vh) scaleX(1.3)}}

@media(max-width:960px){
  .mode-selector-label{display:none}.mode-selector{gap:2px;padding:2px}.mode-selector .hud-btn{width:32px;min-width:32px;padding:0;justify-content:center}.mode-selector .hud-btn span{display:none!important}
}
@media(max-width:520px){
  .mode-selector{position:fixed;left:50%;top:58px;transform:translateX(-50%);z-index:111;background:rgba(0,0,0,.42);backdrop-filter:blur(8px)}
  .hud{height:58px}.music-mode-top{top:102px}.ultra-label{top:92px}
}