/* Awakening Chamber scene. Back to front: chamber, beams, floor rings (SVG), terminal, dais, cable pulse, shadows, machine + CRT, fog, dust.
   Layout is driven by --mw (machine width). Everything else is derived from it so the layers stay registered at any size. */
:root{--mw:min(32vw,54vh);--pw:calc(var(--mw)*3.0);--ph:calc(var(--pw)*.5625);--pb:-9vh;--px:66%;--feet:calc(var(--pb) + var(--ph)*.545);--mb:calc(var(--feet) - var(--mw)*.04)}
:root{--cg:url(img/cable-glow.webp)}
.eg-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:var(--bg);contain:strict}
.eg-zoom{position:absolute;inset:0;will-change:transform;transform-origin:0 0}
.L{position:absolute;pointer-events:none;user-select:none;translate:calc(var(--mx,0)*var(--d,0)*1px) calc(var(--my,0)*var(--d,0)*.6px)}
.L img{display:block;width:100%;height:100%;max-width:none}
.bg{inset:-3% -3%;width:106%;height:106%;--d:6}.bg img{object-fit:cover;object-position:50% 30%}
.bg::after{content:"";position:absolute;inset:0;background:rgba(2,5,4,.42)}
.beams{inset:0;width:100%;height:100%;opacity:0;--d:12}.beams img{object-fit:cover}
.floor{left:var(--px);width:calc(var(--pw)*.92);aspect-ratio:5/2;bottom:calc(var(--pb) + var(--ph)*.2);margin-left:calc(var(--pw)*-.46);opacity:0;--d:14;transition:opacity 1.6s ease}
.floor svg{width:100%;height:100%;overflow:visible}
.floor ellipse{fill:none;stroke:var(--acc);vector-effect:non-scaling-stroke}
.floor .e1{stroke-width:1.5;stroke-dasharray:3 9}
.floor .e2{stroke-width:1;stroke-opacity:.55;stroke-dasharray:60 14 6 14}
.floor .e3{stroke-width:1;stroke-opacity:.3}
@keyframes egdash{to{stroke-dashoffset:-600}}
.eg-on .floor{opacity:.55}
.eg-on:not(.eg-lite) .floor svg{animation:egbreathe 7s ease-in-out infinite}
@keyframes egbreathe{50%{opacity:.55}}
.eg-on:not(.eg-lite) .floor svg{animation:egbreathe 7s ease-in-out infinite}
@keyframes egbreathe{50%{opacity:.55}}
.term-b{left:calc(var(--px) + var(--pw)*.262);width:calc(var(--mw)*.5);bottom:calc(var(--feet) + var(--mw)*.02);margin-left:calc(var(--mw)*-.25);opacity:.92;--d:22}
.term-b img{opacity:.82}
.platform{left:var(--px);width:var(--pw);bottom:var(--pb);margin-left:calc(var(--pw)*-.5);--d:16}
.platform img{height:auto}
.cpulse{left:var(--px);width:var(--pw);aspect-ratio:2736/1536;bottom:var(--pb);margin-left:calc(var(--pw)*-.5);--d:16;opacity:0;transition:opacity 1.4s ease}
.cpulse img{width:100%;height:100%;display:block}
.eg-on .cpulse{opacity:.42}
.cpulse .wv{position:absolute;inset:0;display:none;-webkit-mask-image:var(--cg);mask-image:var(--cg);-webkit-mask-size:100% 100%;mask-size:100% 100%;overflow:hidden}
.cpulse .wv i{position:absolute;left:50%;top:41%;width:104%;aspect-ratio:2/1;background:radial-gradient(closest-side,transparent 78%,rgba(190,255,230,.95) 92%,transparent 100%);transform:translate(-50%,-50%) scale(.04);opacity:0}
.eg-pulse .cpulse .wv{display:block}
.eg-pulse .cpulse .wv i{animation:egwave 13s ease-out infinite}
@keyframes egwave{0%{transform:translate(-50%,-50%) scale(.04);opacity:1}24%{transform:translate(-50%,-50%) scale(1.25);opacity:1}30%,100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}
.shadow{left:var(--px);width:calc(var(--mw)*1.35);height:calc(var(--mw)*.3);bottom:calc(var(--feet) - var(--mw)*.12);margin-left:calc(var(--mw)*-.675);--d:20;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);}
.contact{left:var(--px);width:calc(var(--mw)*.98);height:calc(var(--mw)*.15);bottom:calc(var(--feet) - var(--mw)*.065);margin-left:calc(var(--mw)*-.49);--d:21;background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.5) 60%,transparent);}
.reflect{left:var(--px);width:calc(var(--mw)*1.2);height:calc(var(--mw)*.3);bottom:calc(var(--feet) - var(--mw)*.12);margin-left:calc(var(--mw)*-.6);--d:21;background:radial-gradient(closest-side,rgba(82,255,184,.34),rgba(82,255,184,.08) 60%,transparent);opacity:calc(var(--glow,0)*.85)}
.glow{left:var(--px);width:calc(var(--mw)*1.7);aspect-ratio:1;bottom:calc(var(--mb) - var(--mw)*.1);margin-left:calc(var(--mw)*-.85);--d:22;background:radial-gradient(closest-side,rgba(82,255,184,.22),rgba(82,255,184,.06) 55%,transparent);opacity:calc(var(--glow,0)*.8)}
.machine{left:var(--px);width:var(--mw);bottom:var(--mb);margin-left:calc(var(--mw)*-.5);aspect-ratio:1500/1579;--d:28}
.machine picture,.machine>picture>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.spill{position:absolute;inset:0;pointer-events:none;opacity:calc(var(--glow,0)*.55);
 background:radial-gradient(ellipse 46% 40% at 41% 45%,rgba(82,255,184,.5),rgba(82,255,184,.14) 55%,transparent 80%);
 -webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.led{position:absolute;left:57.7%;top:65.3%;width:3.4%;aspect-ratio:1.5;transform:translate(-50%,-50%);border-radius:30%;background:radial-gradient(closest-side,rgba(120,255,200,.95),rgba(82,255,184,.35) 60%,transparent);opacity:0;transition:opacity .5s}
.eg-on .led{opacity:.9;animation:egled 3.4s ease-in-out infinite}
@keyframes egled{50%{opacity:.5}}
.crt{position:absolute;left:0;top:0;width:640px;height:480px;transform-origin:0 0;pointer-events:none;border-radius:22px / 26px;background:#000}
.fog{left:-10%;width:130%;bottom:-4%;height:48%;opacity:.5;--d:36}.fog img{object-fit:cover}
.eg-drift .fog img{animation:egfog 34s ease-in-out infinite alternate}
@keyframes egfog{to{transform:translate3d(-7%,0,0)}}
#dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#dust i{position:absolute;bottom:-6px;width:var(--s);height:var(--s);border-radius:50%;background:rgb(140,255,205);opacity:0;animation:egrise var(--t) linear var(--dl) infinite}
@keyframes egrise{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:var(--o)}90%{opacity:var(--o)}100%{transform:translate3d(18px,-108vh,0);opacity:0}}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 52%,rgba(2,4,3,.72) 100%),linear-gradient(90deg,rgba(3,6,5,.74) 0,rgba(3,6,5,.26) 30%,transparent 48%)}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);opacity:.5}
.dim{position:absolute;inset:0;pointer-events:none;background:#020504;opacity:0;transition:opacity .9s ease}
.flash{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#c9ffe9,rgba(82,255,184,.6) 30%,#010403 78%)}
.eg-lite .floor .e1,.eg-lite .floor .e2,.eg-lite .led,.eg-lite .eg-drift .fog img{animation:none}
.eg-lite .cpulse .wv{display:none}
.eg-lite #dust{display:none}
@media (max-width:820px){
 :root{--mw:min(78vw,34svh);--pw:calc(var(--mw)*3.0);--pb:-4vh;--px:50%}
 .vig{background:radial-gradient(ellipse at 50% 60%,transparent 55%,rgba(2,4,3,.7) 100%),linear-gradient(180deg,rgba(3,6,5,.78) 0,rgba(3,6,5,.3) 42%,transparent 55%)}
 :root{--cg:url(img/cable-glow-m.webp)}
 .term-b{display:none}#dust{display:none}.cpulse .wv{display:none!important}
}
@media (prefers-reduced-motion:reduce){.floor .e1,.floor .e2,.led,.fog img,.cpulse .wv i,#dust i{animation:none!important}.floor,.cpulse,.dim{transition:none}}
