.hero-shade,.scene-shade{pointer-events:none}
.hero-image:has(video){inset:0;animation:none;translate:none;transform:none}
.hero-image .media-toggle,.hero-image .media-retry{bottom:78px;right:4.4%}
.scene-hero:has(video) .scene-image{animation-play-state:paused}
.hero h1{animation:titleUnveil 1.3s var(--ease) both}
.scene-hero .scene-image{animation:sceneDrift 24s ease-in-out infinite alternate;transform-origin:60% 40%}
.button.primary{position:relative;overflow:hidden}
.button.primary:before{content:'';position:absolute;inset:-100% -35%;background:linear-gradient(110deg,transparent 40%,#f8dda61a 50%,transparent 60%);transform:translateX(-100%);pointer-events:none}
.button.primary:hover:before{animation:goldPass .7s ease-out}
.atlas-plane svg path{stroke-dasharray:5 7;animation:constellationFlow 40s linear infinite}
#transition{background:#080d14;overflow:hidden}
#transition:before{content:'';position:absolute;inset:0;background:linear-gradient(#080d1444,#080d1466),url('/dream/assets/images/hero.webp') 71% 50%/cover;opacity:0;transform-origin:72% 43%}
#transition.active:before{animation:passThrough .7s cubic-bezier(.25,.1,.5,1) both}
#transition>span{position:relative;z-index:1;color:#e8dfcb;text-shadow:0 2px 20px #000;letter-spacing:4px}
.hero-image,.stars i,.scene-hero .scene-image,.museum-object img,.scanline{animation-play-state:paused}
.is-visible .hero-image,.is-visible .stars i,.scene-hero.is-visible .scene-image,.museum-object.is-visible img,.is-visible .scanline{animation-play-state:running}
html[data-hidden="true"] *,html[data-hidden="true"] *:before,html[data-hidden="true"] *:after{animation-play-state:paused!important}
.scene-overview{position:relative;align-self:stretch;width:100%;display:flex;flex-direction:column;justify-content:center}
.scene-overview img{width:100%;height:auto;object-fit:contain}
.scene-overview small{display:block;text-align:center;padding:15px;color:var(--muted);font-size:11px;letter-spacing:2px}
.inspection-map>img{aspect-ratio:1672/941;object-fit:contain}
.clue-crop>img{object-position:var(--cx) var(--cy)}
@keyframes titleUnveil{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(12px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes sceneDrift{to{transform:scale(1.045)}}
@keyframes goldPass{to{transform:translateX(100%)}}
@keyframes constellationFlow{to{stroke-dashoffset:-180}}
@keyframes passThrough{0%{opacity:0;transform:scale(1)}25%{opacity:.7}75%{opacity:1}100%{opacity:.45;transform:scale(1.38)}}
@media(prefers-reduced-motion:reduce){html:not([data-motion="standard"]) .hero h1,html:not([data-motion="standard"]) .scene-hero .scene-image{animation:none}}
@media(max-width:430px){.brand span{font-size:19px;letter-spacing:2px}.brand small{font-size:6px;letter-spacing:1px}}
@media(max-width:350px){.header{padding:0 5%;gap:15px}.brand span{font-size:18px;letter-spacing:1px}.brand small{display:none}.hero h1{font-size:43px}.hero-actions{gap:12px}.hero .english-title{font-size:10px;letter-spacing:1px}.chain-card{padding:17px}.chain-relics span{font-size:11px}}