/* Local spatial study: a fixed viewing window into almost-black open space. */
html[data-spatial] body{background:#030405}
html[data-spatial] #atmosphere{opacity:1}
html[data-spatial] .header{background:linear-gradient(180deg,#030405ed,#0304058c 65%,transparent)}
html[data-spatial] .header [data-depth]{transform:none!important}
html[data-spatial] #hero-title{animation:none;transform-origin:50% 50%;text-shadow:0 16px 32px #0008;z-index:5}
html[data-spatial] .film-home{animation:none;perspective:none;transform-origin:center}
html[data-spatial] .film-frame{transform-style:flat;border-color:#ffffff30;box-shadow:0 28px 55px #0009,0 4px 12px #0007}
html[data-spatial] .film-frame:before{inset:-5px;border-color:#ffffff0b;transform:none}
html[data-spatial] .film-caption{transform-origin:center}
html[data-spatial] #raccoon-world{opacity:.5;filter:blur(.7px)}
html[data-spatial] .footer{background:transparent}
html[data-spatial] .window-glass{position:fixed;inset:0;z-index:9;pointer-events:none;box-shadow:inset 0 0 65px 12px #0005}
/* Cover the full viewing window. The header is a separate, higher screen layer. */
html[data-spatial] .spatial-focus{position:fixed;inset:0;z-index:6;pointer-events:none;--focus-left:0;--focus-right:0}
html[data-spatial] .focus-side{position:absolute;top:0;bottom:0;width:84%;pointer-events:none;--focus-direction:to right}
html[data-spatial] .focus-left{left:0}
html[data-spatial] .focus-right{right:0;--focus-direction:to left}
html[data-spatial] .focus-left>i{opacity:var(--focus-left)}
html[data-spatial] .focus-right>i{opacity:var(--focus-right)}
html[data-spatial] .focus-side:not([data-active]){visibility:hidden}
html[data-spatial] .focus-side>i{position:absolute;inset:0;pointer-events:none}
html[data-spatial] .focus-blur{-webkit-mask-image:linear-gradient(var(--focus-direction),#000 0%,#000 var(--solid),transparent var(--fade));mask-image:linear-gradient(var(--focus-direction),#000 0%,#000 var(--solid),transparent var(--fade));-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
html[data-spatial] .focus-blur-1{--blur:2px;--solid:22%;--fade:100%}
html[data-spatial] .focus-blur-2{--blur:5px;--solid:16%;--fade:84%}
html[data-spatial] .focus-blur-3{--blur:10px;--solid:8%;--fade:62%}
html[data-spatial] .focus-shade{background:linear-gradient(var(--focus-direction),#000000a6 0%,#0000006b 24%,#00000029 57%,transparent 100%)}
html[data-spatial] .reveal{opacity:1;transform:none;transition:color .2s}
html[data-spatial] .hero-eyebrow{color:#a6a8ad}
html[data-spatial] .spatial-note{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:10;pointer-events:none;display:flex;align-items:center;gap:9px;color:#afb2b8;font:9px var(--mono);letter-spacing:1.1px;white-space:nowrap;opacity:.7}
html[data-spatial] .spatial-note:before{content:'';width:4px;height:4px;border:1px solid #ff8965;border-radius:50%}
html[data-spatial] .spatial-note .mobile-note{display:none}
body.contact-active .window-glass,body.contact-active .spatial-note,body.contact-active .spatial-focus{visibility:hidden}
@media(max-width:700px){
  html[data-spatial] .focus-blur-1{--blur:1.3px}
  html[data-spatial] .focus-blur-2{--blur:3px}
  html[data-spatial] .focus-blur-3{--blur:6px}
  html[data-spatial] #hero-title{left:8%;width:84%;font-size:12.8vw}
  html[data-spatial] .film-home{left:10%;width:80%}
  html[data-spatial] .window-glass{box-shadow:inset 0 0 32px 6px #0005}
  html[data-spatial] .spatial-note{bottom:12px;font-size:8px;letter-spacing:.8px}
  html[data-spatial] .spatial-note .desktop-note{display:none}
  html[data-spatial] .spatial-note .mobile-note{display:inline}
}
@media(prefers-reduced-motion:reduce){
  html[data-spatial] .window-glass,html[data-spatial] .spatial-note,html[data-spatial] .spatial-focus{display:none}
  html[data-spatial] #hero-title,html[data-spatial] .film-home,html[data-spatial] .film-caption{transform:none!important}
}