/* One geometry plate per depth layer, shared by every time of day. */
.city-diorama{--material-brightness:1;--material-saturation:1;--window-glow:0;--lamp-glow:0}
body[data-scene-light=sunset] .city-diorama{--material-brightness:.64;--material-saturation:.8;--lamp-glow:.5}
body[data-scene-light=night] .city-diorama{--material-brightness:.25;--material-saturation:.65;--lamp-glow:.95}
.diorama-skyline,.diorama-foreground,.diorama-midground{filter:brightness(var(--material-brightness)) saturate(var(--material-saturation));transition:filter 1.5s ease}
.diorama-road-material{filter:brightness(var(--material-brightness)) saturate(var(--material-saturation));transition:filter 1.5s ease}
[data-scene-layer=street-ground],.diorama-material path,.diorama-material rect:not(.diorama-window-light):not(.diorama-shop-light){visibility:hidden}
.diorama-material .diorama-window-light,.diorama-shop-light{display:none}
.diorama-skyline{opacity:1}
.diorama-far-lights{opacity:.8}
.diorama-foreground{opacity:1}
.diorama-window-light{opacity:0;transition:opacity 1.4s ease}
body[data-scene-light=sunset] .diorama-window-light[data-lit=true]{opacity:calc(var(--pane-brightness,.6)*.55)}
body[data-scene-light=night] .diorama-window-light[data-lit=true]{opacity:calc(var(--pane-brightness,.6)*.8)}
.diorama-shop-light,.diorama-lamp-light{opacity:var(--lamp-glow);transition:opacity 1.4s ease}
.city-diorama .diorama-car{opacity:0}
.diorama-police-door{display:none}.diorama-car[data-service=police] .diorama-police-door{display:block}
.diorama-red-wash,.diorama-blue-wash{filter:blur(1.5px)}
.diorama-story-actor,.diorama-story-fire,.diorama-story-flash{opacity:0}
.diorama-responder-water{display:none}[data-city-story=fire-response] .diorama-responder-water{display:block}[data-city-story=fire-response] .diorama-responder-hat{stroke:#d8b671}[data-city-story=fire-response] .diorama-responder-body{stroke:#957a4b}
.diorama-story-smoke{transform-origin:0 0;animation:diorama-smoke 3s ease-out infinite;animation-play-state:var(--vi-motion)}
@keyframes diorama-smoke{from{transform:translate(0,0) scale(.8);opacity:.16}to{transform:translate(7px,-15px) scale(1.4);opacity:0}}
.diorama-water-ripples{animation:diorama-water 14s ease-in-out infinite alternate;animation-play-state:var(--vi-motion)}
@keyframes diorama-water{to{transform:translateX(9px);opacity:.1}}
.diorama-code-cursor{animation:diorama-cursor 1.2s steps(1) infinite;animation-play-state:var(--vi-motion)}
@keyframes diorama-cursor{50%{opacity:0}}
.diorama-code-lines{animation:diorama-code 16s steps(4,end) infinite;animation-play-state:var(--vi-motion)}
@keyframes diorama-code{0%,100%{opacity:.7}40%,70%{opacity:1}}
.city-diorama .city-copy-shade{opacity:.62}
body.community-site .exclusive-banner{background-image:linear-gradient(90deg,#0a1622e8,#0a162220),url(artwork/diorama-all-skyline-v1.webp),linear-gradient(#253b55,#647c8a)!important}
body.community-site[data-scene-light=sunset] .exclusive-banner{background-image:linear-gradient(90deg,#1b1b32ef,#29243b88),url(artwork/diorama-all-skyline-v1.webp),linear-gradient(#665977,#a37b78)!important}
body.community-site[data-scene-light=night] .exclusive-banner{background-image:linear-gradient(90deg,#081524f5,#081524ce),url(artwork/diorama-all-skyline-v1.webp),linear-gradient(#101b31,#29364a)!important}
@media(prefers-reduced-motion:reduce){.diorama-water-ripples,.diorama-story-smoke,.diorama-code-lines,.diorama-code-cursor{animation:none}.diorama-story-actor,.diorama-story-fire,.diorama-car{display:none}.diorama-window-light,.diorama-shop-light,.diorama-lamp-light{transition:none}}