/* One bounded, user-requested scene. All movement uses transform/opacity. */
.intro{min-height:0;padding-top:32px;padding-bottom:24px}
.intro-copy{max-width:none}
.intro h1{max-width:none}
.haunt-stage{position:relative;height:230px;margin:0 0 25px;overflow:hidden;border-radius:16px;background:#27243d;isolation:isolate;contain:layout paint;--monster-size:166px}
.haunt-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.haunt-stage::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:#6b547f;pointer-events:none}
.haunt-moon{position:absolute;right:16%;top:20px;width:103px;height:103px;border-radius:50%;background:#e7dab4;opacity:.83;overflow:hidden;animation:moon-drift 18s ease-in-out infinite alternate}
.haunt-moon span{position:absolute;inset:-10px -28px 12px 32px;background:#27243d;border-radius:50%}
.forest{position:absolute;inset:10px -4% -12px;background:url('forest-layer.svg') center bottom / 100% 100% no-repeat;transform-origin:center bottom}
.forest-far{opacity:.42;transform:scale(.98);animation:forest-shift 23s ease-in-out infinite alternate}
.forest-near{inset:20px -9% -24px;opacity:.88;animation:forest-shift 18s ease-in-out -7s infinite alternate-reverse}
.haunt-fog{position:absolute;left:-20%;right:-20%;height:80px;border-radius:50%;background:#c1a6dc;filter:blur(25px);opacity:.13;pointer-events:none;animation:fog-cross 14s ease-in-out infinite alternate}
.fog-back{top:57%;animation-delay:-5s}
.fog-front{bottom:-48px;height:103px;opacity:.17;animation-duration:20s;animation-direction:alternate-reverse}
.monster-route{position:absolute;left:18px;right:18px;top:14px;height:180px}
.monster-flight{position:absolute;left:0;top:0;width:calc(100% - var(--monster-size));height:180px;animation:monster-cross 8s cubic-bezier(.45,0,.55,1) infinite alternate}
.monster-bob{width:var(--monster-size);height:auto;animation:monster-bob 2.6s ease-in-out infinite}
.monster-bob img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 6px #0c091744)}
.haunt-companions{position:absolute;right:4%;bottom:-17px;width:158px;height:auto;opacity:.84}
.haunt-bat{position:absolute;width:40px;height:21px;top:30px;left:5%;background:#a68abf;clip-path:polygon(0 20%,24% 39%,34% 0,50% 38%,66% 0,76% 39%,100% 20%,84% 81%,66% 67%,50% 100%,34% 67%,16% 81%);opacity:.75;animation:bat-cross 12s linear infinite}
.bat-two{width:27px;height:14px;top:65px;animation-duration:15s;animation-delay:-8s;opacity:.6}
.bat-three{width:33px;height:18px;top:101px;animation-duration:19s;animation-delay:-3s;opacity:.47}
.haunt-leaf{position:absolute;top:-22px;width:12px;height:19px;background:#d48e45;border-radius:2px 12px 2px 12px;opacity:.8;animation:leaf-fall 8s linear infinite}
.leaf-one{left:8%;animation-delay:-2s}.leaf-two{left:28%;animation-delay:-6s;animation-duration:11s;background:#a06a4b}.leaf-three{left:48%;animation-delay:-1s;animation-duration:10s}.leaf-four{left:66%;animation-delay:-7s;animation-duration:12s;background:#a06a4b}.leaf-five{left:81%;animation-delay:-4s;animation-duration:9s}.leaf-six{left:92%;animation-delay:-9s;animation-duration:13s;background:#b9a363}
.motion-toggle{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:7px;min-height:40px;padding:8px 12px;border:1px solid #78668b;border-radius:9px;background:#1a1627;color:#f5eddf;font:650 12px/1.3 ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.motion-toggle:hover{background:#3a2b45}.motion-toggle svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.motion-toggle .play-mark{display:none}.motion-toggle[aria-pressed=true] .play-mark{display:initial}.motion-toggle[aria-pressed=true] .pause-mark{display:none}
.haunt-stage.is-paused .haunt-art *{animation-play-state:paused!important}
@keyframes monster-cross{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes monster-bob{0%,100%{transform:translateY(11px) rotate(-7deg)}50%{transform:translateY(-4px) rotate(6deg)}}
@keyframes forest-shift{from{transform:translateX(-10px) scale(1.025)}to{transform:translateX(13px) scale(1.05)}}
@keyframes moon-drift{from{transform:translateY(0)}to{transform:translateY(9px)}}
@keyframes fog-cross{from{transform:translateX(-8%) scaleX(.85);opacity:.11}to{transform:translateX(9%) scaleX(1.12);opacity:.21}}
@keyframes bat-cross{0%{transform:translate(-60px,8px) rotate(-7deg)}40%{transform:translate(390px,-12px) rotate(5deg)}100%{transform:translate(1100px,16px) rotate(-5deg)}}
@keyframes leaf-fall{0%{transform:translate(0,-20px) rotate(0);opacity:0}12%{opacity:.8}85%{opacity:.65}100%{transform:translate(70px,285px) rotate(280deg);opacity:0}}
@media(max-width:650px){.intro{padding-top:27px;padding-bottom:20px}.intro h1{max-width:none}.haunt-stage{height:180px;--monster-size:126px;margin-bottom:20px}.monster-route{top:0;left:10px;right:10px}.monster-flight{animation-duration:5.5s}.haunt-moon{width:76px;height:76px;right:12%;top:17px}.haunt-companions{width:112px;right:0;bottom:-12px;opacity:.72}.motion-toggle{font-size:11px;left:9px;bottom:9px;min-height:40px;padding:8px 10px}.haunt-leaf{width:9px;height:15px}.forest-near{inset:8px -15% -17px}.haunt-fog{filter:blur(19px)}.leaf-five,.leaf-six,.bat-three{display:none}}
@media(prefers-reduced-motion:reduce){.haunt-art *{animation:none!important;transition:none!important}.monster-flight{transform:translateX(38%)}.monster-bob{transform:rotate(-4deg)}.haunt-leaf{display:none}.bat-one{transform:translate(120px,8px)}.bat-two{transform:translate(220px,15px)}.bat-three{transform:translate(470px,0)}}
