/* City scenes (city.js), lit by porchSky (sky.js). Every shape names its
   material (--m) and a class for how light falls on it; the hour does the rest. */
.cz{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.cz svg{display:block;width:100%;height:100%}
.cz{--m:#888;--wc:#ffd590}

/* how light falls: sunlit, facing us, in shade, far off in the haze */
.cz .L{fill:color-mix(in oklab,var(--m),var(--lc) var(--lp))}
.cz .M{fill:color-mix(in oklab,var(--m),var(--mc) var(--mp))}
.cz .S{fill:color-mix(in oklab,var(--m),var(--sc) var(--sp))}
.cz .F{fill:color-mix(in oklab,color-mix(in oklab,var(--m),var(--sc) var(--sp)),var(--sky-hor) var(--hp))}
.cz .F2{fill:color-mix(in oklab,color-mix(in oklab,var(--m),var(--sc) var(--sp)),var(--sky-hor) calc(var(--hp) * 1.55))}
.cz[data-sun=left] .eL,.cz[data-sun=right] .eR{fill:color-mix(in oklab,var(--m),var(--lc) var(--lp))}
.cz[data-sun=left] .eR,.cz[data-sun=right] .eL{fill:color-mix(in oklab,var(--m),var(--sc) var(--sp))}
.cz .sM,.cz .sS,.cz .sL,.cz .sF{fill:none;stroke-linecap:round}
.cz .sL{stroke:color-mix(in oklab,var(--m),var(--lc) var(--lp))}
.cz .sM{stroke:color-mix(in oklab,var(--m),var(--mc) var(--mp))}
.cz .sS{stroke:color-mix(in oklab,var(--m),var(--sc) var(--sp))}
.cz .sF{stroke:color-mix(in oklab,color-mix(in oklab,var(--m),var(--sc) var(--sp)),var(--sky-hor) var(--hp));stroke-width:1.2}
.cz .thin{stroke-width:.6;opacity:.75}

/* sky */
.cz .stars{fill:#fff;opacity:var(--stars)}
.cz .stars .tw{animation:twinkle 4s ease-in-out infinite}
.cz .sdisc{fill:var(--sun-c)}
.cz .sun,.cz .moon,.cz .sglow{transition:opacity 2s}
.cz .mbase{fill:color-mix(in oklab,var(--sky-top),#fff 12%);opacity:calc(var(--stars) * .6)}
.cz .mlit{fill:#f4f1e6}
.cz .ripples{fill:none;stroke:color-mix(in oklab,var(--sky-hor),#fff 30%);stroke-width:.8;opacity:calc(.35 - var(--lit) * .2)}
.cz .glitter path{fill:none;stroke-width:1.2;stroke-linecap:round}
.cz .foam{fill:none;stroke:color-mix(in oklab,#fff,var(--sc) var(--sp));stroke-width:2;opacity:.8;animation:surf 7s ease-in-out infinite}

/* lights: windows, lamps and beacons come on as the sun goes down */
.cz .glass{fill:color-mix(in oklab,var(--sky-mid),#1b2433 55%);opacity:calc(.32 * (1 - var(--lit)))}
.cz .win{fill:var(--wc);opacity:var(--lit)}
.cz .win.far{opacity:calc(var(--lit) * .7)}
.cz .win.cool{fill:#eef3ff}
.cz .lamp{fill:none;stroke:#ffc46a;stroke-width:1.6;stroke-linecap:round;opacity:var(--lit);filter:drop-shadow(0 0 2px #ffb04a)}
.cz .beacon{fill:#ff3b30;opacity:var(--lit);animation:beacon 2.4s steps(1) infinite}
.cz .beacon.slow{animation-duration:3.6s}
.cz .traffic{opacity:var(--lit)}
.cz .cars{fill:none;stroke:#fff1c8;stroke-width:1.6;stroke-linecap:round;transform-box:fill-box;animation:drive 40s linear infinite}
.cz .cablelit{fill:none;stroke:#ff9a6a;opacity:calc(var(--lit) * .45)}
.cz .flood{opacity:calc(var(--lit) * .55);mix-blend-mode:screen}
.cz .fog{opacity:calc(var(--fog) * var(--amt) * (1 - var(--lit) * .35));animation:drift 90s ease-in-out infinite alternate}
.cz .fog.front{animation-duration:70s;animation-direction:alternate-reverse;opacity:calc(var(--fog) * .8 * (1 - var(--lit) * .4))}
.cz .boat{opacity:calc(1 - var(--lit));animation:sail 240s linear infinite alternate}

/* Santa Monica */
.cz .turn{transform-box:fill-box;transform-origin:center;animation:turn 160s linear infinite}
.cz .led{fill:none;stroke:#ff4fa3;opacity:var(--lit);animation:led 12s linear infinite}
.cz .led.b{animation-delay:-4s}
.cz .led.s{animation-delay:-8s;opacity:calc(var(--lit) * .7)}
.cz .led.c{stroke:#5ff2ff;animation-duration:9s}
.cz .sway{animation:sway 7s ease-in-out infinite alternate}

/* Tokyo */
.cz .beacon.sync{animation:beacon 2s steps(1) infinite}
.cz .lattice{fill:none;stroke:color-mix(in oklab,#7a2a10,var(--sc) var(--sp));stroke-width:.5;opacity:.55}
.cz .tower-lit{fill:#ff9a3a;opacity:calc(var(--lit) * .75);mix-blend-mode:screen;filter:drop-shadow(0 0 6px #ff8a2a)}
.cz .deck-lit{fill:#fff3d6;opacity:var(--lit)}
.cz .skylit{opacity:calc(var(--lit) * .8);filter:drop-shadow(0 0 4px #8ea6ff)}
.cz .fuji{opacity:calc(1 - var(--lit) * .85)}
.cz .train{animation:train 38s linear infinite}
.cz .train .win{opacity:var(--lit)}
.cz .sign .sbg{fill:color-mix(in oklab,var(--n),#1a1a22 calc(70% - var(--lit) * 55%));stroke:color-mix(in oklab,var(--n),#fff 20%);stroke-width:calc(.4 + var(--lit) * .8)}
.cz .sign text{fill:color-mix(in oklab,#fff,var(--n) calc(70% - var(--lit) * 50%));font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-weight:700;text-anchor:middle}
.cz .sign .halo{fill:var(--n);opacity:calc(var(--lit) * .22);filter:blur(4px)}
.cz .sign:nth-child(3n) .sbg{animation:flicker 9s steps(1) infinite}
.cz .lantern{fill:#ff5a36;opacity:calc(.5 + var(--lit) * .5);filter:drop-shadow(0 0 calc(var(--lit) * 4px) #ff7a3a)}

/* New York */
.cz .topglow{opacity:calc(var(--lit) * .9);filter:drop-shadow(0 0 4px var(--t))}
.cz .crownlit{opacity:var(--lit)}

@keyframes twinkle{50%{opacity:.25}}
@keyframes beacon{0%{opacity:var(--lit)}50%{opacity:0}}
@keyframes drive{to{transform:translateX(-50%)}}
@keyframes drift{from{transform:translateX(-3%)}to{transform:translateX(4%)}}
@keyframes sail{from{transform:translateX(-8vw)}to{transform:translateX(8vw)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes led{0%{stroke:#ff4fa3}25%{stroke:#ffd23f}50%{stroke:#3dff8f}75%{stroke:#5aa0ff}100%{stroke:#ff4fa3}}
@keyframes sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes surf{50%{transform:translateY(2px);opacity:.5}}
@keyframes flicker{0%,100%{opacity:1}91%{opacity:.4}92%{opacity:1}94%{opacity:.5}95%{opacity:1}}
@keyframes train{0%{transform:translateX(calc(-1 * var(--len)))}40%{transform:translateX(var(--w))}100%{transform:translateX(var(--w))}}
@media (prefers-reduced-motion:reduce){.cz *{animation:none!important}}