.ambience{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}.moon-color{position:absolute;left:57%;top:.8%;width:20.6%;height:7.1%;border-radius:50%;background:#ff936333;mix-blend-mode:color;animation:moon-shift 24s ease-in-out infinite}.lamp{position:absolute;left:var(--x);top:var(--y);width:10%;height:3.33%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#fff6d9 0,#ffe8a5e6 10%,#ffba5799 28%,#ff982f40 48%,transparent 72%);mix-blend-mode:screen;animation:lamp-breathe var(--period, 9s) ease-in-out var(--delay) infinite}.lamp:after{content:'';position:absolute;inset:25%;background:#211326;border-radius:40%;mix-blend-mode:multiply;opacity:0;animation:lamp-dim var(--period, 9s) ease-in-out var(--delay) infinite}.jukebox-light{position:absolute;left:40%;top:37%;width:34%;height:15%;border-radius:48% 48% 8% 8%;background:radial-gradient(ellipse at 50% 40%,transparent 30%,#ffbb5866 63%,transparent 73%);mix-blend-mode:screen;animation:jukebox-breathe 1.8s ease-in-out infinite,jukebox-color 3.2s linear infinite}.bat-flight{position:absolute;left:0;top:var(--bat-y);width:100%;animation:bat-travel var(--bat-time) linear var(--bat-delay) infinite;will-change:transform}.bat-flight img{width:var(--bat-size);display:block;animation:bat-wings .38s ease-in-out var(--wing-delay) infinite;filter:brightness(.2)}.haunted-record{position:absolute;object-fit:contain;width:11%;height:3.7%;filter:drop-shadow(3px 7px 4px #0009);animation:record-float 11s ease-in-out infinite}.record-one{left:24%;top:66.7%}.record-two{left:43%;top:68.5%;width:9%;height:3%;animation-delay:-5s;animation-duration:14s}.screen-film{position:absolute;left:40.8%;top:85.35%;width:34.4%;height:6.2%;overflow:hidden;clip-path:polygon(0 3%,100% 0,100% 100%,0 100%);background:#251d32}.film-frame{position:absolute;inset:0;background-image:url('assets/monster-film.png');background-size:300% auto;background-repeat:no-repeat;background-position:0 50%;opacity:0;animation:film-scene 24s linear infinite;filter:sepia(.22) saturate(.72) brightness(.88)}.film-dracula{opacity:1}.film-frankenstein{background-position:50% 50%;animation-delay:-16s}.film-werewolf{background-position:100% 50%;animation-delay:-8s}.projection{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#f4cda10c 0 1px,transparent 1px 4px);box-shadow:inset 0 0 18px #160d2077;animation:projection-glow 6s ease-in-out infinite}.ghost-audience{position:absolute;left:28%;top:92.8%;width:38%;height:5%;object-fit:contain;object-position:bottom;filter:brightness(0);opacity:0;animation:audience-appear 22s ease-in-out infinite}.world[data-motion="paused"] .ambience *,.world[data-motion="paused"] .ambience *:after,.world[data-away="true"] .ambience *,.world[data-away="true"] .ambience *:after{animation-play-state:paused!important}
@keyframes moon-shift{0%,100%{background:#ffa45144}35%{background:#df648ca6}68%{background:#9d8effa6}}
@keyframes lamp-breathe{0%,100%{opacity:.08}20%,29%,57%,65%{opacity:1}39%,45%{opacity:0}78%,86%{opacity:.12}}
@keyframes lamp-dim{0%,100%{opacity:.65}20%,29%,57%,65%{opacity:0}39%,45%{opacity:.98}78%,86%{opacity:.78}}
@keyframes jukebox-breathe{0%,100%{opacity:.1}50%{opacity:1}}
@keyframes bat-travel{0%{transform:translate(-12%,0) rotate(-3deg)}25%{transform:translate(19%,55%) rotate(2deg)}50%{transform:translate(50%,-45%) rotate(-2deg)}75%{transform:translate(81%,60%) rotate(2deg)}100%{transform:translate(112%,-15%) rotate(-3deg)}}
@keyframes bat-wings{0%,100%{transform:scaleY(.55) rotate(-5deg)}50%{transform:scaleY(1) rotate(5deg)}}
@keyframes record-float{0%,100%{transform:translate(0,0) rotate(-12deg)}25%{transform:translate(-16%,-85%) rotate(18deg)}55%{transform:translate(45%,-145%) rotate(-20deg)}80%{transform:translate(65%,-35%) rotate(15deg)}}
@keyframes film-scene{0%{opacity:0;transform:scale(1)}5%,28%{opacity:1}34%,100%{opacity:0;transform:scale(1.07)}}
@keyframes projection-glow{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes audience-appear{0%,30%,72%,100%{opacity:0;transform:translateY(8%)}40%,60%{opacity:.92;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.ambience *,.ambience *:after{animation:none!important}.bat-flight,.haunted-record,.ghost-audience{display:none}.film-frame{opacity:0}.film-dracula{opacity:1}.moon-color{background:transparent}.jukebox-light{opacity:.2}}

.lamp-dark{position:absolute;left:var(--x);top:var(--y);width:6%;height:2.3%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#100a17f5 0,#130b1be6 27%,#170e2199 45%,transparent 74%);animation:lamp-dim var(--period, 9s) ease-in-out var(--delay) infinite}.lamp:after{display:none}@media(prefers-reduced-motion:reduce){.lamp-dark{opacity:0}}


/* Restore the original tower in front of the moon tint, in the same scene coordinates. */
.tower-foreground{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;clip-path:polygon(75.1% 0,76.2% 0,76.6% 2.4%,77.1% 3.8%,78% 4.2%,77.5% 5.6%,78.5% 7.5%,80.1% 8.9%,79.7% 10%,85% 14.8%,68% 14.8%,73% 10%,72.1% 9%,74.1% 7.5%,74.6% 5.5%,73.5% 4.2%,74.7% 3.8%,74.9% 2.4%);pointer-events:none}


.wind-street{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}


@keyframes jukebox-color{0%,100%{filter:hue-rotate(0deg) saturate(1.6)}25%{filter:hue-rotate(285deg) saturate(1.9)}50%{filter:hue-rotate(225deg) saturate(1.8)}75%{filter:hue-rotate(125deg) saturate(1.7)}}

/* Passing rain showers and distant lightning, above the town and guide. */
.weather{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;background:#111b3500;transition:background 3s}
.weather.raining{background:#111b3530}
.rain{position:absolute;inset:-100px -60px;opacity:0;transition:opacity 3s;background-repeat:repeat;animation:rain-fall .7s linear infinite;animation-play-state:paused}
.rain-far{background-image:linear-gradient(105deg,transparent 47%,#bacde655 49%,#bacde655 50%,transparent 52%);background-size:47px 93px;mask-image:repeating-linear-gradient(0deg,#000 0 22px,transparent 22px 93px)}
.rain-near{background-image:linear-gradient(105deg,transparent 48%,#dfedff88 49%,#dfedff88 50%,transparent 51%);background-size:83px 151px;mask-image:repeating-linear-gradient(0deg,#000 0 37px,transparent 37px 151px);animation-duration:.46s}
.raining .rain{opacity:.6;animation-play-state:running}
.lightning{position:absolute;inset:0;opacity:0;background:linear-gradient(#dee8ff,#afbdde88 45%,#bac9ee44)}
@keyframes rain-fall{from{transform:translate(14px,-93px)}to{transform:translate(-12px,58px)}}
.world[data-motion="paused"] .weather{display:none}
@media(prefers-reduced-motion:reduce){.weather{display:none}}