/* Each atmosphere is contained by its own slide. */
.hero-scene{overflow:hidden;isolation:isolate}
.hero-scene[hidden]{display:none!important}
.scene-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.zone-mist{position:absolute;inset:38% -20% -18%;background:radial-gradient(ellipse at 64% 73%,#cbd8d020,transparent 48%),radial-gradient(ellipse at 38% 89%,#8da8a521,transparent 43%);filter:blur(16px);animation:zone-fog 22s ease-in-out infinite alternate}
.zone-mist-front{inset:64% -25% -16%;background:radial-gradient(ellipse at 73% 54%,#d7e0d532,transparent 42%),radial-gradient(ellipse at 30% 77%,#a7bfb020,transparent 38%);animation-duration:17s;animation-delay:-8s}
.zone-apparition{--ghost-distance:-175px;--ghost-rise:-28px;position:absolute;left:71%;bottom:16%;width:clamp(96px,9vw,130px);aspect-ratio:2/3;opacity:0;transform-origin:50% 100%;animation:zone-walk 26s linear infinite;will-change:transform,opacity}
.hero-scene .ghost-figure{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform-origin:50% 95%;animation:ghost-step 3.8s ease-in-out infinite;filter:brightness(1.14)}
@keyframes zone-fog{from{transform:translate3d(-5%,3%,0);opacity:.45}to{transform:translate3d(5%,-2%,0);opacity:.8}}
@keyframes zone-walk{
 0%{opacity:0;transform:translate3d(0,0,0) scale(1)}
 8%{opacity:.1}
 18%{opacity:.62}
 31%{opacity:.48}
 43%{opacity:.65}
 56%{opacity:.35}
 70%,100%{opacity:0;transform:translate3d(var(--ghost-distance),var(--ghost-rise),0) scale(.79)}
}
@keyframes ghost-step{0%,100%{transform:translate3d(0,0,0) rotate(-.55deg)}25%{transform:translate3d(.6px,-1.5px,0) rotate(.35deg)}50%{transform:translate3d(0,0,0) rotate(.55deg)}75%{transform:translate3d(-.6px,-1.5px,0) rotate(-.35deg)}}

/* A lightweight CSS snowfall remains available if canvas is unavailable. */
.pass-snow{position:absolute;inset:-190px;background-image:radial-gradient(1px 1px at 12% 14%,#f0f6ffe0 65%,transparent 85%),radial-gradient(1.4px 1px at 38% 43%,#d4e5f4bb 55%,transparent 85%),radial-gradient(1px 1px at 81% 25%,#e2eeffe0 65%,transparent 85%),radial-gradient(2px 1px at 63% 79%,#f3f8ffd9 60%,transparent 85%),radial-gradient(1px 1px at 22% 91%,#d5e6f5d9 65%,transparent 85%),radial-gradient(1.5px 1px at 94% 62%,#e2eeffb3 60%,transparent 85%);background-size:160px 120px;animation:pass-snow-fallback 1.8s linear infinite}
.pass-snow.is-far{opacity:.5;background-size:110px 90px;animation-name:pass-snow-far;animation-duration:3s}
.pass-blizzard{position:absolute;inset:0;width:100%;height:100%;display:block}
.pass-atmosphere.has-live-snow .pass-snow{display:none}
.pass-spindrift{position:absolute;inset:12% -30% -20%;background:radial-gradient(ellipse at 75% 57%,#e1edf759,transparent 46%),radial-gradient(ellipse at 23% 84%,#dbe9f038,transparent 39%);filter:blur(13px);animation:pass-gust 9s ease-in-out infinite}
@keyframes pass-snow-fallback{from{transform:translate3d(0,0,0)}to{transform:translate3d(-160px,120px,0)}}
@keyframes pass-snow-far{from{transform:translate3d(0,0,0)}to{transform:translate3d(-110px,90px,0)}}
@keyframes pass-gust{0%,100%{transform:translate3d(5%,3%,0) scale(1);opacity:.24}38%{opacity:.65}65%{transform:translate3d(-7%,-2%,0) scale(1.08);opacity:.85}82%{opacity:.35}}
.hero.motion-paused .scene-atmosphere *{animation-play-state:paused!important}
@media(max-width:760px){.zone-apparition{--ghost-distance:-85px;--ghost-rise:-13px;left:71%;bottom:22%;width:94px}.zone-mist-front{inset:58% -35% -12%}.pass-spindrift{opacity:.55}}
@media(prefers-reduced-motion:reduce){.scene-atmosphere *{animation:none!important}.zone-apparition,.pass-blizzard,.pass-snow{display:none}.zone-mist,.pass-spindrift{opacity:.22}}