/* The street (round two): layers, street-only colours and every street loop.
   The street is a stack of layers that share one scene (see assets/map.js):
     .st-sky    svg   static   sky bands, mountains, far hills, the hillside and its fields
     .st-air    html  live     sun or moon, clouds, birds, kites, stars
     .st-town   svg   static   terraces, buildings, street furniture (textures and soft shadows live here)
     .st-life   html  live     people, vehicles, smoke, flags, curtains, pigeons, leaves
     .st-front  svg   static   railings, the near kerb, night light pools
     .st-grain  html  static   one wool-fibre sheet over everything
   Static layers are painted once and cached. In the live layers every loop is one compositor
   animation (transform or opacity) on its own element; nothing in them has a filter or a pattern.
   The section keeps the aspect-ratio set in town.css (1490/854 wide, 596/1874 narrow), which is
   Town.map.size(10, 5) and size(10, 2) in map.js: change one and the other must follow. */

:root {
  --st-sky1: #74bfe3; --st-sky2: #93cfea; --st-sky3: #b6dfee; --st-sky4: #d9eee9; --st-sky5: #f7e9c8; --st-sky6: #f8d6ab;
  --st-mtn1: #a9bfe0; --st-mtn2: #93b0d6; --st-snow: #f4f7fb;
  --st-hill1: #b9dcbb; --st-hill2: #9acda4; --st-hill3: #7dbb90; --st-hill4: #68ab80;
  --st-field1: #a5d096; --st-field2: #c3dc8e; --st-field3: #86c4a0; --st-field4: #d3dd96; --st-field5: #e9cf8b; --st-soil: #c59a6e;
  --st-grass: #86c496; --st-grass2: #6fb083; --st-hedge: #4f9066; --st-hedge2: #3f7a5c;
  --st-pave: #e3d0b6; --st-pave2: #d3bd9f; --st-kerb: #bfa98f; --st-wall: #d6bfa2; --st-wall2: #c2a685; --st-wallcap: #ead9c2;
  --st-road: #857c90; --st-road2: #776e84; --st-line: #fff3d6; --st-zebra: #fbf2e0;
  --st-cloud: #ffffff; --st-cloud2: #e6f1f6; --st-sun: #ffd86b; --st-sunring: #ffe49a;
  --st-tree1: #5aa070; --st-tree2: #7bbd86; --st-tree3: #47896a; --st-tree4: #a3cf86; --st-blossom: #f6b6cc; --st-blossom2: #fbd9e3; --st-autumn: #eba45a; --st-autumn2: #e2804e;
  --st-fence: #fff6e6; --st-rail: #5a5266; --st-water: #8fd0e0; --st-water2: #c4ecf2;
  --st-shadow: rgba(42, 24, 48, .18); --st-far: #8fb3c6; --st-farroof: #d98a78;
  --st-grain: .5;
}
:root[data-theme=dark] {
  --st-sky1: #10143a; --st-sky2: #171c4a; --st-sky3: #20255c; --st-sky4: #2c2c6c; --st-sky5: #40357c; --st-sky6: #5a3f86;
  --st-mtn1: #2b2f6a; --st-mtn2: #25295e; --st-snow: #7d86bd;
  --st-hill1: #2a346c; --st-hill2: #242d61; --st-hill3: #1f2957; --st-hill4: #1c264f;
  --st-field1: #2c4a66; --st-field2: #33566a; --st-field3: #28445f; --st-field4: #36586a; --st-field5: #4a4d6c; --st-soil: #45375c;
  --st-grass: #2c4a5e; --st-grass2: #254052; --st-hedge: #23475a; --st-hedge2: #1d3b50;
  --st-pave: #4c4670; --st-pave2: #413c62; --st-kerb: #37325a; --st-wall: #47426a; --st-wall2: #3a3659; --st-wallcap: #5a5480;
  --st-road: #2c2942; --st-road2: #252238; --st-line: #8a82a8; --st-zebra: #8f88b0;
  --st-cloud: #4c5590; --st-cloud2: #3c457c; --st-sun: #fff3c4; --st-sunring: #c8c2e8;
  --st-tree1: #285064; --st-tree2: #336176; --st-tree3: #214458; --st-tree4: #3d6c78; --st-blossom: #7a6298; --st-blossom2: #9079ac; --st-autumn: #7a5a70; --st-autumn2: #6c4a66;
  --st-fence: #a79fbb; --st-rail: #2a2740; --st-water: #2c4f7a; --st-water2: #3f6896;
  --st-shadow: rgba(10, 8, 30, .3); --st-far: #2f3a72; --st-farroof: #4a3a6c;
  --st-grain: .32;
}

/* building tones added in round two (wall light, wall dark, roof dark) */
.fx { --w2: var(--w2-d); --wl: var(--wl-d); --r2: var(--r2-d); }
:root[data-theme=dark] .fx { --w2: var(--w2-n); --wl: var(--wl-n); --r2: var(--r2-n); }

/* ------------------------------------------------------------ the layer stack */
.street { background: var(--st-sky1); isolation: isolate; }
.street svg.st-l { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; overflow: hidden; }
/* live layers: laid out in scene units, scaled to the section (--st-k is set by map.js and kept by street.js) */
.street div.st-l { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--st-k, 1)); pointer-events: none; }
.street div.st-l div { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.street div.st-l .st-cell { overflow: hidden; }
.street .st-s { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.street .st-lay { will-change: transform; }
.street .st-grain { position: absolute; inset: 0; pointer-events: none; background: url(felt.png) 0 0 / 256px 256px; opacity: var(--st-grain); will-change: transform; }
.street .bld { pointer-events: auto; }
.street .bld .hit { pointer-events: all; }
.street .night-only { display: none; }
:root[data-theme=dark] .street .night-only { display: block; }
:root[data-theme=dark] .street svg .night-only { display: inline; }
.st-x { display: none; }
.street .st-x { display: inline; }
/* what moves on a building lifts with it */
.street .fx-live { transition: transform .32s var(--kai-ease); }
#street:has(.bld[data-room="kai"]:is(:hover, :focus-visible)) .fx-live[data-room="kai"],
#street:has(.bld[data-room="fin"]:is(:hover, :focus-visible)) .fx-live[data-room="fin"],
#street:has(.bld[data-room="live"]:is(:hover, :focus-visible)) .fx-live[data-room="live"],
#street:has(.bld[data-room="clearance"]:is(:hover, :focus-visible)) .fx-live[data-room="clearance"],
#street:has(.bld[data-room="ars-nunc"]:is(:hover, :focus-visible)) .fx-live[data-room="ars-nunc"],
#street:has(.bld[data-room="alignment"]:is(:hover, :focus-visible)) .fx-live[data-room="alignment"],
#street:has(.bld[data-room="agent-deck"]:is(:hover, :focus-visible)) .fx-live[data-room="agent-deck"],
#street:has(.bld[data-room="bell-test"]:is(:hover, :focus-visible)) .fx-live[data-room="bell-test"],
#street:has(.bld[data-room="pslv"]:is(:hover, :focus-visible)) .fx-live[data-room="pslv"],
#street:has(.bld[data-room="living-text"]:is(:hover, :focus-visible)) .fx-live[data-room="living-text"] { transform: translateY(-7px); }

/* ------------------------------------------------------------ movers and flip books */
.street .st-mv { animation: st-mv var(--dur, 60s) linear infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-mv { from { transform: translateX(var(--a, 0px)); } to { transform: translateX(var(--b, 0px)); } }
/* a strip of --n poses, each --cw wide, stepped along once every --gd (street.js) */
.street .st-strip { animation: st-strip var(--gd, 1s) steps(var(--n, 8)) infinite; animation-delay: calc(var(--gp, 0s) * -1); }
@keyframes st-strip { to { transform: translateX(calc(var(--n, 8) * var(--cw, 40) * -1px)); } }

/* ------------------------------------------------------------ loops on buildings (only inside the street; a lot shows them still) */
.st-smoke { opacity: 0; }
.street .st-smoke { animation: st-smoke 6s ease-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-smoke { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 14% { opacity: .82; } 100% { transform: translate(18px, -50px) scale(1.8); opacity: 0; } }
.street .st-ring { animation: st-ring 2s ease-out infinite; }
@keyframes st-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
.street .st-pulse { animation: st-pulse 3.6s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: .62; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.street .st-peek { animation: st-peek 7s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-peek { 0%, 100% { transform: rotate(-3deg); } 40% { transform: rotate(4deg) translateY(-1px); } 60% { transform: rotate(3deg); } }
.street .st-pole { animation: st-pole 1.5s linear infinite; }
@keyframes st-pole { to { transform: translateY(-16px); } }
.street .st-belt2 { animation: st-belt2 1.9s linear infinite; }
@keyframes st-belt2 { to { transform: translateX(23px); } }
.street .st-step3 { animation: st-step3 4.8s steps(1, end) infinite; }
@keyframes st-step3 { 0% { transform: translate(0, 0); } 33.4% { transform: translate(0, 18px); } 66.7% { transform: translate(-10px, 36px); } }
.street .st-count { animation: st-count 10s steps(10) infinite reverse; }
@keyframes st-count { to { transform: translateX(114px); } }
.street .st-swing { animation: st-swing 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.street .st-cur { animation: st-cur 4.6s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-cur { from { transform: skewX(0deg) scaleX(1); } to { transform: skewX(-11deg) scaleX(1.14); } }
.street .st-vane { animation: st-vane 9s ease-in-out infinite; }
@keyframes st-vane { 0%, 100% { transform: scaleX(1); } 38% { transform: scaleX(.25); } 50% { transform: scaleX(-.7); } 64% { transform: scaleX(-1); } 82% { transform: scaleX(.35); } }
.street .st-flag { animation: st-flag 1.7s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-flag { from { transform: skewY(-5deg) scaleX(1); } to { transform: skewY(6deg) scaleX(.9); } }
.street .st-bunt { animation: st-bunt 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-bunt { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }
.street .st-hang { animation: st-hang 3.1s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-hang { from { transform: skewX(-5deg); } to { transform: skewX(7deg); } }
.street .st-peck { animation: st-peck 3.4s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-peck { 0%, 58%, 90%, 100% { transform: rotate(0deg); } 64% { transform: rotate(30deg); } 70% { transform: rotate(6deg); } 76% { transform: rotate(30deg); } 82% { transform: rotate(4deg); } }
.street .st-tail { animation: st-tail 2.3s ease-in-out infinite alternate; }
@keyframes st-tail { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }
.street .st-spin { animation: st-spin 7s linear infinite; }
.street .st-spin.rev { animation-direction: reverse; }
.street .st-spin.fast { animation-duration: 1.2s; }
.street .st-spin.slow { animation-duration: 22s; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-blink { opacity: 0; }
.street .st-blink { animation: st-blink 1.8s steps(1, end) infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-blink { 0% { opacity: .95; } 50% { opacity: 0; } }
.street .st-beam { animation: st-beam 12s ease-in-out infinite alternate; }
@keyframes st-beam { from { transform: rotate(-20deg); } to { transform: rotate(24deg); } }
.street .st-bob { animation: st-bobf 4.4s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-bobf { from { transform: translateY(-1.6px); } to { transform: translateY(1.6px); } }
.street .st-nod { animation: st-nod 5s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-nod { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.street .st-belt { animation: st-belt 5s linear infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-belt { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(var(--run, 60px)); opacity: 0; } }
.street .st-drip { animation: st-drip 1.3s ease-in infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(var(--fall, 14px)); opacity: 0; } }
.street .st-fly { animation: st-fly 11s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-fly { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(14px, -10px); } 42% { transform: translate(27px, 3px); } 60% { transform: translate(12px, -17px); } 80% { transform: translate(-8px, -6px); } }
.street .st-flap { animation: st-flap .26s ease-in-out infinite alternate; }
.street .st-flap.bee { animation-duration: .12s; }
@keyframes st-flap { from { transform: scaleX(1); } to { transform: scaleX(.22); } }
/* windows that go on and off through the night: never quite dark */
.street .st-wr { animation: st-wr 26s steps(1, end) infinite; }
.street .st-wr2 { animation-duration: 34s; animation-delay: -9s; }
.street .st-wr3 { animation-duration: 19s; animation-delay: -4s; }
.street .st-wr4 { animation-duration: 43s; animation-delay: -21s; }
@keyframes st-wr { 0% { opacity: 1; } 44% { opacity: 0; } 58% { opacity: 1; } 63% { opacity: 0; } 71% { opacity: 1; } }

/* ------------------------------------------------------------ loops on the terraces and in the sky */
.st-leaf { opacity: 0; }
.street .st-leaf { animation: st-leaf var(--dur, 12s) linear infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-leaf { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 10% { opacity: .95; } 50% { transform: translate(calc(var(--dx) * .62), calc(var(--dy) * .4)) rotate(200deg); } 88% { opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)) rotate(420deg); opacity: 0; } }
.st-note { opacity: 0; }
.street .st-note { animation: st-note 4.8s ease-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-note { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 14% { opacity: .9; } 100% { transform: translate(12px, -34px) rotate(12deg); opacity: 0; } }
.street .st-sweep { animation: st-sweep 1.5s ease-in-out infinite alternate; }
@keyframes st-sweep { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.street .st-idle { animation: st-idle 6s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-idle { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.6deg); } }
.street .st-strum { animation: st-strum .42s ease-in-out infinite alternate; }
@keyframes st-strum { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.street .st-wipe { animation: st-wipe 1.3s ease-in-out infinite alternate; }
@keyframes st-wipe { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.st-flash { opacity: 0; }
.street .st-flash { animation: st-flash 7s steps(1, end) infinite; }
@keyframes st-flash { 0% { opacity: .9; } 2.4% { opacity: 0; } }
.street .st-ballx { animation: st-ballx 1.5s linear infinite alternate; }
@keyframes st-ballx { from { transform: translateX(0); } to { transform: translateX(32px); } }
.street .st-bally { animation: st-bally .75s cubic-bezier(.3, .6, .6, 1) infinite alternate; }
@keyframes st-bally { from { transform: translateY(0); } to { transform: translateY(-22px); } }
.street .st-swing2 { animation: st-swing2 1.9s ease-in-out infinite alternate; }
@keyframes st-swing2 { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
.street .st-kite { animation: st-kite 6.4s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-kite { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.street .st-twk { animation: st-twk 3.2s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes st-twk { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.street .st-twk.fly { animation-name: st-fire; animation-duration: 5.4s; }
@keyframes st-fire { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .95; } 60% { opacity: .2; transform: translate(7px, -9px); } 80% { opacity: .9; } }
.street .st-shoot { opacity: 0; animation: st-shoot 17s linear infinite; }
@keyframes st-shoot { 0%, 91% { transform: translateX(0); opacity: 0; } 92% { opacity: 1; } 99% { transform: translateX(190px); opacity: 0; } 100% { transform: translateX(190px); opacity: 0; } }

/* rows of the street that are off screen (street.js adds .st-off): their loops are held by rest.css */
/* reduced motion: town.css already stops every loop; vehicles that are out of view at t = 0 are hidden */
@media (prefers-reduced-motion: reduce) { .street .st-away { display: none; } }