/* CSS owns the continuous base and grain; the transparent canvas only adds light.
   The large viewport height stays stable while mobile browser controls move. */
.ambient-field{--ambient-x:0;--ambient-y:0;position:fixed;inset:0 0 auto;height:100vh;height:100lvh;z-index:0;background:var(--site-background,#050506);overflow:hidden;pointer-events:none;contain:paint;opacity:1;visibility:visible;transition:opacity 1200ms ease}
#ambient-canvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1200ms ease}
.ambient-ready #ambient-canvas{opacity:1}
.ambient-light{position:absolute;z-index:0;opacity:.22;inset:-18%;transform:translate3d(calc(var(--ambient-x)*22px),calc(var(--ambient-y)*18px),0)}
.ambient-light::before,.ambient-light::after{content:'';position:absolute;inset:-10%;background-repeat:no-repeat;will-change:transform}
.ambient-light::before{background-image:radial-gradient(ellipse at 24% 38%,#c5c2ce25,transparent 48%),radial-gradient(ellipse at 76% 69%,#9b8baf1e,transparent 45%);animation:ambient-drift 38s ease-in-out infinite alternate}
.ambient-light::after{background-image:radial-gradient(ellipse at 65% 21%,#e4e0da16,transparent 42%);animation:ambient-drift 47s ease-in-out -13s infinite alternate-reverse}
.ambient-grain{position:absolute;z-index:2;inset:0;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:180px 180px}
.ambient-in-tunnel{opacity:0}
.ambient-ready .ambient-light::before,.ambient-ready .ambient-light::after{animation-play-state:paused}
@keyframes ambient-drift{from{transform:translate3d(-3%,1%,0) rotate(-4deg) scale(1)}to{transform:translate3d(4%,-3%,0) rotate(6deg) scale(1.06)}}
html.intro-pending .ambient-field,body.intro-playing:not(.intro-sky-in) .ambient-field{visibility:hidden;opacity:0}
html.intro-pending body.intro-playing.intro-sky-in .ambient-field{visibility:visible;opacity:1}
html.intro-pending body.intro-playing.intro-sky-in .ambient-in-tunnel{opacity:0}
html.intro-pending .ambient-light::before,html.intro-pending .ambient-light::after,.ambient-paused .ambient-light::before,.ambient-paused .ambient-light::after{animation-play-state:paused}
html.intro-pending body.intro-sky-in .ambient-light::before,html.intro-pending body.intro-sky-in .ambient-light::after{animation-play-state:running}
html.intro-pending body.intro-sky-in .ambient-paused .ambient-light::before,html.intro-pending body.intro-sky-in .ambient-paused .ambient-light::after{animation-play-state:paused}
@media(max-width:760px){.ambient-light{inset:-10%}.ambient-grain{opacity:.08}}
@media(prefers-reduced-motion:reduce){.ambient-field,#ambient-canvas{transition:none}.ambient-light{transform:none}.ambient-light::before,.ambient-light::after{animation:none;will-change:auto}}