/* A lively evening city with Bingen accents, selected by the shared theme. */
.city-night { display: none; width: 100%; height: auto; overflow: visible; }
.city-night-copy { display: none; }
[data-theme="dark"] .city-map, [data-theme="dark"] .city-day-copy { display: none; }
[data-theme="dark"] .city-night { display: block; }
[data-theme="dark"] .city-night-copy { display: inline-flex; }

.night-star { animation: night-starlight 7s ease-in-out infinite; }
.night-star:nth-child(3n) { animation-delay: -2.5s; animation-duration: 9s; }
.night-star:nth-child(3n + 2) { animation-delay: -5s; }
.night-window { animation: night-window-light 12s ease-in-out infinite; }
.night-moon { animation: night-moon-drift 14s ease-in-out infinite; }
.night-cloud { animation: night-cloud-drift 31s ease-in-out infinite; }
.night-cloud-far { animation-duration: 43s; animation-delay: -18s; animation-direction: reverse; }
.night-shooting-star { opacity: 0; animation: night-comet 19s linear infinite; animation-delay: -7s; }
.night-ferris-wheel { transform-box: view-box; transform-origin: 380px 167px; animation: night-wheel-turn 42s linear infinite; }
.night-gondola { transform-box: view-box; transform-origin: 0 0; animation: night-cabin-upright 42s linear infinite; }
.night-neon { animation: night-neon-glow 6s ease-in-out infinite; }
.night-beam { transform-box: view-box; transform-origin: 266px 197px; animation: night-spotlight 6.5s ease-in-out infinite; }
.night-beam-right { animation-direction: reverse; animation-delay: -3.25s; }
.night-reflection { opacity: .4; animation: night-water 5.5s ease-in-out infinite; }
.bingen-waterline { opacity: .6; animation: bingen-river-flow 9s ease-in-out infinite; }
.bingen-waterline:nth-child(2n) { animation-delay: -4.5s; animation-duration: 11s; }
.bingen-waterline:nth-child(3n) { animation-delay: -2s; animation-duration: 13s; }
.bingen-flag { transform-box: fill-box; transform-origin: left center; animation: bingen-flag-breeze 4.8s ease-in-out infinite; }
.night-string-light { animation: night-warm-light 6s ease-in-out infinite; }
.night-string-light:nth-child(even) { animation-delay: -3s; }
.night-marquee-bulb { animation: night-warm-light 3.8s ease-in-out infinite; }
.night-marquee-bulb:nth-child(3n) { animation-delay: -1.9s; }
.night-steam { animation: night-steam-rise 4.8s ease-in-out infinite; }
.night-equalizer rect { transform-box: fill-box; transform-origin: center bottom; animation: night-beat 1.4s ease-in-out infinite alternate; }
.night-equalizer rect:nth-child(2) { animation-delay: -.7s; }
.night-equalizer rect:nth-child(3) { animation-delay: -.35s; }
.night-equalizer rect:nth-child(4) { animation-delay: -1s; }
.night-speaker-ring { transform-box: fill-box; transform-origin: center; animation: night-speaker-pulse 2.8s ease-in-out infinite; }
.night-note { animation: night-music-rise 5.5s ease-in-out infinite; }
.night-tree-crown { transform-box: fill-box; transform-origin: center bottom; animation: night-leaves 8s ease-in-out infinite; }
.night-ticket { transform-origin: 398px 345px; animation: night-ticket-float 7s ease-in-out infinite; }
.night-ticket-label { fill: #a9b4c6; font-size: 8px; letter-spacing: .7px; font-weight: 650; }
.night-ticket-title { fill: #e8edf5; font-size: 18px; letter-spacing: -.3px; font-weight: 650; }
.night-plan { opacity: 0; }
.night-plan-music { opacity: 1; animation: night-plan-music 15s linear infinite; }
.night-plan-meet { animation: night-plan-meet 15s linear infinite; }
.night-plan-walk { animation: night-plan-walk 15s linear infinite; }
.night-late { animation-delay: -3s; }

/* Only the visible scene runs. The shared pause control overrides both. */
.city-night * { animation-play-state: paused; }
[data-theme="dark"] .city-map * { animation-play-state: paused; }
[data-theme="dark"] .city-night * { animation-play-state: running; }
.hero-city[data-motion="paused"] .city-night * { animation-play-state: paused; }

@keyframes night-starlight { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes night-window-light { 0%, 100% { opacity: .5; } 40%, 65% { opacity: .95; } }
@keyframes night-moon-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes night-cloud-drift { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(13px); } }
@keyframes night-comet {
  0%, 73% { opacity: 0; transform: translate(0, 0); }
  74% { opacity: .75; transform: translate(6px, 3px); }
  79% { opacity: 0; transform: translate(93px, 44px); }
  100% { opacity: 0; transform: translate(93px, 44px); }
}
@keyframes night-wheel-turn { to { transform: rotate(360deg); } }
@keyframes night-cabin-upright { to { transform: rotate(-360deg); } }
@keyframes night-neon-glow { 0%, 100% { opacity: .76; } 50% { opacity: 1; } }
@keyframes night-spotlight { 0%, 100% { transform: rotate(-10deg); opacity: .58; } 50% { transform: rotate(10deg); opacity: .9; } }
@keyframes night-water { 0%, 100% { opacity: .22; transform: translateX(-3px); } 50% { opacity: .6; transform: translateX(3px); } }
@keyframes bingen-river-flow { 0%, 100% { opacity: .4; transform: translateX(-3px); } 50% { opacity: .8; transform: translateX(3px); } }
@keyframes bingen-flag-breeze { 0%, 100% { transform: skewY(-3deg) scaleX(.94); } 50% { transform: skewY(3deg) scaleX(1); } }
@keyframes night-warm-light { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes night-steam-rise { 0%, 100% { opacity: .2; transform: translateY(1px); } 50% { opacity: .75; transform: translateY(-5px); } }
@keyframes night-beat { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes night-speaker-pulse { 0%, 100% { transform: scale(.82); opacity: .35; } 50% { transform: scale(1.12); opacity: .75; } }
@keyframes night-music-rise { 0%, 100% { opacity: 0; transform: translate(0, 4px) rotate(-6deg); } 25%, 60% { opacity: .85; } 85% { opacity: 0; transform: translate(6px, -20px) rotate(8deg); } }
@keyframes night-leaves { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes night-ticket-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(0) translateY(-4px); } }
@keyframes night-plan-music { 0%, 27%, 99%, 100% { opacity: 1; transform: translateY(0); } 29%, 97% { opacity: 0; transform: translateY(-3px); } }
@keyframes night-plan-meet { 0%, 30%, 62%, 100% { opacity: 0; transform: translateY(3px); } 33%, 60% { opacity: 1; transform: translateY(0); } }
@keyframes night-plan-walk { 0%, 63%, 97%, 100% { opacity: 0; transform: translateY(3px); } 66%, 95% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .city-night * { animation: none !important; }
  .night-note, .night-shooting-star { opacity: 0; }
}