.threshold{--camera-x:0;--camera-y:0;--travel:0;perspective:1200px}
.hero-media{inset:-6%;transform:translate3d(calc(var(--camera-x)*-24px),calc(var(--camera-y)*-15px + var(--travel)*65px),0) rotateX(calc(var(--camera-y)*.65deg)) rotateY(calc(var(--camera-x)*-.9deg));will-change:transform}
.hero-art{animation:slow-camera 24s ease-in-out infinite alternate;transform-origin:62% 52%}
@keyframes slow-camera{from{transform:scale(1)}to{transform:scale(1.06) translateX(-.6%)}}
.atmosphere{transform:translate3d(calc(var(--camera-x)*30px),calc(var(--camera-y)*18px),0);animation:mist-drift 13s ease-in-out infinite alternate;background:radial-gradient(ellipse at 70% 40%,#ba886e20,transparent 42%),radial-gradient(ellipse at 25% 75%,#91b6aa15,transparent 35%)}
@keyframes mist-drift{to{opacity:.35}}
.resonance-light{position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 68% 45%,#ac69d918,transparent 36%);transform:translate3d(calc(var(--camera-x)*42px),calc(var(--camera-y)*22px),0);animation:light-breathe 7s ease-in-out infinite alternate}
@keyframes light-breathe{to{opacity:.25}}
.hero-copy{animation:none!important;translate:calc(var(--camera-x)*7px) calc(var(--camera-y)*4px)}
.world-caption{translate:calc(var(--camera-x)*14px) calc(var(--camera-y)*8px)}
.resonance-band{position:absolute;inset:0;opacity:0;pointer-events:none;background:url('assets/threshold.png') 65% 49%/cover;clip-path:polygon(0 41%,100% 38%,100% 44%,0 47%)}
.second .resonance-band{background-image:url('assets/expedition.png');background-position:65% 57%}
.resonating .resonance-band{animation:band-shift 1.25s ease-out}
@keyframes band-shift{0%{opacity:0;transform:translateX(0)}15%{opacity:.38;transform:translateX(11px);filter:hue-rotate(19deg)}40%{opacity:.26;transform:translateX(-6px)}75%{opacity:.12;transform:translateX(3px)}100%{opacity:0;transform:none}}
.resonating .enter,.resonating .eyebrow{animation:interface-shift 1.1s ease-out}
@keyframes interface-shift{20%{translate:3px 0;text-shadow:-3px 0 #c898ef55,3px 0 #a9dcce44}55%{translate:-1px 0}100%{translate:0 0;text-shadow:none}}
h1,h2,#panel h3{position:relative}
.decode-glyphs{position:absolute;inset:0;display:flex;align-items:flex-start;gap:.12em;overflow:hidden;pointer-events:none;opacity:0;mix-blend-mode:screen}
.decode-glyphs i{flex:0 0 .8em;width:.8em;height:1em;background-image:url('assets/glyphs.png');background-size:4.8em 7em;background-position:calc(var(--glyph)*-.8em) 0;filter:drop-shadow(0 0 5px #b786df)}
.decoding{animation:text-resolve 1.35s ease both}
.decoding .decode-glyphs{animation:glyph-resolve 1.15s ease both}
.decoding .decode-glyphs i{animation:glyph-fragment .9s ease both;animation-delay:var(--delay)}
@keyframes text-resolve{0%,15%{color:transparent;text-shadow:0 0 12px #bfdbc844}65%{color:inherit;text-shadow:2px 0 #9b6cb83d}100%{text-shadow:none}}
.decoding em{animation:em-resolve 1.35s ease both}
@keyframes em-resolve{0%,15%{opacity:0}100%{opacity:1}}
@keyframes glyph-resolve{0%,25%{opacity:.9}100%{opacity:0}}
@keyframes glyph-fragment{0%{translate:7px 0}100%{translate:0 -6px;opacity:0}}
.assembling:before,.assembling:after,.assembling .corner-extra:before,.assembling .corner-extra:after{animation:corner-lock 1s ease both}
@keyframes corner-lock{from{opacity:0;scale:1.8}to{opacity:1;scale:1}}
.assembling .console-top{animation:briefing-line .9s ease both}
.assembling .map{animation:briefing-line 1.1s .1s ease both}
.assembling .briefing-details{animation:briefing-line .9s .25s ease both}
@keyframes briefing-line{from{opacity:.1;translate:0 13px}to{opacity:1;translate:0 0}}
.chapter-nav .nav-symbol{transition:transform .65s cubic-bezier(.2,.8,.2,1),color .4s,text-shadow .4s}
.chapter-nav a.active .nav-symbol{text-shadow:0 0 14px #bce3d3;transform:rotate(90deg) scale(1.2)}
.enter:after,.next-stage:after,.tabs button:after{transition:width .65s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.enter:hover:after,.next-stage:hover:after,.tabs button:hover:after{box-shadow:0 0 9px #abd7c6}
@media(max-width:700px),(pointer:coarse){.hero-media{transform:none;inset:-3%}.hero-copy,.world-caption{translate:none}.hero-art{animation-duration:32s}.resonance-band{display:none}.resonance-light{transform:none}}
body.reduced .hero-media{transform:none}
body.reduced .hero-copy,body.reduced .world-caption{translate:none}
body.reduced .decode-glyphs,body.reduced .resonance-band{display:none}
@media(prefers-reduced-motion:reduce){.hero-media{transform:none}.hero-copy,.world-caption{translate:none}.decode-glyphs,.resonance-band{display:none}}