/* Generated by tools/scene/build.py from tools/scene/css/. Edit those files, not this one. */

/* ===== base.css ===== */
/* Scene CSS (base). Sections: visibility contract, lighting x materials,
   time-of-day palettes, sun side, paint, motion. Season files add their own.

   VISIBILITY CONTRACT ------------------------------------- */
.ms-s { display: none; }
.madison-scene[data-season="spring"] .ms-s-spring,
.madison-scene[data-season="summer"] .ms-s-summer,
.madison-scene[data-season="fall"] .ms-s-fall,
.madison-scene[data-season="winter"] .ms-s-winter { display: inline; }
.ms-frozen-only { display: none; }
.madison-scene[data-lake="frozen"] .ms-frozen-only { display: inline; }
.madison-scene[data-lake="frozen"] .ms-open-only { display: none; }

/* LIGHTING x MATERIALS --------------------------------------
   Season files set the materials (--m-*): what things are made of.
   The time of day sets the light (--lt, --lt-amt). The colors the art uses
   (--tree-a, --bank-a, --haze-a ...) are the material seen in that light. */
.madison-scene {
  --m-tree-a: #4f9a63; --m-tree-b: #2f6f4a; --m-tree-back: #2f6f4a;
  --m-bank-a: #7cc06b; --m-bank-b: #4f9a52; --m-bank-c: #2f6e3c;
  --m-haze-a: #9cc8bd; --m-haze-b: #7fb2a3;
  --lt: #ffffff; --lt-amt: 0%;
  /* the badger's clothes (badger.py): Wisconsin red, buffalo-check black, cream, a knit green.
     He is a character, so the light reaches him at three quarters of its strength. */
  --m-bdg-red: #c8141c; --m-bdg-red-lit: #e8363a; --m-bdg-red-sh: #8a0b11; --m-bdg-black: #1a1212;
  --m-bdg-cream: #f4ecdc; --m-bdg-green: #1f7a4a; --m-bdg-green-sh: #135434;
  /* the flamingo's extras (flamingo.py) */
  --m-fm-yellow: #ffcf3a; --m-fm-orange: #ff8a3d; --m-fm-white: #ffffff; --m-fm-leaf: #3f9a4f; --m-fm-witch: #2d2440;
  --bdg-amt: calc(var(--lt-amt) * 0.75);
  /* fallbacks for browsers without color-mix() */
  --bdg-red: var(--m-bdg-red); --bdg-red-lit: var(--m-bdg-red-lit); --bdg-red-sh: var(--m-bdg-red-sh); --bdg-black: var(--m-bdg-black);
  --bdg-cream: var(--m-bdg-cream); --bdg-green: var(--m-bdg-green); --bdg-green-sh: var(--m-bdg-green-sh);
  --fm-yellow: var(--m-fm-yellow); --fm-orange: var(--m-fm-orange); --fm-white: var(--m-fm-white); --fm-leaf: var(--m-fm-leaf); --fm-witch: var(--m-fm-witch);
  --tree-a: var(--m-tree-a); --tree-b: var(--m-tree-b); --tree-back: var(--m-tree-back);
  --bank-a: var(--m-bank-a); --bank-b: var(--m-bank-b); --bank-c: var(--m-bank-c);
  --haze-a: var(--m-haze-a); --haze-b: var(--m-haze-b);
}
@supports (color: color-mix(in oklab, red, blue)) {
  .madison-scene {
    --tree-a: color-mix(in oklab, var(--m-tree-a), var(--lt) var(--lt-amt));
    --tree-b: color-mix(in oklab, var(--m-tree-b), var(--lt) var(--lt-amt));
    --tree-back: color-mix(in oklab, var(--m-tree-back), var(--lt) var(--lt-amt));
    --bank-a: color-mix(in oklab, var(--m-bank-a), var(--lt) var(--lt-amt));
    --bank-b: color-mix(in oklab, var(--m-bank-b), var(--lt) var(--lt-amt));
    --bank-c: color-mix(in oklab, var(--m-bank-c), var(--lt) var(--lt-amt));
    /* far hills: material, pushed toward the sky colour (haze), then lit */
    --haze-a: color-mix(in oklab, color-mix(in oklab, var(--m-haze-a), var(--sky-c) 30%), var(--lt) var(--lt-amt));
    --haze-b: color-mix(in oklab, color-mix(in oklab, var(--m-haze-b), var(--sky-c) 20%), var(--lt) var(--lt-amt));
    --bdg-red: color-mix(in oklab, var(--m-bdg-red), var(--lt) var(--bdg-amt));
    --bdg-red-lit: color-mix(in oklab, var(--m-bdg-red-lit), var(--lt) var(--bdg-amt));
    --bdg-red-sh: color-mix(in oklab, var(--m-bdg-red-sh), var(--lt) var(--bdg-amt));
    --bdg-black: color-mix(in oklab, var(--m-bdg-black), var(--lt) var(--bdg-amt));
    --bdg-cream: color-mix(in oklab, var(--m-bdg-cream), var(--lt) var(--bdg-amt));
    --bdg-green: color-mix(in oklab, var(--m-bdg-green), var(--lt) var(--bdg-amt));
    --bdg-green-sh: color-mix(in oklab, var(--m-bdg-green-sh), var(--lt) var(--bdg-amt));
    --fm-yellow: color-mix(in oklab, var(--m-fm-yellow), var(--lt) var(--bdg-amt));
    --fm-orange: color-mix(in oklab, var(--m-fm-orange), var(--lt) var(--bdg-amt));
    --fm-white: color-mix(in oklab, var(--m-fm-white), var(--lt) var(--bdg-amt));
    --fm-leaf: color-mix(in oklab, var(--m-fm-leaf), var(--lt) var(--bdg-amt));
    --fm-witch: color-mix(in oklab, var(--m-fm-witch), var(--lt) var(--bdg-amt));
  }
}
.madison-scene[data-time="dawn"] { --lt: #ffad8a; --lt-amt: 20%; }
.madison-scene[data-time="golden"] { --lt: #ff9a3c; --lt-amt: 20%; }
.madison-scene[data-time="dusk"] { --lt: #3a2c66; --lt-amt: 50%; }
.madison-scene[data-time="night"] { --lt: #06112e; --lt-amt: 72%; }

/* TIME-OF-DAY PALETTES (sky, water, buildings, characters) */
.madison-scene {
  --sky-a: #5fb1e3; --sky-b: #a9dcf2; --sky-c: #e9f6f6;
  --sun: #ffd36a; --sun-core: #fff6d8;
  --cloud-a: #ffffff; --cloud-b: #dbeef6;
  --mist: #ffffff;
  --bldg-lit: #e6eee9; --bldg-lit2: #f7faf6; --bldg-shade: #a9bdb8; --win: #8fb1bf; --cornice: #c9d6d1;
  --bw-lit: #e8cdb8; --bw-lit2: #f3dccb; --bw-shade: #b58f7c;
  --cap-lit: #fffdf6; --cap-mid: #efe9da; --cap-shade: #c3bba6; --cap-hi: #ffffff; --cap-glow: #fff3c4; --cap-win: #b6c2bf;
  --statue: #e7b54b; --statue-glow-op: 0.3;
  --ter-lit: #fbfaf5; --ter-shade: #d6d1c2; --ter-roof: #5e9f63; --ter-roof-lit: #8cc77a; --arch-a: #86b0bb; --arch-b: #3e6b78;
  --ter-dome-a: #f4fbfd; --ter-dome-b: #9fc3cf;
  --water-a: #8cc9dc; --water-b: #3f9bbd; --water-c: #1b5f7f;
  --reflect: #ffffff; --reflect-op: 0.28; --glitter: #fffbe6; --glitter-op: 0.85; --wave: rgba(255, 255, 255, 0.5);
  /* the low sun: how much the sky blooms, the band of light along the horizon, rays, the path on the water, haze over the far city */
  --bloom-op: 0.28; --band-op: 0; --rays-op: 0; --sunpath-op: 0.3; --city-haze-op: 0.45; --sun-scale: 1;
  /* moods: first light in the east, mist on still water, lamps and traffic along the Terrace,
     the city's glow under a low overcast, how much the side away from the sun sits in shade */
  --east-a: #f3b98a; --east-b: #4b6f9a; --east-op: 0; --lake-mist-op: 0;
  --ter-lamp-op: 0; --cars-op: 0; --deck-glow: #e9a25a; --deck-glow-op: 0;
  --boat-a: #f7a443; --boat-b: #d4621b; --boat-rim: #ffd08a;
  --fur-lit: #c8c0ad; --fur-shade: #8c8473; --fur-white: #fbf8f0; --fur-dark: #2c2a28;
  --pink-a: #ff9bc6; --pink-b: #ec4f93;
  --cheese-a: #ffd45c; --cheese-b: #f0a92a; --sail-a: #ffffff; --sail-b: #e6eef0;
  --duck: #8a6a4a; --duck-head: #2f7a4c; --duckling: #ffd84d;
  --lamp: #ffcf6b; --lamp-op: 0; --stars-op: 0; --moon-op: 0; --glow-op: 0;
  --ink: #12302c; --goose: #1d2b33;
}
.madison-scene[data-time="dawn"] {
  --sky-a: #6e8fcf; --sky-b: #e9b9b6; --sky-c: #ffd9b0; --sun: #ffb26b; --sun-core: #ffe8c8;
  --cloud-a: #ffe9e0; --cloud-b: #e7b6b4; --mist: #ffd9c4;
  --bldg-lit: #f1ddd2; --bldg-lit2: #fbe9dc; --bldg-shade: #a59aa8; --win: #c9a99a; --bw-lit: #e9c4b4; --bw-lit2: #f5d4c3; --bw-shade: #a88486;
  --cap-lit: #fff1e2; --cap-mid: #f0dcca; --cap-shade: #b9a6a2; --ter-lit: #fbefe4; --ter-shade: #d8c6bc;
  --water-a: #f2c3b0; --water-b: #8a9fc4; --water-c: #3a557f; --glitter: #ffe2c2; --reflect-op: 0.24;
  --ter-roof: #5d8f5f; --ter-roof-lit: #9fbf86; --arch-a: #b8a7a8; --arch-b: #5c5c7c; --ter-dome-a: #fff3e6; --ter-dome-b: #c9a6a8;
  --stars-op: 0.35;
  --bloom-op: 0.9; --band-op: 0.8; --rays-op: 0.34; --sunpath-op: 0.75; --city-haze-op: 0.6; --sun-scale: 1.2;
}
.madison-scene[data-time="golden"] {
  --sky-a: #e98e5b; --sky-b: #f7c27d; --sky-c: #ffe7b0; --sun: #ffb347; --sun-core: #fff0c4;
  --cloud-a: #ffe9c9; --cloud-b: #f0b98c; --mist: #ffe0a8;
  --bldg-lit: #fbe4c4; --bldg-lit2: #fff1da; --bldg-shade: #b99a86; --win: #f0c27e; --bw-lit: #f2c49c; --bw-lit2: #fcd6b0; --bw-shade: #b07d62;
  --cap-lit: #fff3dc; --cap-mid: #f7dfbd; --cap-shade: #c49f82; --ter-lit: #fff2de; --ter-shade: #e0c3a2;
  --water-a: #f8c98a; --water-b: #c08c7e; --water-c: #5d4f7a; --glitter: #fff1c4; --reflect: #fff2d2;
  --ter-roof: #6a8f55; --ter-roof-lit: #b3c27a; --arch-a: #d9a77a; --arch-b: #6e5466; --ter-dome-a: #fff5dc; --ter-dome-b: #d4a278;
  --bloom-op: 1; --band-op: 1; --rays-op: 0.42; --sunpath-op: 0.9; --city-haze-op: 0.55; --sun-scale: 1.3;
}
.madison-scene[data-time="dusk"] {
  --sky-a: #2b3470; --sky-b: #9a5f8a; --sky-c: #f39a7a; --sun: #ff8f6b; --sun-core: #ffd0b0;
  --cloud-a: #f4a990; --cloud-b: #8a5a86; --mist: #f7a58a;
  --bldg-lit: #a99ab3; --bldg-lit2: #c0aec0; --bldg-shade: #5e5878; --win: #ffd36b; --cornice: #8c7f9c; --bw-lit: #b88f98; --bw-lit2: #c9a0a4; --bw-shade: #6a5070;
  --cap-lit: #fff0d8; --cap-mid: #f0d6c0; --cap-shade: #a98f98; --cap-glow: #ffd9a0; --cap-win: #ffd36b;
  --ter-lit: #e8d6d0; --ter-shade: #b49eaa; --arch-a: #ffd36b; --arch-b: #e59a4b;
  --water-a: #e9967c; --water-b: #6a5a8e; --water-c: #232a58; --glitter: #ffd2a8; --reflect: #ffe1b5;
  --fur-lit: #b3a6a3; --fur-shade: #6f6670; --boat-a: #e98a4e; --boat-b: #a9502a;
  --ter-roof: #3f5e4a; --ter-roof-lit: #6f8a66; --statue-glow-op: 0.8; --ter-dome-a: #ffe9b4; --ter-dome-b: #d39a55;
  --stars-op: 0.55; --glow-op: 0.55; --lamp-op: 0.7; --moon-op: 0.6; --goose: #2a2240;
  --bloom-op: 0.9; --band-op: 0.9; --rays-op: 0.3; --sunpath-op: 0.8; --city-haze-op: 0.45; --sun-scale: 1.3;
}
.madison-scene[data-time="night"] {
  --sky-a: #070f27; --sky-b: #13254f; --sky-c: #2c4777; --sun: #f6f1d8; --sun-core: #ffffff;
  --cloud-a: #34466f; --cloud-b: #1c2a4c; --mist: #36507c;
  --bldg-lit: #34446a; --bldg-lit2: #3d4f78; --bldg-shade: #1d2842; --win: #ffd36b; --cornice: #2b3858; --bw-lit: #4a3f58; --bw-lit2: #554863; --bw-shade: #251f33;
  --cap-lit: #fff6dc; --cap-mid: #f6e3b4; --cap-shade: #b89a62; --cap-hi: #ffffff; --cap-glow: #ffe2a0; --cap-win: #ffcf5e;
  --ter-lit: #d9d3c6; --ter-shade: #a39d93; --ter-roof: #2d5a3e; --arch-a: #ffd36b; --arch-b: #f0a43a;
  --water-a: #24406f; --water-b: #11264a; --water-c: #060f24; --reflect: #ffe1a0; --reflect-op: 0.3;
  --glitter: #fff2c4; --glitter-op: 0.7; --wave: rgba(255, 226, 150, 0.28);
  --boat-a: #b9693a; --boat-b: #74391c; --boat-rim: #d79a63;
  --fur-lit: #8f8a8a; --fur-shade: #4d4a52; --fur-white: #d9d6d0;
  --pink-a: #d97aa6; --pink-b: #8d2f62; --cheese-a: #d6ae4c; --cheese-b: #a77420; --sail-a: #cfd4dc; --sail-b: #9ba4b4;
  --duck: #4c3d30; --duck-head: #1a4030; --duckling: #b8a04a;
  --stars-op: 1; --moon-op: 1; --glow-op: 1; --lamp-op: 1; --goose: #9aa6c4;
  --ter-roof-lit: #44704f; --statue-glow-op: 1; --ter-dome-a: #ffe39a; --ter-dome-b: #c98a3a;
  --bloom-op: 0; --band-op: 0; --rays-op: 0; --sunpath-op: 0.55; --city-haze-op: 0.3;
  --ink: #050d1f;
}

/* SUN SIDE: morning light from the right (east), afternoon from the left */
.madison-scene {
  --bldg-side: var(--bldg-shade); --bldg-face: var(--bldg-lit); --bldg-face2: var(--bldg-lit2);
  --bw-side: var(--bw-shade); --bw-face: var(--bw-lit); --bw-face2: var(--bw-lit2);
  --cap-w: var(--cap-shade); --cap-e: var(--cap-lit);
  --dome-0: var(--cap-shade); --dome-1: var(--cap-lit); --dome-2: var(--cap-hi); --dome-3: var(--cap-mid);
  --hl-am: 1; --hl-pm: 0; --sh-l: 1; --sh-r: 0;
}
.madison-scene[data-sun="pm"] {
  --bldg-side: var(--bldg-lit2); --bldg-face: var(--bldg-lit); --bldg-face2: var(--bldg-shade);
  --bw-side: var(--bw-lit2); --bw-face: var(--bw-lit); --bw-face2: var(--bw-shade);
  --cap-w: var(--cap-lit); --cap-e: var(--cap-shade);
  --dome-0: var(--cap-hi); --dome-1: var(--cap-lit); --dome-2: var(--cap-mid); --dome-3: var(--cap-shade);
  --hl-am: 0; --hl-pm: 1; --sh-l: 0; --sh-r: 1;
}
/* the side away from the sun is clearly darker (about 12% lightness) so the
   light reads as coming from the east in the morning and the west after noon */
@supports (color: color-mix(in oklab, red, blue)) {
  .madison-scene { --cap-w: color-mix(in oklab, var(--cap-mid), #241c12 18%); --cap-e: color-mix(in oklab, var(--cap-mid), #ffffff 55%); }
  .madison-scene[data-sun="pm"] { --cap-w: color-mix(in oklab, var(--cap-mid), #ffffff 55%); --cap-e: color-mix(in oklab, var(--cap-mid), #241c12 18%); }
}
/* floodlit from every side at night, overcast light is flat */
.madison-scene[data-time="night"] { --cap-w: var(--cap-mid); --cap-e: var(--cap-mid); --sh-l: 0.35; --sh-r: 0.35; }
.madison-scene[data-time="dusk"] { --sh-l: 0.25; --sh-r: 0.6; }
.madison-scene[data-time="dawn"] { --sh-l: 0.6; --sh-r: 0.25; }
.ms-hl-am { opacity: var(--hl-am); }
.ms-hl-pm { opacity: var(--hl-pm); }
.ms-sh-l { opacity: var(--sh-l); }
.ms-sh-r { opacity: var(--sh-r); }

/* PAINT ---------------------------------------------------- */
.ms-stars circle { fill: #ffffff; }
.ms-stars { opacity: var(--stars-op); }
/* skip work nobody can see: no stars by day, no rays when the sun is high or gone */
.madison-scene[data-time="day"] .ms-stars, .madison-scene[data-time="golden"] .ms-stars,
.madison-scene[data-time="day"] .ms-rays, .madison-scene[data-time="night"] .ms-rays { display: none; }
/* sun and moon: site.js places them on Madison's real sky and draws the moon's phase */
.ms-sun { opacity: calc(1 - var(--moon-op)); }
.ms-sun-bloom { opacity: var(--bloom-op); }
.ms-sun-band { opacity: var(--band-op); }
.ms-rays { opacity: var(--rays-op); transform-origin: 50% 50%; }
.ms-sun-day { transform: scale(var(--sun-scale)); transform-origin: 50% 50%; }
.ms-moon { opacity: var(--moon-op); }
.ms-moon-halo { opacity: 0.75; }
.ms-moon-dark { fill: #fbf6df; opacity: 0.1; }
.ms-moon-lit { fill: #fbf6df; }
.ms-moon-maria { fill: #8e8664; opacity: 0.2; }
.ms-moon-rim { fill: none; stroke: #fbf6df; stroke-width: 1; opacity: 0.22; }
.ms-sunpath { opacity: var(--sunpath-op); }
.ms-city-haze { opacity: var(--city-haze-op); }
.ms-east-glow { opacity: var(--east-op); }
.ms-lake-mist { opacity: var(--lake-mist-op); }
.ms-deck-glow { opacity: var(--deck-glow-op); }
/* hide what is fully transparent so it costs nothing */
.madison-scene:not([data-sub="predawn"]) .ms-east-glow,
.madison-scene:not([data-sub="blue"]):not([data-sub="sunrise"]):not([data-sub="predawn"]) .ms-lake-mist { display: none; }
/* the Terrace after dark: rooftop lamps, their reflections, headlights and tail lights on John Nolen Drive */
.ms-ter-lamps { opacity: var(--ter-lamp-op); }
.ms-lamp-dot { fill: #fff3c4; }
.ms-cars { opacity: var(--cars-op); }
.ms-headlamp { fill: #fff8dc; }
.ms-taillamp { fill: #ff5a3c; }
.madison-scene:is([data-time="day"], [data-time="golden"]) :is(.ms-ter-lamps, .ms-cars) { display: none; }
.ms-car { transform-box: view-box; }
.ms-car-1 { transform: translate(1010px, 431px); }
.ms-car-2 { transform: translate(800px, 431px); }
.ms-car-3 { transform: translate(600px, 433px); }
.madison-scene.is-live .ms-sun-pos, .madison-scene.is-live .ms-moon-pos, .madison-scene.is-live .ms-glitter-pos { transition: transform 60s linear; }
.ms-cloud { opacity: 0.95; }
.ms-goose { fill: none; stroke: var(--goose); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ms-goose-body { fill: var(--goose); }
.ms-win { fill: var(--win); }
.ms-cornice, .ms-cap-cornice { fill: var(--cornice); }
/* the Capitol */
.ms-cap-cornice { fill: var(--cap-lit); }
.ms-capital { fill: var(--cap-hi); }
.ms-capwin { fill: var(--cap-win); }
.ms-dome-win { opacity: 0.8; }
.ms-cap-roof { fill: var(--cap-shade); }
.ms-cap-string { fill: var(--cap-shade); opacity: 0.5; }
.ms-pilaster { opacity: 0.8; }
.ms-cap-edge { fill: none; stroke: var(--cap-shade); stroke-width: 2; stroke-linejoin: round; opacity: 0.7; }
.ms-tympanum-face { fill: var(--cap-lit); opacity: 0.35; }
.ms-col { fill: var(--cap-shade); opacity: 0.85; }
.ms-dome-rib { fill: none; stroke: var(--cap-shade); stroke-width: 1.4; opacity: 0.5; }
.ms-dome-edge { fill: none; stroke: var(--cap-shade); stroke-width: 1.2; opacity: 0.35; }
.ms-statue { fill: var(--statue); }
.ms-statue-arm { fill: none; stroke: #d49a2e; stroke-width: 1.6; stroke-linecap: round; }
.ms-statue-glow { opacity: var(--statue-glow-op); }
.ms-glint { fill: #ffffff; }
.ms-cap-glow { opacity: var(--glow-op); }
.ms-crane { fill: none; stroke: #e2a83a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ms-crane-hook { fill: #e2a83a; }
/* Monona Terrace */
.ms-ter-roof { fill: var(--ter-roof); }
.ms-ter-rail { fill: none; stroke: var(--ter-lit); stroke-width: 1; opacity: 0.6; }
.ms-ter-line { fill: none; stroke: var(--ter-shade); stroke-width: 2; opacity: 0.8; }
.ms-ter-base { fill: none; stroke: var(--ter-shade); stroke-width: 3; }
.ms-ter-dome-glint, .ms-arch-glint { fill: none; stroke: #ffffff; stroke-width: 1.2; stroke-linecap: round; opacity: 0.55; }
.ms-arch-glint { opacity: 0.3; }
/* the lake */
.ms-reflect { fill: var(--reflect); opacity: var(--reflect-op); }
.ms-glitter rect { fill: var(--glitter); }
.ms-glit { opacity: var(--glitter-op); }
.ms-waves path { stroke: var(--wave); stroke-width: 2.5; stroke-linecap: round; fill: none; opacity: 0.8; }
.ms-hull { fill: #fbfbf7; }
.ms-hull-rim { stroke: #c8d0d0; stroke-width: 3; stroke-linecap: round; }
.ms-mast { stroke: #5a4632; stroke-width: 4; stroke-linecap: round; }
.ms-mast-thin { stroke: #5a4632; stroke-width: 2; }
.ms-jib { fill: var(--sail-b); }
.ms-holes { fill: var(--cheese-b); }
.ms-hole-lip { fill: none; stroke: #ffffff; stroke-width: 1.2; stroke-linecap: round; opacity: 0.55; }
.ms-cheese-rind { fill: var(--cheese-b); opacity: 0.22; }
.ms-cheese-edge { fill: none; stroke: #ffe9a6; stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.ms-flag { fill: #ec4f93; }
.ms-boat-shadow { fill: #04202c; opacity: 0.18; }
.ms-wake { fill: none; stroke: var(--wave); stroke-width: 2.4; stroke-linecap: round; }
.ms-duck-body { fill: var(--duck); }
.ms-duck-wing-fill { fill: #000; opacity: 0.14; }
.ms-duck-wing { fill: none; stroke: #5d4630; stroke-width: 2.4; stroke-linecap: round; }
.ms-speculum { fill: none; stroke: #4b7fd6; stroke-width: 2.2; stroke-linecap: round; }
.ms-duck-collar { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; }
.ms-duck-head { fill: var(--duck-head); }
.ms-duckling { fill: var(--duckling); }
.ms-bill { fill: #f4a62a; }
.ms-eye-dark { fill: #161616; }
.ms-eye-light { fill: #ffffff; }
.ms-trees-back { fill: var(--tree-back); opacity: 0.85; }
.ms-antenna { stroke: var(--bldg-shade); stroke-width: 2.5; stroke-linecap: round; }
.ms-bands rect { opacity: 0.1; }
.ms-stalk { fill: none; stroke: #2c5a33; stroke-width: 3.2; stroke-linecap: round; }
.ms-cattail-head { fill: #6b4a2c; }
.ms-ground-shadow { fill: #0a2a18; opacity: 0.25; }
/* the flamingo */
.ms-legs { fill: none; stroke: #4a4d53; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ms-legs-shine { fill: none; stroke: #d7dbe0; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.ms-pink-tail { fill: var(--pink-b); }
.ms-pink-belly { fill: var(--pink-b); opacity: 0.45; }
.ms-neck { fill: none; stroke: var(--pink-a); stroke-width: 10; stroke-linecap: round; }
/* the flamingo's wardrobe (flamingo.py) */
.fm-red { fill: var(--bdg-red); stroke: var(--bdg-red); stroke-width: 1; stroke-linejoin: round; }
.fm-stripe { fill: none; stroke: var(--bdg-cream); stroke-width: 1.6; stroke-linecap: round; }
.fm-stripe-fill, .fm-dot { fill: var(--bdg-cream); }
.fm-fringe { fill: none; stroke: var(--bdg-red); stroke-width: 1.2; stroke-linecap: round; }
.fm-rib { fill: none; stroke: var(--bdg-cream); stroke-width: 1.3; stroke-linecap: round; opacity: 0.7; }
.fm-fur { fill: var(--fm-white); }
.fm-petal { fill: var(--fm-white); }
.fm-daisy-eye { fill: var(--fm-yellow); }
.fm-vine { fill: none; stroke: var(--fm-leaf); stroke-width: 1.4; stroke-linecap: round; }
.fm-lei-0 { fill: var(--fm-yellow); } .fm-lei-1 { fill: var(--fm-orange); } .fm-lei-2 { fill: var(--fm-white); } .fm-lei-3 { fill: var(--bdg-red); }
.fm-lens { fill: #15191f; }
.fm-frame { fill: none; stroke: #15191f; stroke-width: 1.8; stroke-linecap: round; }
.fm-glint { fill: none; stroke: #ffffff; stroke-width: 1.3; stroke-linecap: round; opacity: 0.75; }
.fm-witch { fill: var(--fm-witch); }
.fm-witch-band { fill: none; stroke: var(--fm-orange); stroke-width: 2; stroke-linecap: round; }
/* shades only while the summer sun is up and it is dry; the witch hat only
   for Halloween week; the Santa hat in December, the beanie after */
.fm-shades, .fm-witch-hat { display: none; }
.madison-scene:is([data-time="day"], [data-time="golden"]):not([data-weather="rain"]):not([data-weather="storm"]) .fm-shades { display: inline; }
.madison-scene[data-holiday="halloween"] .fm-witch-hat { display: inline; }
.madison-scene:not([data-stage="early"]) .fm-santa,
.madison-scene[data-stage="early"] .fm-beanie { display: none; }
.ms-neck-shine { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; opacity: 0.4; }
.ms-beak { fill: #22252b; }
.ms-beak-base { fill: #f3c44f; }
.ms-eye-ring { fill: #f7e08a; }
.ms-shine { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.ms-ripple { fill: none; stroke: var(--wave); stroke-width: 2; }
/* the badger and the boat */
.ms-rod { fill: none; stroke: #6b4a2b; stroke-width: 5; stroke-linecap: round; }
.ms-line { fill: none; stroke: #f6f6f0; stroke-width: 1.3; stroke-opacity: 0.85; }
.ms-bobber-top { fill: #e5383b; }
.ms-bobber-bot { fill: #ffffff; }
.ms-curd { fill: #ffefb4; }
.ms-curd-shine { stroke: #ffffff; stroke-width: 2; stroke-linecap: round; }
.ms-paw { fill: var(--fur-dark); }
.ms-reel { fill: #3a3a3c; }
.ms-reel-hub { fill: #b9bcc2; }
.ms-fur-line { fill: none; stroke: var(--fur-shade); stroke-width: 1.6; stroke-linecap: round; opacity: 0.6; }
.ms-boat-rim { fill: none; stroke: var(--boat-rim); stroke-width: 7; stroke-linecap: round; }
.ms-boat-rim-hi { fill: none; stroke: #ffffff; stroke-opacity: 0.45; stroke-width: 1.5; stroke-linecap: round; }
.ms-boat-plank { fill: none; stroke: #000; stroke-opacity: 0.14; stroke-width: 2; }
.ms-boat-plank-hi { fill: none; stroke: #fff; stroke-opacity: 0.18; stroke-width: 1.2; }
.ms-oar { fill: none; stroke: #7a5634; stroke-width: 4; stroke-linecap: round; }
.ms-oar-blade { fill: #8c6540; }
.ms-oarlock { fill: none; stroke: #3a3a3c; stroke-width: 2.4; stroke-linecap: round; }
.ms-lamp { opacity: var(--lamp-op); }
.ms-lamp-pole { stroke: #3a2a1c; stroke-width: 3; }
.ms-lamp-body { fill: #ffe6a3; stroke: #3a2a1c; stroke-width: 2; }
.ms-ear { fill: var(--fur-dark); }
.ms-ear-in { fill: var(--fur-white); opacity: 0.7; }
.ms-fur-white { fill: var(--fur-white); }
.ms-badge { fill: var(--fur-dark); }
.ms-eye-arc { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; }
.ms-nose { fill: #1b1918; }
.ms-mouth { fill: none; stroke: #1b1918; stroke-width: 2.6; stroke-linecap: round; }
.ms-crown { fill: var(--fur-dark); opacity: 0.92; }
/* his clothes, by season (badger.py) */
.bdg-collar { fill: var(--bdg-black); opacity: 0.9; }
.bdg-placket { fill: none; stroke: var(--bdg-black); stroke-opacity: 0.45; stroke-width: 1.6; }
.bdg-button { fill: var(--bdg-cream); opacity: 0.85; }
.bdg-scarf { fill: var(--bdg-green); stroke: var(--bdg-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bdg-scarf-stripe { fill: none; stroke: var(--bdg-cream); stroke-width: 2.2; stroke-linecap: round; opacity: 0.9; }
.bdg-fringe { fill: none; stroke: var(--bdg-green); stroke-width: 1.6; stroke-linecap: round; }
.bdg-mitten { fill: var(--bdg-green); }
.bdg-red-sh { fill: var(--bdg-red-sh); }
.bdg-zip { fill: none; stroke: var(--bdg-red-sh); stroke-width: 2.4; }
.bdg-zip-pull { fill: var(--bdg-cream); }
.bdg-cord { fill: none; stroke: var(--bdg-cream); stroke-width: 1.2; }
.bdg-toggle { fill: var(--bdg-cream); }
.bdg-gloss { fill: none; stroke: #ffffff; stroke-opacity: 0.3; stroke-width: 3; stroke-linecap: round; }
.bdg-ringer { fill: none; stroke: var(--bdg-cream); stroke-width: 4; stroke-linecap: round; }
.bdg-ringer-thin { fill: none; stroke: var(--bdg-cream); stroke-width: 2.4; stroke-linecap: round; }
.bdg-wedge { fill: var(--cheese-a); stroke: var(--cheese-b); stroke-width: 1; stroke-linejoin: round; }
.bdg-wedge-hole { fill: var(--cheese-b); }
.ms-bubble { fill: #ffffff; filter: drop-shadow(0 6px 10px rgba(4, 32, 44, 0.25)); }
.ms-bubble-text { font-family: var(--display); font-weight: 800; font-size: 22px; fill: #12302c; letter-spacing: -0.01em; }

/* interactive parts */
.madison-scene { pointer-events: none; }
.ms-badger, .ms-flamingo, .ms-tower { pointer-events: visiblePainted; cursor: pointer; outline: none; }
.ms-flamingo:focus-visible .ms-neck,
.ms-tower:focus-visible .ms-crane { stroke: #d9f26b; stroke-width: 8; }

/* transform origins and resting states */
.madison-scene g, .madison-scene path, .madison-scene rect, .madison-scene ellipse, .madison-scene circle { transform-box: fill-box; }
.ms-boat-bob { transform-origin: 50% 100%; }
.ms-head { transform-origin: 50% 95%; }
.ms-flamingo-spin { transform-origin: 30% 100%; }
.ms-tower-body { transform-origin: 50% 100%; }
.ms-cattail { transform-origin: 50% 100%; }
.ms-sail-track { transform: translate(700px, 548px); }
.ms-far-sail-track { transform: translate(300px, 462px); }
.ms-duck-track { transform: translate(1300px, 690px); }
.ms-geese-track { transform: translate(-200px, 96px); }
.ms-nope, .ms-squeak { transform-origin: 18% 100%; opacity: 0; transform: scale(0.6); }
.ms-eyes-happy { opacity: 0; }
.ms-curd-fly { opacity: 0; }
.ms-ripple { opacity: 0; }

/* ambient motion ----------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ms-in { animation: ms-intro 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .ms-in-sun { animation: ms-intro-sun 2.4s cubic-bezier(.2,.7,.2,1) both; }
  .ms-cloud-1 { animation: ms-drift 90s linear infinite -10s; }
  .ms-cloud-2 { animation: ms-drift 120s linear infinite -60s; }
  .ms-cloud-3 { animation: ms-drift 100s linear infinite -80s; }
  .ms-cloud-4 { animation: ms-drift 140s linear infinite -30s; }
  .ms-geese-track { animation: ms-geese 34s linear infinite 3s; }
  .ms-flap { animation: ms-flap 0.9s ease-in-out infinite; transform-origin: 50% 50%; }
  .madison-scene:is([data-time="night"], [data-time="dusk"], [data-time="dawn"]) .ms-stars circle:nth-child(3n) { animation: ms-twinkle 3s ease-in-out infinite; }
  .madison-scene:is([data-time="night"], [data-time="dusk"], [data-time="dawn"]) .ms-stars circle:nth-child(4n+1) { animation: ms-twinkle 4.4s ease-in-out infinite -1.5s; }
  .ms-glit-0 { animation: ms-glint 2.6s ease-in-out infinite; }
  .ms-glit-1 { animation: ms-glint 2.6s ease-in-out infinite -0.9s; }
  .ms-glit-2 { animation: ms-glint 2.6s ease-in-out infinite -1.7s; }
  .ms-waves-1 { animation: ms-lap 6s ease-in-out infinite; }
  .ms-waves-2 { animation: ms-lap 8s ease-in-out infinite reverse; }
  .ms-far-sail-track { animation: ms-far-sail 140s linear infinite -40s; }
  .ms-sail-track { animation: ms-sail 70s linear infinite -24s; }
  .ms-sailboat, .ms-far-sail { animation: ms-rock 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
  .ms-duck-track { animation: ms-ducks 80s linear infinite -26s; }
  .ms-paddle { animation: ms-paddle 1.1s ease-in-out infinite; }
  .ms-cattail { animation: ms-sway 5s ease-in-out infinite; }
  .ms-boat-bob { animation: ms-bob 4s ease-in-out infinite; }
  .ms-head { animation: ms-nod 8s ease-in-out infinite; }
  .ms-bobber { animation: ms-bobber 2.6s ease-in-out infinite; }
  .ms-ripple.r1 { animation: ms-ring 4s ease-out infinite; }
  .ms-ripple.r2 { animation: ms-ring 4s ease-out infinite -2s; }
  .ms-ripple.r3 { animation: ms-ring 2.6s ease-out infinite; }
  .ms-flamingo-spin { animation: ms-wobble 6s ease-in-out infinite; }
  .ms-tower-body { animation: ms-grow 18s ease-in-out infinite 5s; }
  .ms-tower .ms-nope { animation: ms-nope 18s ease-in-out infinite 5s; }
  .ms-lamp-halo { animation: ms-flicker 2.2s ease-in-out infinite; transform-origin: 50% 50%; }
  .ms-rays { animation: ms-rays 240s linear infinite; }
  .madison-scene.is-paused, .madison-scene.is-paused * { animation-play-state: paused !important; }
}
@keyframes ms-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes ms-intro { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ms-intro-sun { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes ms-drift { from { transform: translateX(-420px); } to { transform: translateX(1720px); } }
@keyframes ms-geese { 0% { transform: translate(1700px, 120px); } 100% { transform: translate(-260px, 40px); } }
@keyframes ms-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-0.6); } }
@keyframes ms-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ms-shimmer { 0%, 100% { transform: scaleX(1) translateX(0); } 50% { transform: scaleX(1.015) translateX(3px); } }
@keyframes ms-glint { 0%, 100% { opacity: 0.15; } 50% { opacity: var(--glitter-op); } }
@keyframes ms-lap { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
@keyframes ms-far-sail { from { transform: translate(-60px, 462px); } to { transform: translate(1660px, 462px); } }
@keyframes ms-sail { from { transform: translate(-120px, 548px); } to { transform: translate(1720px, 548px); } }
@keyframes ms-rock { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(3px); } }
@keyframes ms-ducks { from { transform: translate(1700px, 690px); } to { transform: translate(-240px, 690px); } }
@keyframes ms-paddle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ms-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ms-bob { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(5px) rotate(0.7deg); } }
@keyframes ms-nod { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-5deg); } 94% { transform: rotate(4deg); } }
@keyframes ms-bobber { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes ms-ring { 0% { opacity: 0.7; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ms-wobble { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes ms-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: 0.85; transform: scale(0.96); } 70% { opacity: 1; transform: scale(1.04); } }
/* the tower creeps up past the dome, gets told off, and shrinks back */
@keyframes ms-grow {
  0%, 30% { transform: scaleY(1); }
  44% { transform: scaleY(2.2); }
  50% { transform: scaleY(2.25); }
  56% { transform: scaleY(0.92); }
  62%, 100% { transform: scaleY(1); }
}
@keyframes ms-nope {
  0%, 44% { opacity: 0; transform: scale(0.6); }
  48%, 58% { opacity: 1; transform: scale(1); }
  64%, 100% { opacity: 0; transform: scale(0.6); }
}

/* the catch: JS adds .is-catching for 3.2 s */
.is-catching .ms-bobber { animation: ms-dip 0.5s ease-in 2 !important; }
.is-catching .ms-curd-fly { animation: ms-curd 1.3s cubic-bezier(.3,.7,.4,1) 0.5s both; }
.is-catching .ms-squeak { animation: ms-pop 1.5s ease-out 1.6s both; }
.is-catching .ms-eyes-open { animation: ms-hide 1.6s steps(1) 1.5s both; }
.is-catching .ms-eyes-happy { animation: ms-show 1.6s steps(1) 1.5s both; }
@keyframes ms-dip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.ms-badger { --curd-mx: 90px; --curd-my: -230px; --curd-x: 206px; --curd-y: -96px; }
@keyframes ms-curd {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(var(--curd-mx), var(--curd-my)) rotate(200deg); }
  100% { opacity: 0; transform: translate(var(--curd-x), var(--curd-y)) rotate(380deg) scale(0.6); }
}
@keyframes ms-pop {
  0% { opacity: 0; transform: scale(0.5); }
  15% { opacity: 1; transform: scale(1.08); }
  25%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}
@keyframes ms-hide { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ms-show { 0% { opacity: 1; } 100% { opacity: 0; } }

/* the flamingo spin and the tower retry, on press */
.is-spinning .ms-flamingo-spin { animation: ms-spin 1.1s cubic-bezier(.3,.7,.3,1) !important; }
@keyframes ms-spin { 0% { transform: scaleX(1); } 25% { transform: scaleX(-1); } 50% { transform: scaleX(1); } 75% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.is-trying .ms-tower-body { animation: ms-grow-once 3.2s ease-in-out !important; }
.is-trying .ms-nope { animation: ms-nope-once 3.2s ease-in-out !important; }
@keyframes ms-grow-once {
  0%, 10% { transform: scaleY(1); }
  40% { transform: scaleY(2.2); }
  48% { transform: scaleY(2.25); }
  58% { transform: scaleY(0.92); }
  68%, 100% { transform: scaleY(1); }
}
@keyframes ms-nope-once {
  0%, 40% { opacity: 0; transform: scale(0.6); }
  46%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .madison-scene, .madison-scene * { animation: none !important; transition: none !important; }
  .is-catching .ms-squeak, .is-trying .ms-nope { opacity: 1; transform: none; }
  .is-catching .ms-eyes-open { opacity: 0; }
  .is-catching .ms-eyes-happy { opacity: 1; }
}

/* ---------------------------------------------------------
   MOODS WITHIN A TIME OF DAY (data-sub, set by site.js from the real sun)
   dawn: blue | sunrise    day: morning | midday | afternoon
   dusk: afterglow | blue  night: evening | late | predawn
   --------------------------------------------------------- */

/* blue hour: the sun is 3-9 degrees down; deep cobalt sky, the city lights
   coming on, a last warm band on the horizon on the sun's side */
.madison-scene[data-time="dusk"][data-sub="blue"] {
  --sky-a: #0c1746; --sky-b: #233381; --sky-c: #c26f84;
  --cloud-a: #5a5a98; --cloud-b: #2a2f66; --mist: #7a5f93;
  --water-a: #6a5588; --water-b: #1c2a62; --water-c: #090f30;
  --lt: #1b2260; --lt-amt: 58%;
  --stars-op: 0.75; --glow-op: 0.85; --lamp-op: 1; --moon-op: 0.85; --ter-lamp-op: 1; --cars-op: 1;
  --win: #ffd36b; --cap-win: #ffd36b; --arch-a: #ffd36b; --arch-b: #f0a43a; --reflect: #ffd9a8; --reflect-op: 0.3;
  --bloom-op: 0.6; --band-op: 0.8; --rays-op: 0; --sun: #ff7d63; --sun-core: #ffb89a;
}
/* first light: cold cobalt, quiet; lavender clouds, a mist lying on the still
   lake, no glitter until the sun is up */
.madison-scene[data-time="dawn"][data-sub="blue"] {
  --sky-a: #0e1a4c; --sky-b: #2f3f86; --sky-c: #b98da4;
  --cloud-a: #8b85b8; --cloud-b: #4a4d84; --mist: #b8a6c4;
  --water-a: #8a84b0; --water-b: #2b3a70; --water-c: #0c183e;
  --lt: #2a3270; --lt-amt: 52%;
  --stars-op: 0.5; --glow-op: 0.7; --lamp-op: 1; --moon-op: 0.7; --ter-lamp-op: 0.8; --cars-op: 0.6;
  --win: #ffd36b; --cap-win: #ffd36b; --lake-mist-op: 0.9; --glitter-op: 0; --sunpath-op: 0.2;
  --bloom-op: 0.55; --band-op: 0.6; --rays-op: 0; --sun: #f0a08a; --sun-core: #ffd4bc;
}
/* sunrise: peach and rose, cool lavender shadows, the mist lifting */
.madison-scene[data-time="dawn"][data-sub="sunrise"] {
  --lt: #ffb39a; --lt-amt: 22%; --cloud-a: #fbe3ea; --cloud-b: #cfa4c6; --mist: #f3d6d6;
  --cap-shade: #b7a5b6; --bldg-shade: #a596ad; --water-b: #8f9fc8; --lake-mist-op: 0.5; --glitter-op: 0.5; --rays-op: 0.26;
}
/* day: crisp cool mornings, bright high-contrast middays, warm afternoons */
.madison-scene[data-time="day"][data-sub="morning"] {
  --lt: #d7ecff; --lt-amt: 10%; --sky-a: #4a9fdf; --sky-b: #a2d6f3; --sky-c: #eef8ff;
  --cap-shade: #b7b3a8; --water-a: #9ed2e2; --water-b: #3f9fc2; --cloud-b: #d6e9f5; --city-haze-op: 0.35;
}
.madison-scene[data-time="day"][data-sub="midday"] {
  --lt: #ffffff; --lt-amt: 0%; --sky-a: #3d97e0; --sky-b: #9dd7f4; --sky-c: #e6f6f8;
  --cap-shade: #b5ac95; --water-a: #86cde0; --water-b: #2f98bf; --water-c: #145a7c; --glitter-op: 1; --city-haze-op: 0.3;
}
.madison-scene[data-time="day"][data-sub="afternoon"] {
  --lt: #ffdca6; --lt-amt: 14%; --sky-a: #5aa6d8; --sky-b: #b3dbec; --sky-c: #fff0d0;
  --sun: #ffc85a; --cloud-a: #fffaf0; --cloud-b: #e9d9c8; --water-a: #a6d0d8; --water-b: #4d9bb4; --city-haze-op: 0.55; --bloom-op: 0.45;
}
/* sunset afterglow: pink-violet sky, clouds lit from below, a rose band on the water */
.madison-scene[data-time="dusk"][data-sub="afterglow"] {
  --sky-a: #35296c; --sky-b: #a65a8c; --sky-c: #ff9c7c;
  --cloud-a: #ffb8a4; --cloud-b: #8c5086; --mist: #f7a58a;
  --water-a: #f29a88; --water-b: #6a5490; --water-c: #241f56; --ter-lamp-op: 0.6; --cars-op: 0.7;
  --band-op: 1; --bloom-op: 0.9; --rays-op: 0.2; --stars-op: 0.3;
}
/* early evening: the city is up, every window lit, lamps along the Terrace,
   traffic on John Nolen Drive, warm light on the water */
.madison-scene[data-time="night"][data-sub="evening"] {
  --sky-a: #0a1335; --sky-b: #182a5c; --sky-c: #2f4b7e;
  --glow-op: 1; --ter-lamp-op: 1; --cars-op: 1; --reflect-op: 0.36; --water-a: #2a4878;
  --cloud-a: #3b4e78; --cloud-b: #202e55;
}
/* late night: still. Most offices dark, the Capitol floodlit, a deeper sky,
   every star out, no traffic, the badger dozes */
.madison-scene[data-sub="late"] {
  --sky-a: #02061a; --sky-b: #091334; --sky-c: #152650; --lt-amt: 80%; --stars-op: 1;
  --cloud-a: #28345c; --cloud-b: #141d3c; --mist: #243a60;
  --water-a: #1b3159; --water-b: #0c1b3a; --water-c: #04091c;
  --glow-op: 0.8; --ter-lamp-op: 0.7; --cars-op: 0; --reflect-op: 0.22; --city-haze-op: 0.2; --lamp-op: 0.85;
}
.madison-scene[data-sub="late"] .ms-winfill { fill: url(#ms-winpat-late); }
/* before dawn: the first hint of light on the east (right) horizon, a cold
   teal creeping into the sky, early commuters, mist on the lake */
.madison-scene[data-sub="predawn"] {
  --sky-a: #050c26; --sky-b: #0f2048; --sky-c: #2d4a72; --stars-op: 0.7;
  --east-op: 1; --east-a: #f0b07e; --east-b: #3f6e92; --lake-mist-op: 0.55; --mist: #6f8aa6;
  --cloud-a: #3a4a6c; --cloud-b: #1c2744; --water-a: #2e4a6e; --water-b: #11274a;
  --glow-op: 0.75; --ter-lamp-op: 0.8; --cars-op: 0.5; --city-haze-op: 0.35;
}
.madison-scene[data-sub="predawn"] .ms-winfill { fill: url(#ms-winpat-late); }
.ms-win-off { fill: var(--bldg-shade); opacity: 0.55; }

/* the sleeping badger: eyes shut, a slow nod, a few Zs drifting up.
   A press (or the curd) wakes him: .is-catching shows the usual catch. */
.ms-eyes-sleep, .ms-zzz { display: none; }
.ms-eye-sleep { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; }
.ms-z { fill: none; stroke: #f4f1e4; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.ms-z1 { font-size: 15px; } .ms-z2 { font-size: 19px; } .ms-z3 { font-size: 24px; }
.madison-scene[data-sub="late"] .ms-badger:not(.is-catching) .ms-eyes-open { opacity: 0; }
.madison-scene[data-sub="late"] .ms-badger:not(.is-catching) .ms-eyes-sleep,
.madison-scene[data-sub="late"] .ms-badger:not(.is-catching) .ms-zzz { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .madison-scene[data-sub="late"] .ms-head { animation: ms-doze 6s ease-in-out infinite; }
  .madison-scene[data-sub="late"] .ms-badger:not(.is-catching) .ms-z { animation: ms-z-float 3.6s ease-out infinite; transform-box: fill-box; }
  .ms-z2 { animation-delay: -1.2s; } .ms-z3 { animation-delay: -2.4s; }
}
@keyframes ms-doze { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg) translateY(3px); } }
@keyframes ms-z-float { 0% { opacity: 0; transform: translate(-8px, 10px) scale(0.7); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: translate(10px, -14px) scale(1.1); } }

/* ---------------------------------------------------------
   REAL WEATHER (data-weather from /api/madison-weather, KMSN)
   clear | cloudy | fog | rain | storm | flurries | snow; empty when unknown
   --------------------------------------------------------- */
.madison-scene { --oc-op: 0; --oc-a: #a3adb8; --oc-b: #d9dee2; --fog: #e4e8ea; }
.madison-scene[data-time="dawn"] { --oc-a: #8e8aa6; --oc-b: #cdb5bb; --fog: #d9cdd2; }
.madison-scene[data-time="golden"] { --oc-a: #a68f86; --oc-b: #e2c6a6; --fog: #e8d6c2; }
.madison-scene[data-time="dusk"] { --oc-a: #3e3d5c; --oc-b: #8c6a80; --fog: #8e86a0; }
/* at night a low deck is near-black above and glows faintly with the city's light below */
.madison-scene[data-time="night"] { --oc-a: #0d1222; --oc-b: #2e2b3a; --fog: #3e4357; --deck-glow-op: 1; }
.madison-scene[data-sub="late"] { --deck-glow: #d98f4a; --oc-b: #26222f; }
.ms-overcast { opacity: var(--oc-op); }
.madison-scene:not([data-weather="cloudy"]):not([data-weather="fog"]):not([data-weather="rain"]):not([data-weather="storm"]):not([data-weather="snow"]):not([data-weather="flurries"]) .ms-overcast { display: none; }
.madison-scene[data-weather="cloudy"] { --oc-op: 0.62; }
.madison-scene[data-weather="fog"] { --oc-op: 0.55; }
.madison-scene[data-weather="flurries"] { --oc-op: 0.55; }
.madison-scene[data-weather="rain"], .madison-scene[data-weather="snow"] { --oc-op: 0.8; }
/* a storm: darker, with a cold green-grey cast over everything (the doubled
   attribute outranks the mood palettes) */
.madison-scene[data-weather="storm"][data-weather="storm"] {
  --oc-op: 0.94; --oc-a: #27333a; --oc-b: #5a6b6e; --lt: #4f6062; --lt-amt: 32%;
  --sky-a: #2b393e; --sky-b: #55676b; --sky-c: #8b9c9b; --mist: #93a3a2; --cloud-a: #6d7d7e; --cloud-b: #3f4d50;
  --water-a: #5f7a7f; --water-b: #2f4a50; --water-c: #15262b; --wave: rgba(220, 232, 230, 0.35);
  --bldg-lit: #9eaaa9; --bldg-lit2: #b3bdbb; --bldg-shade: #5e6c6e; --bw-lit: #a9a09a; --bw-lit2: #bcb2aa; --bw-shade: #6a615f;
  --cap-lit: #d9dcd3; --cap-mid: #c0c3b8; --cap-shade: #8d9188; --cap-hi: #e8eae3; --ter-lit: #cfd3cb; --ter-shade: #9ea39a;
  --ter-roof: #3f6b4c; --ter-roof-lit: #5f8a62; --arch-a: #6f8a90; --arch-b: #2f4a52; --city-haze-op: 0.6;
}
.madison-scene[data-weather="storm"][data-weather="storm"][data-time="night"] { --lt: #0a1226; --lt-amt: 74%; --oc-a: #0a1114; --oc-b: #1f2a2c; --sky-a: #05090c; --sky-b: #0e1a1d; --sky-c: #1c2b2e; --water-a: #17292d; --water-b: #0b171a; --water-c: #040a0c; }
/* under rain, snow or fog the fair-weather cumulus melt into the deck */
.madison-scene:is([data-weather="rain"], [data-weather="storm"], [data-weather="snow"], [data-weather="fog"]) .ms-cloud { opacity: 0.3; }
.madison-scene[data-weather="cloudy"] .ms-cloud { opacity: 0.75; }
/* under an overcast sky: no sun disc or rays, no stars, flat light, dull water */
.madison-scene:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) :is(.ms-rays, .ms-stars, .ms-glitter-pos) { display: none; }
.madison-scene:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) .ms-moon-pos { display: none; }
.madison-scene:is([data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) .ms-sun-pos { display: none; }
.madison-scene:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) { --lt: #8f99a6; --lt-amt: 24%; }
.madison-scene:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"])[data-time="night"] { --lt: #0a1226; --lt-amt: 74%; }

.ms-wx > g { display: none; }
.madison-scene[data-weather="fog"] .ms-wx-fog { display: inline; }
.madison-scene:is([data-weather="rain"], [data-weather="storm"]) .ms-wx-rain { display: inline; }
.madison-scene:is([data-weather="snow"], [data-weather="flurries"]) .ms-wx-snow { display: inline; }
.madison-scene[data-weather="flurries"] .ms-flakes-1, .madison-scene[data-weather="flurries"] .ms-flakes-2 { display: none; }
/* rain in three sheets at different depths: near streaks heavier and brighter, far ones fine and faint */
.ms-rain { fill: none; stroke: #e6edf3; stroke-linecap: round; }
.ms-rain-0 { stroke-width: 1.9; opacity: 0.5; }
.ms-rain-1 { stroke-width: 1.4; opacity: 0.36; }
.ms-rain-2 { stroke-width: 1; opacity: 0.22; }
.madison-scene[data-weather="rain"] .ms-rain-2 { display: none; }
.madison-scene[data-time="night"] .ms-rain { stroke: #c3cde0; }
.madison-scene[data-time="night"] .ms-rain-0 { opacity: 0.34; }
.madison-scene[data-time="night"] .ms-rain-1 { opacity: 0.22; }
.madison-scene[data-time="night"] .ms-rain-2 { opacity: 0.14; }
.ms-flakes { fill: #ffffff; }
.ms-flakes-0 { opacity: 0.95; } .ms-flakes-1 { opacity: 0.75; } .ms-flakes-2 { opacity: 0.5; }
.madison-scene[data-time="night"] .ms-flakes { fill: #e4eaf5; }
.ms-fog-1 { opacity: 0.75; } .ms-fog-2 { opacity: 0.6; }
.madison-scene[data-weather="storm"] .ms-fog-2 { display: inline; opacity: 0.35; }
.madison-scene[data-weather="storm"] .ms-wx-storm { display: inline; }
.ms-lightning { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ms-rain-0 { animation: ms-fall 0.9s linear infinite; }
  .ms-rain-1 { animation: ms-fall 1.1s linear infinite -0.4s; }
  .ms-rain-2 { animation: ms-fall 1.3s linear infinite -0.8s; }
  .ms-flakes-0 { animation: ms-snow 14s linear infinite; }
  .ms-flakes-1 { animation: ms-snow 19s linear infinite -6s; }
  .ms-flakes-2 { animation: ms-snow 25s linear infinite -11s; }
  .ms-fog-1 { animation: ms-fog 40s ease-in-out infinite; }
  .ms-fog-2 { animation: ms-fog 55s ease-in-out infinite reverse; }
  .madison-scene[data-weather="storm"] .ms-lightning { animation: ms-flash 13s steps(1) infinite 4s; }
  /* traffic along the Terrace: two cars toward us from the right, one pair of tail lights the other way */
  .madison-scene:is([data-time="night"], [data-time="dusk"], [data-time="dawn"]) .ms-car-1 { animation: ms-car-left 26s linear infinite; }
  .madison-scene:is([data-time="night"], [data-time="dusk"], [data-time="dawn"]) .ms-car-2 { animation: ms-car-left 34s linear infinite -17s; }
  .madison-scene:is([data-time="night"], [data-time="dusk"], [data-time="dawn"]) .ms-car-3 { animation: ms-car-right 30s linear infinite -9s; }
}
@keyframes ms-fall { from { transform: translate(0, 0); } to { transform: translate(-196px, 700px); } }
@keyframes ms-snow { from { transform: translate(0, 0); } 50% { transform: translate(-30px, 350px); } to { transform: translate(10px, 700px); } }
@keyframes ms-fog { 0%, 100% { transform: translateX(-30px); } 50% { transform: translateX(30px); } }
@keyframes ms-flash { 0%, 100% { opacity: 0; } 61% { opacity: 0.7; } 62% { opacity: 0.1; } 63.5% { opacity: 0.5; } 65% { opacity: 0; } }
@keyframes ms-car-left { 0%, 8% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 92%, 100% { opacity: 0; } from { transform: translate(1040px, 431px); } to { transform: translate(560px, 431px); } }
@keyframes ms-car-right { 0%, 8% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 92%, 100% { opacity: 0; } from { transform: translate(560px, 433px); } to { transform: translate(1040px, 433px); } }

/* ---------------------------------------------------------
   ACTIVITY FOLLOWS THE HOUR
   --------------------------------------------------------- */
/* boats and ducks are off the lake after dark and before first light */
.madison-scene:is([data-time="night"], [data-sub="blue"]) :is(.ms-sail-track, .ms-far-sail-track, .ms-duck-track) { display: none; }
/* the crane tower gives up for the night */
.madison-scene[data-time="night"] .ms-tower-body, .madison-scene[data-time="night"] .ms-tower .ms-nope { animation: none; }
/* before sunrise the lake is still: no glitter yet, a little mist */
.madison-scene[data-time="dawn"][data-sub="blue"] { --glitter-op: 0.15; }

/* ducklings only in their season (data-brood, late May to mid-August),
   and then the parent is the hen, not the drake */
.madison-scene:not([data-brood="yes"]) .ms-paddle { display: none; }
.madison-scene[data-brood="yes"] { --duck-head: #7a5a3c; --duck: #9a7a58; }
.madison-scene[data-brood="yes"] .ms-duck-collar { display: none; }

/* bigger, easier press targets (an invisible hit area) and a clear focus ring */
.ms-hit { fill: transparent; }
.ms-badger:focus-visible .ms-hit, .ms-flamingo:focus-visible .ms-hit, .ms-tower:focus-visible .ms-hit {
  stroke: #d9f26b; stroke-width: 4; stroke-dasharray: 8 6; fill: rgba(217, 242, 107, 0.08);
}


/* ===== fall.css ===== */
/* Fall (tools/scene/seasons/fall.py). Sections: base materials by stage,
   fall air and light, canopy materials and light, sun side, stage
   visibility, moods (dawn mist, evening smoke, frosty nights), weather,
   paint, motion. Prefix: fl-. Every animation sits in the selector that
   reveals its element, so hidden art costs nothing. */

/* BASE MATERIALS BY STAGE ------------------------------------- */
.madison-scene[data-season="fall"] .ms-leafy { display: none; }
.madison-scene[data-season="fall"][data-stage="early"] {
  --m-tree-a: #6aa65a; --m-tree-b: #2f6f4a; --m-tree-back: #3f7a55;
  --m-bank-a: #8dbf66; --m-bank-b: #5a9b50; --m-bank-c: #356d3c;
  --m-haze-a: #a9c5a6; --m-haze-b: #8aab92;
}
.madison-scene[data-season="fall"][data-stage="peak"] {
  --m-tree-a: #e0782f; --m-tree-b: #9c3c1f; --m-tree-back: #b8743a;
  --m-bank-a: #bdb95a; --m-bank-b: #8a924a; --m-bank-c: #536c38;
  --m-haze-a: #cdb08a; --m-haze-b: #a98d6e;
}
.madison-scene[data-season="fall"][data-stage="late"] {
  --m-tree-a: #8a6a4c; --m-tree-b: #5a4332; --m-tree-back: #8d8073;
  --m-bank-a: #d2b071; --m-bank-b: #a9864c; --m-bank-c: #6f5734;
  --m-haze-a: #a7b0b6; --m-haze-b: #86929b;
}

/* FALL AIR AND LIGHT ---------------------------------------------
   Crisp, clear air: a deeper blue sky by day and sharper far hills than
   summer's humid haze. Late fall keeps a warm, low sun all day. Weather
   rules in base.css (cloudy, fog, rain...) set their own flat light, so
   the warm light only applies when the sky is clear or unknown. */
.madison-scene[data-season="fall"][data-time="day"] { --sky-a: #4f9fe2; --sky-b: #a2d3f3; }
.madison-scene[data-season="fall"][data-stage="late"][data-time="day"] { --sky-a: #5aa3de; --sky-b: #b0d6ee; }
.madison-scene[data-season="fall"][data-stage="late"][data-time="day"]:not([data-weather="cloudy"]):not([data-weather="fog"]):not([data-weather="rain"]):not([data-weather="storm"]):not([data-weather="snow"]):not([data-weather="flurries"]) {
  --lt: #ffd9a6; --lt-amt: 16%; --sky-c: #f6ecd8;
  --water-a: #93b7c9; --water-b: #4f829c; --water-c: #22465a;
}
.madison-scene[data-season="fall"][data-stage="late"][data-time="day"][data-sub="morning"]:not([data-weather="cloudy"]):not([data-weather="fog"]):not([data-weather="rain"]):not([data-weather="storm"]):not([data-weather="snow"]):not([data-weather="flurries"]) {
  --lt: #ffe6c4; --lt-amt: 12%; --sky-c: #eef3f6;
}

/* CANOPY MATERIALS, LIT ------------------------------------------
   --fm-*: what the leaves are made of. --fc-*: that material in the
   current light. --fl-*-0/1: the two stops of each tree gradient, lit
   side chosen by data-sun. */
.madison-scene {
  --fm-red-lit: #d9512f; --fm-red-shade: #8a2a1f;
  --fm-orange-lit: #ee8a38; --fm-orange-shade: #b3521d;
  --fm-gold-lit: #f0c04c; --fm-gold-shade: #c08a26;
  --fm-rust-lit: #c9743a; --fm-rust-shade: #7a4020;
  --fm-green-lit: #5f9f5c; --fm-green-shade: #2f6b45;
  --fm-olive-lit: #b2ad45; --fm-olive-shade: #76762c;
  --fm-ever-lit: #2f6a4e; --fm-ever-shade: #163b2f;
  --fm-big-lit: #f2913c; --fm-big-shade: #ad3c1e;
  --fm-bigx-lit: #6aa85a; --fm-bigx-shade: #2d6742;
  --fm-brown: #8a5a32; --fm-bark: #5b4030; --fm-twig: #6e5848; --fm-tuft: #c9a965;
  --fm-birch: #ece6da; --fm-birch-mark: #4a4038; --fm-cot-wall: #d8cdb8; --fm-cot-roof: #6b4a3a;
  --fm-pk-lit: #f5892e; --fm-pk-shade: #b2470f;
  --fc-red-lit: var(--fm-red-lit); --fc-red-shade: var(--fm-red-shade);
  --fc-orange-lit: var(--fm-orange-lit); --fc-orange-shade: var(--fm-orange-shade);
  --fc-gold-lit: var(--fm-gold-lit); --fc-gold-shade: var(--fm-gold-shade);
  --fc-rust-lit: var(--fm-rust-lit); --fc-rust-shade: var(--fm-rust-shade);
  --fc-green-lit: var(--fm-green-lit); --fc-green-shade: var(--fm-green-shade);
  --fc-olive-lit: var(--fm-olive-lit); --fc-olive-shade: var(--fm-olive-shade);
  --fc-ever-lit: var(--fm-ever-lit); --fc-ever-shade: var(--fm-ever-shade);
  --fc-big-lit: var(--fm-big-lit); --fc-big-shade: var(--fm-big-shade);
  --fc-bigx-lit: var(--fm-bigx-lit); --fc-bigx-shade: var(--fm-bigx-shade);
  --fc-brown: var(--fm-brown); --fc-bark: var(--fm-bark); --fc-twig: var(--fm-twig); --fc-tuft: var(--fm-tuft);
  --fc-birch: var(--fm-birch); --fc-birch-mark: var(--fm-birch-mark); --fc-cot-wall: var(--fm-cot-wall); --fc-cot-roof: var(--fm-cot-roof);
  --fl-pk-0: var(--fm-pk-lit); --fl-pk-1: var(--fm-pk-shade);
  --fl-jack-face: #3a1d0b;
  --fl-reflect-op: 0.42; --fl-shadow-op: 0.22; --fl-mist-op: 0; --fl-smoke-op: 0;
}
@supports (color: color-mix(in oklab, red, blue)) {
  .madison-scene {
    --fc-red-lit: color-mix(in oklab, var(--fm-red-lit), var(--lt) var(--lt-amt));
    --fc-red-shade: color-mix(in oklab, var(--fm-red-shade), var(--lt) var(--lt-amt));
    --fc-orange-lit: color-mix(in oklab, var(--fm-orange-lit), var(--lt) var(--lt-amt));
    --fc-orange-shade: color-mix(in oklab, var(--fm-orange-shade), var(--lt) var(--lt-amt));
    --fc-gold-lit: color-mix(in oklab, var(--fm-gold-lit), var(--lt) var(--lt-amt));
    --fc-gold-shade: color-mix(in oklab, var(--fm-gold-shade), var(--lt) var(--lt-amt));
    --fc-rust-lit: color-mix(in oklab, var(--fm-rust-lit), var(--lt) var(--lt-amt));
    --fc-rust-shade: color-mix(in oklab, var(--fm-rust-shade), var(--lt) var(--lt-amt));
    --fc-green-lit: color-mix(in oklab, var(--fm-green-lit), var(--lt) var(--lt-amt));
    --fc-green-shade: color-mix(in oklab, var(--fm-green-shade), var(--lt) var(--lt-amt));
    --fc-olive-lit: color-mix(in oklab, var(--fm-olive-lit), var(--lt) var(--lt-amt));
    --fc-olive-shade: color-mix(in oklab, var(--fm-olive-shade), var(--lt) var(--lt-amt));
    --fc-ever-lit: color-mix(in oklab, var(--fm-ever-lit), var(--lt) var(--lt-amt));
    --fc-ever-shade: color-mix(in oklab, var(--fm-ever-shade), var(--lt) var(--lt-amt));
    --fc-big-lit: color-mix(in oklab, var(--fm-big-lit), var(--lt) var(--lt-amt));
    --fc-big-shade: color-mix(in oklab, var(--fm-big-shade), var(--lt) var(--lt-amt));
    --fc-bigx-lit: color-mix(in oklab, var(--fm-bigx-lit), var(--lt) var(--lt-amt));
    --fc-bigx-shade: color-mix(in oklab, var(--fm-bigx-shade), var(--lt) var(--lt-amt));
    --fc-brown: color-mix(in oklab, var(--fm-brown), var(--lt) var(--lt-amt));
    --fc-bark: color-mix(in oklab, var(--fm-bark), var(--lt) var(--lt-amt));
    --fc-twig: color-mix(in oklab, var(--fm-twig), var(--lt) var(--lt-amt));
    --fc-tuft: color-mix(in oklab, var(--fm-tuft), var(--lt) var(--lt-amt));
    --fc-birch: color-mix(in oklab, var(--fm-birch), var(--lt) var(--lt-amt));
    --fc-birch-mark: color-mix(in oklab, var(--fm-birch-mark), var(--lt) var(--lt-amt));
    --fc-cot-wall: color-mix(in oklab, var(--fm-cot-wall), var(--lt) var(--lt-amt));
    --fc-cot-roof: color-mix(in oklab, var(--fm-cot-roof), var(--lt) var(--lt-amt));
    /* the pumpkin is lit from inside after dark, so it only half-follows the light */
    --fl-pk-0: color-mix(in oklab, var(--fm-pk-lit), var(--lt) calc(var(--lt-amt) * 0.5));
    --fl-pk-1: color-mix(in oklab, var(--fm-pk-shade), var(--lt) calc(var(--lt-amt) * 0.5));
    --fl-jack-face: color-mix(in oklab, #3a1d0b, #ffd36b calc(var(--lamp-op) * 100%));
  }
}
.madison-scene[data-time="dusk"] { --fl-reflect-op: 0.34; }
.madison-scene[data-time="night"] { --fl-reflect-op: 0.2; }

/* SUN SIDE: gradients run left to right; morning light comes from the right */
.madison-scene {
  --fl-red-0: var(--fc-red-shade); --fl-red-1: var(--fc-red-lit);
  --fl-orange-0: var(--fc-orange-shade); --fl-orange-1: var(--fc-orange-lit);
  --fl-gold-0: var(--fc-gold-shade); --fl-gold-1: var(--fc-gold-lit);
  --fl-rust-0: var(--fc-rust-shade); --fl-rust-1: var(--fc-rust-lit);
  --fl-green-0: var(--fc-green-shade); --fl-green-1: var(--fc-green-lit);
  --fl-olive-0: var(--fc-olive-shade); --fl-olive-1: var(--fc-olive-lit);
  --fl-ever-0: var(--fc-ever-shade); --fl-ever-1: var(--fc-ever-lit);
  --fl-big-0: var(--fc-big-shade); --fl-big-1: var(--fc-big-lit);
  --fl-bigx-0: var(--fc-bigx-shade); --fl-bigx-1: var(--fc-bigx-lit);
}
.madison-scene[data-sun="pm"] {
  --fl-red-0: var(--fc-red-lit); --fl-red-1: var(--fc-red-shade);
  --fl-orange-0: var(--fc-orange-lit); --fl-orange-1: var(--fc-orange-shade);
  --fl-gold-0: var(--fc-gold-lit); --fl-gold-1: var(--fc-gold-shade);
  --fl-rust-0: var(--fc-rust-lit); --fl-rust-1: var(--fc-rust-shade);
  --fl-green-0: var(--fc-green-lit); --fl-green-1: var(--fc-green-shade);
  --fl-olive-0: var(--fc-olive-lit); --fl-olive-1: var(--fc-olive-shade);
  --fl-ever-0: var(--fc-ever-lit); --fl-ever-1: var(--fc-ever-shade);
  --fl-big-0: var(--fc-big-lit); --fl-big-1: var(--fc-big-shade);
  --fl-bigx-0: var(--fc-bigx-lit); --fl-bigx-1: var(--fc-bigx-shade);
}
.fl-big-lit-pm, .madison-scene[data-sun="pm"] .fl-big-lit-am { display: none; }
.madison-scene[data-sun="pm"] .fl-big-lit-pm { display: inline; }
/* cast shadows lean away from the sun; they fade at night and under cloud */
.fl-shadow { fill: #0a2a18; opacity: var(--fl-shadow-op); }
.fl-shadow-pm, .madison-scene[data-sun="pm"] .fl-shadow-am { display: none; }
.madison-scene[data-sun="pm"] .fl-shadow-pm { display: inline; }
.madison-scene:is([data-time="golden"], [data-time="dawn"]) { --fl-shadow-op: 0.26; }
.madison-scene:is([data-time="dusk"], [data-time="night"]) { --fl-shadow-op: 0.08; }
.madison-scene:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"], [data-weather="flurries"]) { --fl-shadow-op: 0.06; }

/* STAGE VISIBILITY -------------------------------------------- */
/* peak colours by default */
.fl-p-red { fill: url(#fl-g-red); } .fl-p-orange { fill: url(#fl-g-orange); } .fl-p-gold { fill: url(#fl-g-gold); }
.fl-p-rust { fill: url(#fl-g-rust); } .fl-p-green { fill: url(#fl-g-green); } .fl-p-olive { fill: url(#fl-g-olive); }
.fl-p-ever { fill: url(#fl-g-ever); }
/* September: most trees still green */
.madison-scene[data-stage="early"] .fl-e-green { fill: url(#fl-g-green); }
.madison-scene[data-stage="early"] .fl-e-olive { fill: url(#fl-g-olive); }
.madison-scene[data-stage="early"] .fl-e-gold { fill: url(#fl-g-gold); }
.madison-scene[data-stage="early"] .fl-e-red { fill: url(#fl-g-red); }
.madison-scene[data-stage="early"] .fl-e-orange { fill: url(#fl-g-orange); }
/* November: bare trees, a few oaks still russet, evergreens unchanged */
.fl-bares { display: none; }
.madison-scene[data-stage="late"] .fl-bares { display: inline; }
.madison-scene[data-stage="late"] .fl-t:not(.fl-keep) { display: none; }
.madison-scene[data-stage="late"] .fl-keep:not(.fl-p-ever) { fill: url(#fl-g-rust); }
/* bare trees reflect as a soft twig-coloured band */
.madison-scene[data-stage="late"] .fl-r:not(.fl-keep) { fill: var(--fc-twig); opacity: 0.55; }
.madison-scene[data-stage="late"] { --fl-reflect-op: 0.32; }
.madison-scene[data-stage="late"][data-time="night"] { --fl-reflect-op: 0.16; }
/* the big maple */
.fl-big-fill { fill: url(#fl-g-big); }
.madison-scene[data-stage="early"] .fl-big-fill { fill: url(#fl-g-bigx); }
.fl-big-lit { fill: var(--fc-gold-lit); opacity: 0.55; }
.madison-scene[data-stage="early"] .fl-big-lit { fill: var(--fc-red-lit); opacity: 0.8; }
.fl-big-shade { fill: var(--fc-big-shade); opacity: 0.45; }
.madison-scene[data-stage="early"] .fl-big-shade { fill: var(--fc-bigx-shade); }
.fl-clings { display: none; }
.madison-scene[data-stage="late"] .fl-big-crown { display: none; }
.madison-scene:not([data-stage="late"]) .fl-big-l1, .madison-scene:not([data-stage="late"]) .fl-big-l2, .madison-scene:not([data-stage="late"]) .fl-big-l3 { display: none; }
.madison-scene[data-stage="late"] .fl-clings { display: inline; }
/* the birches: gold at peak, green-gold in September, bare in November */
.fl-birch-fill { fill: url(#fl-g-gold); }
.fl-birch-top { fill: var(--fc-gold-lit); opacity: 0.5; }
.madison-scene[data-stage="early"] .fl-birch-fill { fill: url(#fl-g-olive); }
.madison-scene[data-stage="early"] .fl-birch-top { fill: var(--fc-olive-lit); }
.madison-scene[data-stage="late"] .fl-birch-crown { display: none; }
.madison-scene:not([data-stage="late"]) .fl-birch-l1, .madison-scene:not([data-stage="late"]) .fl-birch-l2 { display: none; }
/* the bank: litter builds up through the season, grass goes tawny */
.madison-scene[data-stage="early"] .fl-litter, .madison-scene[data-stage="early"] .fl-pile { display: none; }
.madison-scene[data-stage="peak"] .fl-litter-late { display: none; }
.fl-tufts { display: none; }
.madison-scene[data-stage="late"] .fl-tufts { display: inline; }
/* Halloween week only (data-holiday from site.js) */
.fl-jack { display: none; }
.madison-scene[data-holiday="halloween"] .fl-jack { display: inline; }
/* the leaf on the flamingo arrives with peak colour */
.madison-scene[data-stage="early"] .fl-stuck { display: none; }
/* falling leaves: a few in September, a flurry at peak, the last ones in November */
.madison-scene[data-stage="early"] .fl-leaf:nth-child(n+5) { display: none; }
.madison-scene[data-stage="late"] .fl-leaf:nth-child(n+8) { display: none; }
.madison-scene[data-stage="late"] .fl-leaves .fl-lf-red, .madison-scene[data-stage="late"] .fl-leaves .fl-lf-orange { fill: var(--fc-rust-lit); }

/* MOODS --------------------------------------------------------
   Most of a Madison November is dark, so each dark hour gets its own
   character: blue hour and first light bring geese and lake mist, the
   evening is cosy (lit cottage, smoke, the jack-o'-lantern), late night
   is still and frosty, before dawn the frost glints and mist gathers. */
/* lake mist: late-fall first light and mornings, thinning by midday; and fog days */
.fl-mist, .fl-mist-far { display: none; opacity: var(--fl-mist-op); }
.madison-scene[data-season="fall"][data-stage="late"]:is([data-time="dawn"], [data-sub="morning"], [data-sub="predawn"]) :is(.fl-mist, .fl-mist-far),
.madison-scene[data-season="fall"][data-weather="fog"] :is(.fl-mist, .fl-mist-far) { display: inline; }
.madison-scene[data-time="dawn"] { --fl-mist-op: 0.9; }
.madison-scene[data-sub="morning"] { --fl-mist-op: 0.55; }
.madison-scene[data-sub="predawn"] { --fl-mist-op: 0.45; }
.madison-scene[data-weather="fog"] { --fl-mist-op: 0.8; }
/* the cottage: a warm window after dark; smoke on cold days and every night */
.fl-cot-wall { fill: var(--fc-cot-wall); }
.fl-cot-roof { fill: var(--fc-cot-roof); }
.fl-cot-chimney { fill: var(--fc-cot-roof); }
.fl-cot-door { fill: var(--fc-cot-roof); opacity: 0.8; }
.fl-cot-win { fill: var(--win); opacity: 0.9; }
.fl-smoke { display: none; }
.fl-puff { fill: #e9e6e0; opacity: 0.6; }
.madison-scene[data-time="night"] .fl-puff { fill: #aeb4c6; opacity: 0.45; }
.madison-scene[data-season="fall"]:is([data-stage="late"], [data-time="night"], [data-time="dawn"], [data-sub="blue"]) .fl-smoke { display: inline; }
/* frost: a pale wash and glints on the bank in late fall's cold hours */
.fl-frost, .fl-frost-dots { display: none; }
.fl-frost { opacity: 0.8; }
.fl-frost-dots { fill: #ffffff; opacity: 0.55; }
.madison-scene[data-season="fall"][data-stage="late"]:is([data-time="dawn"], [data-sub="late"], [data-sub="predawn"]) :is(.fl-frost, .fl-frost-dots) { display: inline; }
.madison-scene[data-sub="late"] .fl-frost { opacity: 0.45; }
.madison-scene[data-sub="late"] .fl-frost-dots, .madison-scene[data-sub="predawn"] .fl-frost-dots { opacity: 0.8; }
/* late night is quiet: a lone leaf now and then, nothing else stirs */
.madison-scene[data-sub="late"] .fl-leaf:nth-child(n+3) { display: none; }
/* geese: migrating Vs at first light and at the end of the day; one by day in late fall */
.fl-geese-track { display: none; transform: translate(1700px, 150px); }
.madison-scene[data-season="fall"]:is([data-time="dawn"], [data-time="golden"], [data-sub="afterglow"]) .fl-geese-track,
.madison-scene[data-season="fall"][data-stage="late"][data-time="day"] .fl-geese-1 { display: inline; }

/* WEATHER ------------------------------------------------------- */
/* rain: a wet, darker bank, leaves plastered flat, rings on the lake, no leaves in the air */
.madison-scene[data-season="fall"]:is([data-weather="rain"], [data-weather="storm"]) {
  --m-bank-a: #8f8d4e; --m-bank-b: #66703c; --m-bank-c: #3d4e2c; --fm-tuft: #9d8a52; --fm-brown: #5e3c20; --fm-rust-lit: #9a5428; --fm-gold-lit: #c89c3a;
  --water-a: #8ea3ae; --water-b: #52707e; --water-c: #2c414c; --fl-reflect-op: 0.18;
}
.madison-scene[data-season="fall"]:is([data-weather="rain"], [data-weather="storm"])[data-time="night"] { --water-a: #243448; --water-b: #121f33; --water-c: #070e1c; }
.madison-scene[data-season="fall"][data-stage="late"]:is([data-weather="rain"], [data-weather="storm"]) {
  --m-bank-a: #9c8656; --m-bank-b: #74603a; --m-bank-c: #4a3c26;
}
.madison-scene:is([data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) .fl-leaves { display: none; }
.madison-scene:is([data-weather="rain"], [data-weather="storm"]) .fl-litter { opacity: 1; }
.fl-rings { display: none; }
.madison-scene[data-season="fall"]:is([data-weather="rain"], [data-weather="storm"]) .fl-rings { display: inline; }
.fl-ring { fill: none; stroke: var(--mist); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
/* fog: soft and muted; the far shore fades, the lake stops reflecting */
.madison-scene[data-weather="fog"] :is(.fl-canopy, .fl-bares, .fl-cottage) { opacity: 0.72; }
.madison-scene[data-weather="fog"] .fl-reflect { opacity: 0.1; }
.madison-scene[data-weather="fog"] .fl-leaf:nth-child(n+5) { display: none; }
/* under cloud the bank loses its colour a little */
.madison-scene[data-season="fall"][data-weather="cloudy"] { --fl-reflect-op: 0.26; }

/* PAINT -------------------------------------------------------- */
.fl-canopy-back { opacity: 0.82; }
.fl-bark { fill: var(--fc-bark); }
.fl-branch { fill: none; stroke: var(--fc-bark); stroke-linecap: round; stroke-linejoin: round; }
.fl-birch-bark { fill: var(--fc-birch); }
.fl-birch-branch { stroke: var(--fc-twig); }
.fl-birch-mark { fill: none; stroke: var(--fc-birch-mark); stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.fl-twig-haze { fill: var(--fc-twig); opacity: 0.2; }
.fl-brush { fill: var(--fc-twig); opacity: 0.35; }
.fl-bare-back { opacity: 0.7; }
.fl-reflect { opacity: var(--fl-reflect-op); transform-origin: 50% 0; }
.fl-reflect-back { opacity: 0.7; }
.fl-lf-red { fill: var(--fc-red-lit); } .fl-lf-orange { fill: var(--fc-orange-lit); } .fl-lf-gold { fill: var(--fc-gold-lit); }
.fl-lf-rust { fill: var(--fc-rust-lit); } .fl-lf-brown { fill: var(--fc-brown); }
.fl-litter { opacity: 0.9; }
.fl-tufts { fill: none; stroke: var(--fc-tuft); stroke-width: 1.7; stroke-linecap: round; opacity: 0.85; }
.fl-rake-handle { fill: none; stroke: var(--fc-tuft); stroke-width: 3; stroke-linecap: round; }
.fl-rake-tines { fill: none; stroke: var(--fc-bark); stroke-width: 2.2; stroke-linecap: round; }
.fl-jack-rib { fill: none; stroke: var(--fl-pk-1); stroke-width: 1.2; opacity: 0.6; }
.fl-jack-stem { fill: none; stroke: #4f6b2d; stroke-width: 2.4; stroke-linecap: round; }
.fl-jack-face { fill: var(--fl-jack-face); }
.fl-jack-glow { opacity: var(--lamp-op); }
.fl-stuck { opacity: 0.95; }
.fl-leaf { transform: translate(var(--x), -40px); }

/* MOTION (each animation lives under the selector that shows the element) */
@media (prefers-reduced-motion: no-preference) {
  .madison-scene[data-season="fall"] .fl-leaf { animation: fl-fall 14s linear infinite; }
  .madison-scene[data-season="fall"] .fl-sway { animation: fl-sway 3.6s ease-in-out infinite; }
  .madison-scene[data-season="fall"][data-stage="late"] .fl-cling:nth-child(odd) { animation: fl-flutter 1.8s ease-in-out infinite alternate; transform-origin: 50% 0; }
  .madison-scene[data-season="fall"]:is([data-time="dawn"], [data-time="golden"], [data-sub="afterglow"]) .fl-geese-1,
  .madison-scene[data-season="fall"][data-stage="late"][data-time="day"] .fl-geese-1 { animation: fl-geese-1 48s linear infinite 6s; }
  .madison-scene[data-season="fall"]:is([data-time="dawn"], [data-time="golden"], [data-sub="afterglow"]) .fl-geese-2 { animation: fl-geese-2 60s linear infinite 20s; }
  .madison-scene[data-season="fall"][data-holiday="halloween"] .fl-jack-glow { animation: ms-flicker 2.6s ease-in-out infinite -0.7s; transform-origin: 50% 50%; }
  .madison-scene[data-season="fall"][data-stage="late"]:is([data-time="dawn"], [data-sub="morning"], [data-sub="predawn"]) .fl-mist-drift,
  .madison-scene[data-season="fall"][data-weather="fog"] .fl-mist-drift { animation: fl-mist 46s ease-in-out infinite; }
  .madison-scene[data-season="fall"]:is([data-stage="late"], [data-time="night"], [data-time="dawn"], [data-sub="blue"]) .fl-puff { animation: fl-puff 4.5s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
  .fl-puff-2 { animation-delay: -1.5s !important; } .fl-puff-3 { animation-delay: -3s !important; }
  .madison-scene[data-season="fall"]:is([data-weather="rain"], [data-weather="storm"]) .fl-ring { animation: fl-ring 1.9s ease-out infinite; }
}
@keyframes fl-fall { from { transform: translate(var(--x), -40px); } to { transform: translate(calc(var(--x) + var(--drift)), 720px); } }
/* one group sways side to side while the leaf tumbles over (scaleX is the leaf turning edge-on) */
@keyframes fl-sway {
  0% { transform: translateX(-18px) rotate(0) scaleX(1); }
  25% { transform: translateX(0) rotate(100deg) scaleX(0.25); }
  50% { transform: translateX(18px) rotate(180deg) scaleX(1); }
  75% { transform: translateX(0) rotate(260deg) scaleX(0.25); }
  100% { transform: translateX(-18px) rotate(360deg) scaleX(1); }
}
@keyframes fl-flutter { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes fl-geese-1 { from { transform: translate(1700px, 150px); } to { transform: translate(-220px, 215px); } }
@keyframes fl-geese-2 { from { transform: translate(1760px, 240px); } to { transform: translate(-300px, 178px); } }
@keyframes fl-mist { 0%, 100% { transform: translateX(-24px); } 50% { transform: translateX(24px); } }
@keyframes fl-puff { 0% { opacity: 0; transform: translate(0, 6px) scale(0.6); } 20% { opacity: 0.6; } 100% { opacity: 0; transform: translate(6px, -22px) scale(1.5); } }
@keyframes fl-ring { 0% { opacity: 0.7; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.8); } }


/* ===== springsummer.css ===== */
/* Spring and summer (tools/scene/seasons/springsummer.py).
   Sections: stage gates, materials per stage, lit colours, paint, motion.

   STAGE GATES ------------------------------------------------ */
.madison-scene[data-season="spring"]:not([data-stage="early"]) .ss-early,
.madison-scene[data-season="spring"][data-stage="early"] .ss-peak { display: none; }
/* early spring draws its own bare trees instead of the leafy base line */
.madison-scene[data-season="spring"][data-stage="early"] .ms-leafy { display: none; }
/* Everything mood- or weather-bound is hidden here and revealed (with its
   animation) in the MOODS and WEATHER sections below, so nothing animates
   while hidden. */
.ss-fireflies, .ss-fireworks, .ss-cumulus, .ss-heat-sky, .ss-warm-band, .ss-milk, .ss-shimmer,
.ss-storm, .ss-whitecaps, .ss-rain-rings, .ss-mist, .ss-rain-umbrellas, .ss-rain-puddles, .ss-boat-lights, .ss-predawn-glow,
.ss-kayak-track, .ss-sup-track, .ss-sail2-track, .ss-float-track, .ss-pontoon-track { display: none; }
/* July 4 after dark: site.js sets data-event="fireworks" */
.madison-scene[data-event="fireworks"][data-time="night"] .ss-fireworks { display: inline; }

/* MATERIALS PER STAGE ----------------------------------------
   Base materials (--m-*) drive the base tree line, banks and far hills.
   --ss-* are this file's own materials; pairs (NAME / NAME-s) are the lit
   and shaded sides of a side-lit gradient. */
.madison-scene {
  --ss-twig: #6f5f52; --ss-twig-far: #9d968c;
  --ss-bud: #cfe09a; --ss-bud-rose: #e2a3ab; --ss-bud-gold: #e3cf6c; --ss-bud-far: #d0ccbf;
  --ss-willow: #c9cf5a; --ss-willow-haze: #d8d98a;
  --ss-pine: #3f7f55; --ss-pine-s: #244f36;
  --ss-pink: #f6c6d8; --ss-pink-s: #e19ab9;
  --ss-magenta: #d8729f; --ss-magenta-s: #ad4d7f;
  --ss-white: #fbf6f7; --ss-white-s: #d9c9d4;
  --ss-floret-lt: #fff3f7; --ss-floret-dk: #c2497f;
  --ss-lilac: #b78fd3; --ss-lilac-s: #8a62b0; --ss-lilac-hi: #dcc8ec;
  --ss-leaf: #4f9a4d; --ss-leaf-s: #2f6e3e;
  --ss-can-a: #5fa858; --ss-can-a-s: #357a3f;
  --ss-can-b: #3d8a4f; --ss-can-b-s: #215a35;
  --ss-can-c: #5a9f7c; --ss-can-c-s: #2f6b53;
  --ss-can-hi: #9fd57e; --ss-can-under: #1d4a2c; --ss-bud-band: #c9bfb4;
  --ss-ink: #1c1c1f; --ss-red: #d7262c; --ss-gold: #f0c93a;
  --ss-hull: #16524c; --ss-hull-rim: #3d8a7e; --ss-cockpit: #0a2a27; --ss-pfd: #e8744f;
  --ss-skin: #e3b58e; --ss-cap: #fbf8f0; --ss-shaft: #5a4632; --ss-blade: #d9f26b;
  --ss-board: #f3efe3; --ss-shirt: #ffffff;
  --ss-p1: #fbfbf7; --ss-p2: #d9f26b; --ss-p3: #e8744f; --ss-p4: #0b3b38;
  --ss-umb-a: #e8744f; --ss-umb-b: #fbfbf7;
  --ss-petal-p: #f7b8cf; --ss-petal-w: #fff5f8; --ss-stripe: #0b3b38; --ss-ring-dot: #d99a2a;
  --ss-umb-c: #0b3b38; --ss-tube: #b9c4c9; --ss-deck: #d8c7a6; --ss-canopy: #2f6f6a; --ss-rail: #e9eef0;
  --ss-storm-a: #3a4150; --ss-storm-b: #7b8494;
  /* mood dials this file reads: how hazy the air is, how many fireflies are out */
  --ss-heat-op: 0; --ss-warm-op: 0; --ss-milk-op: 0; --ss-shimmer-op: 0; --ss-mist-op: 0; --ss-mist-c: #e8eef2;
}
.madison-scene[data-season="spring"][data-stage="early"] {
  --m-tree-a: #b9c48f; --m-tree-b: #8aa06a; --m-tree-back: #a3ad8e;
  --m-bank-a: #a6ba6c; --m-bank-b: #74984f; --m-bank-c: #4d7442;
  --m-haze-a: #bcc5aa; --m-haze-b: #9aa78f;
}
.madison-scene[data-season="spring"][data-stage="peak"] {
  --m-tree-a: #95d270; --m-tree-b: #4d9f58; --m-tree-back: #6eab70;
  --m-bank-a: #8fd36b; --m-bank-b: #57a751; --m-bank-c: #337b3f;
  --m-haze-a: #a8d0ae; --m-haze-b: #86b898;
  --ss-willow: #a4cc4c; --ss-willow-haze: #c6de80; --ss-twig: #7d6b5c;
  --ss-can-a: #8fcd6c; --ss-can-a-s: #4f9a52; --ss-can-b: #6db35e; --ss-can-b-s: #3a7f45;
  --ss-can-c: #a6d57a; --ss-can-c-s: #5f9e5a; --ss-can-hi: #d2ec9a; --ss-can-under: #2f6a3a;
}
.madison-scene[data-season="summer"] {
  --m-tree-a: #4b9550; --m-tree-b: #27663a; --m-tree-back: #376f4c;
  --m-bank-a: #74bb5e; --m-bank-b: #3f9148; --m-bank-c: #246234;
  --m-haze-a: #8fc0aa; --m-haze-b: #6ea690;
  --ss-willow: #6aa84a; --ss-willow-haze: #8cbf62; --ss-twig: #6e5c4e;
}

/* LIT COLOURS: every material seen in the hour's light ------- */
.madison-scene {
  --ss-twig-l: var(--ss-twig); --ss-twig-far-l: var(--ss-twig-far);
  --ss-bud-l: var(--ss-bud); --ss-bud-rose-l: var(--ss-bud-rose); --ss-bud-gold-l: var(--ss-bud-gold); --ss-bud-far-l: var(--ss-bud-far);
  --ss-willow-l: var(--ss-willow); --ss-willow-haze-l: var(--ss-willow-haze);
  --ss-pine-l: var(--ss-pine); --ss-pine-sl: var(--ss-pine-s);
  --ss-pink-l: var(--ss-pink); --ss-pink-sl: var(--ss-pink-s);
  --ss-magenta-l: var(--ss-magenta); --ss-magenta-sl: var(--ss-magenta-s);
  --ss-white-l: var(--ss-white); --ss-white-sl: var(--ss-white-s);
  --ss-floret-lt-l: var(--ss-floret-lt); --ss-floret-dk-l: var(--ss-floret-dk);
  --ss-lilac-l: var(--ss-lilac); --ss-lilac-sl: var(--ss-lilac-s); --ss-lilac-hi-l: var(--ss-lilac-hi);
  --ss-leaf-l: var(--ss-leaf); --ss-leaf-sl: var(--ss-leaf-s);
  --ss-can-a-l: var(--ss-can-a); --ss-can-a-sl: var(--ss-can-a-s);
  --ss-can-b-l: var(--ss-can-b); --ss-can-b-sl: var(--ss-can-b-s);
  --ss-can-c-l: var(--ss-can-c); --ss-can-c-sl: var(--ss-can-c-s);
  --ss-can-hi-l: var(--ss-can-hi); --ss-can-under-l: var(--ss-can-under); --ss-bud-band-l: var(--ss-bud-band);
  --ss-ink-l: var(--ss-ink); --ss-red-l: var(--ss-red); --ss-gold-l: var(--ss-gold);
  --ss-hull-l: var(--ss-hull); --ss-hull-rim-l: var(--ss-hull-rim); --ss-cockpit-l: var(--ss-cockpit); --ss-pfd-l: var(--ss-pfd);
  --ss-skin-l: var(--ss-skin); --ss-cap-l: var(--ss-cap); --ss-shaft-l: var(--ss-shaft); --ss-blade-l: var(--ss-blade);
  --ss-board-l: var(--ss-board); --ss-shirt-l: var(--ss-shirt);
  --ss-p1-l: var(--ss-p1); --ss-p2-l: var(--ss-p2); --ss-p3-l: var(--ss-p3); --ss-p4-l: var(--ss-p4);
  --ss-umb-a-l: var(--ss-umb-a); --ss-umb-b-l: var(--ss-umb-b); --ss-umb-c-l: var(--ss-umb-c);
  --ss-tube-l: var(--ss-tube); --ss-deck-l: var(--ss-deck); --ss-canopy-l: var(--ss-canopy); --ss-rail-l: var(--ss-rail);
  --ss-petal-p-l: var(--ss-petal-p); --ss-petal-w-l: var(--ss-petal-w); --ss-ring-dot-l: var(--ss-ring-dot);
}
@supports (color: color-mix(in oklab, red, blue)) {
  .madison-scene {
    --ss-twig-l: color-mix(in oklab, var(--ss-twig), var(--lt) var(--lt-amt));
    --ss-twig-far-l: color-mix(in oklab, color-mix(in oklab, var(--ss-twig-far), var(--sky-c) 35%), var(--lt) var(--lt-amt));
    --ss-bud-l: color-mix(in oklab, var(--ss-bud), var(--lt) var(--lt-amt));
    --ss-bud-rose-l: color-mix(in oklab, var(--ss-bud-rose), var(--lt) var(--lt-amt));
    --ss-bud-gold-l: color-mix(in oklab, var(--ss-bud-gold), var(--lt) var(--lt-amt));
    --ss-bud-far-l: color-mix(in oklab, color-mix(in oklab, var(--ss-bud-far), var(--sky-c) 35%), var(--lt) var(--lt-amt));
    --ss-willow-l: color-mix(in oklab, var(--ss-willow), var(--lt) var(--lt-amt));
    --ss-willow-haze-l: color-mix(in oklab, var(--ss-willow-haze), var(--lt) var(--lt-amt));
    --ss-pine-l: color-mix(in oklab, var(--ss-pine), var(--lt) var(--lt-amt));
    --ss-pine-sl: color-mix(in oklab, var(--ss-pine-s), var(--lt) var(--lt-amt));
    --ss-pink-l: color-mix(in oklab, var(--ss-pink), var(--lt) var(--lt-amt));
    --ss-pink-sl: color-mix(in oklab, var(--ss-pink-s), var(--lt) var(--lt-amt));
    --ss-magenta-l: color-mix(in oklab, var(--ss-magenta), var(--lt) var(--lt-amt));
    --ss-magenta-sl: color-mix(in oklab, var(--ss-magenta-s), var(--lt) var(--lt-amt));
    --ss-white-l: color-mix(in oklab, var(--ss-white), var(--lt) var(--lt-amt));
    --ss-white-sl: color-mix(in oklab, var(--ss-white-s), var(--lt) var(--lt-amt));
    --ss-floret-lt-l: color-mix(in oklab, var(--ss-floret-lt), var(--lt) var(--lt-amt));
    --ss-floret-dk-l: color-mix(in oklab, var(--ss-floret-dk), var(--lt) var(--lt-amt));
    --ss-lilac-l: color-mix(in oklab, var(--ss-lilac), var(--lt) var(--lt-amt));
    --ss-lilac-sl: color-mix(in oklab, var(--ss-lilac-s), var(--lt) var(--lt-amt));
    --ss-lilac-hi-l: color-mix(in oklab, var(--ss-lilac-hi), var(--lt) var(--lt-amt));
    --ss-leaf-l: color-mix(in oklab, var(--ss-leaf), var(--lt) var(--lt-amt));
    --ss-leaf-sl: color-mix(in oklab, var(--ss-leaf-s), var(--lt) var(--lt-amt));
    --ss-can-a-l: color-mix(in oklab, var(--ss-can-a), var(--lt) var(--lt-amt));
    --ss-can-a-sl: color-mix(in oklab, var(--ss-can-a-s), var(--lt) var(--lt-amt));
    --ss-can-b-l: color-mix(in oklab, var(--ss-can-b), var(--lt) var(--lt-amt));
    --ss-can-b-sl: color-mix(in oklab, var(--ss-can-b-s), var(--lt) var(--lt-amt));
    --ss-can-c-l: color-mix(in oklab, var(--ss-can-c), var(--lt) var(--lt-amt));
    --ss-can-c-sl: color-mix(in oklab, var(--ss-can-c-s), var(--lt) var(--lt-amt));
    --ss-can-hi-l: color-mix(in oklab, var(--ss-can-hi), var(--lt) var(--lt-amt));
    --ss-can-under-l: color-mix(in oklab, var(--ss-can-under), var(--lt) var(--lt-amt));
    --ss-bud-band-l: color-mix(in oklab, color-mix(in oklab, var(--ss-bud-band), var(--sky-c) 25%), var(--lt) var(--lt-amt));
    --ss-ink-l: color-mix(in oklab, var(--ss-ink), var(--lt) calc(var(--lt-amt) * 0.5));
    --ss-red-l: color-mix(in oklab, var(--ss-red), var(--lt) var(--lt-amt));
    --ss-gold-l: color-mix(in oklab, var(--ss-gold), var(--lt) var(--lt-amt));
    --ss-hull-l: color-mix(in oklab, var(--ss-hull), var(--lt) var(--lt-amt));
    --ss-hull-rim-l: color-mix(in oklab, var(--ss-hull-rim), var(--lt) var(--lt-amt));
    --ss-cockpit-l: color-mix(in oklab, var(--ss-cockpit), var(--lt) var(--lt-amt));
    --ss-pfd-l: color-mix(in oklab, var(--ss-pfd), var(--lt) var(--lt-amt));
    --ss-skin-l: color-mix(in oklab, var(--ss-skin), var(--lt) var(--lt-amt));
    --ss-cap-l: color-mix(in oklab, var(--ss-cap), var(--lt) var(--lt-amt));
    --ss-shaft-l: color-mix(in oklab, var(--ss-shaft), var(--lt) var(--lt-amt));
    --ss-blade-l: color-mix(in oklab, var(--ss-blade), var(--lt) var(--lt-amt));
    --ss-board-l: color-mix(in oklab, var(--ss-board), var(--lt) var(--lt-amt));
    --ss-shirt-l: color-mix(in oklab, var(--ss-shirt), var(--lt) var(--lt-amt));
    --ss-p1-l: color-mix(in oklab, var(--ss-p1), var(--lt) var(--lt-amt));
    --ss-p2-l: color-mix(in oklab, var(--ss-p2), var(--lt) var(--lt-amt));
    --ss-p3-l: color-mix(in oklab, var(--ss-p3), var(--lt) var(--lt-amt));
    --ss-p4-l: color-mix(in oklab, var(--ss-p4), var(--lt) var(--lt-amt));
    --ss-umb-a-l: color-mix(in oklab, var(--ss-umb-a), var(--lt) var(--lt-amt));
    --ss-umb-b-l: color-mix(in oklab, var(--ss-umb-b), var(--lt) var(--lt-amt));
    --ss-umb-c-l: color-mix(in oklab, var(--ss-umb-c), var(--lt) var(--lt-amt));
    --ss-tube-l: color-mix(in oklab, var(--ss-tube), var(--lt) var(--lt-amt));
    --ss-deck-l: color-mix(in oklab, var(--ss-deck), var(--lt) var(--lt-amt));
    --ss-canopy-l: color-mix(in oklab, var(--ss-canopy), var(--lt) var(--lt-amt));
    --ss-rail-l: color-mix(in oklab, var(--ss-rail), var(--lt) var(--lt-amt));
    --ss-petal-p-l: color-mix(in oklab, var(--ss-petal-p), var(--lt) var(--lt-amt));
    --ss-petal-w-l: color-mix(in oklab, var(--ss-petal-w), var(--lt) var(--lt-amt));
    --ss-ring-dot-l: color-mix(in oklab, var(--ss-ring-dot), var(--lt) var(--lt-amt));
  }
}
/* side-lit gradients: lit from the right in the morning, from the left after noon */
.madison-scene {
  --ss-pine-0: var(--ss-pine-sl); --ss-pine-1: var(--ss-pine-l);
  --ss-pink-0: var(--ss-pink-sl); --ss-pink-1: var(--ss-pink-l);
  --ss-magenta-0: var(--ss-magenta-sl); --ss-magenta-1: var(--ss-magenta-l);
  --ss-white-0: var(--ss-white-sl); --ss-white-1: var(--ss-white-l);
  --ss-lilac-0: var(--ss-lilac-sl); --ss-lilac-1: var(--ss-lilac-l);
  --ss-leaf-0: var(--ss-leaf-sl); --ss-leaf-1: var(--ss-leaf-l);
  --ss-can-a-0: var(--ss-can-a-sl); --ss-can-a-1: var(--ss-can-a-l);
  --ss-can-b-0: var(--ss-can-b-sl); --ss-can-b-1: var(--ss-can-b-l);
  --ss-can-c-0: var(--ss-can-c-sl); --ss-can-c-1: var(--ss-can-c-l);
}
.madison-scene[data-sun="pm"] {
  --ss-pine-0: var(--ss-pine-l); --ss-pine-1: var(--ss-pine-sl);
  --ss-pink-0: var(--ss-pink-l); --ss-pink-1: var(--ss-pink-sl);
  --ss-magenta-0: var(--ss-magenta-l); --ss-magenta-1: var(--ss-magenta-sl);
  --ss-white-0: var(--ss-white-l); --ss-white-1: var(--ss-white-sl);
  --ss-lilac-0: var(--ss-lilac-l); --ss-lilac-1: var(--ss-lilac-sl);
  --ss-leaf-0: var(--ss-leaf-l); --ss-leaf-1: var(--ss-leaf-sl);
  --ss-can-a-0: var(--ss-can-a-l); --ss-can-a-1: var(--ss-can-a-sl);
  --ss-can-b-0: var(--ss-can-b-l); --ss-can-b-1: var(--ss-can-b-sl);
  --ss-can-c-0: var(--ss-can-c-l); --ss-can-c-1: var(--ss-can-c-sl);
}

/* PAINT ----------------------------------------------------- */
/* trees */
.ss-trunk, .ss-branch, .ss-twig { fill: none; stroke: var(--ss-twig-l); stroke-linecap: round; stroke-linejoin: round; }
.ss-twig { opacity: 0.8; }
.ss-far .ss-trunk, .ss-far .ss-branch { stroke: var(--ss-twig-far-l); }
.ss-far { opacity: 0.85; }
.ss-bud { fill: var(--ss-bud-l); opacity: 0.55; }
.ss-bud-rose { fill: var(--ss-bud-rose-l); opacity: 0.5; }
.ss-bud-gold { fill: var(--ss-bud-gold-l); opacity: 0.5; }
.ss-bud-far { fill: var(--ss-bud-far-l); opacity: 0.6; }
.ss-willow-haze { fill: var(--ss-willow-haze-l); opacity: 0.55; }
.ss-willow-strand { fill: none; stroke: var(--ss-willow-l); stroke-linecap: round; }
.ss-can-hi { fill: var(--ss-can-hi-l); opacity: 0.45; }
.ss-can-under { fill: var(--ss-can-under-l); opacity: 0.42; }
.ss-bl-under { fill: var(--ss-magenta-sl); opacity: 0.3; }
.ss-bud-band { fill: var(--ss-bud-band-l); opacity: 0.75; }
.ss-floret-lt { fill: var(--ss-floret-lt-l); opacity: 0.6; }
.ss-floret-dk { fill: var(--ss-floret-dk-l); opacity: 0.45; }
.ss-bl-white .ss-floret-dk { fill: var(--ss-pink-sl); opacity: 0.45; }
.ss-lilac-hi { fill: var(--ss-lilac-hi-l); opacity: 0.7; }
/* shore */
.ss-puddle-rim { fill: var(--bank-c); opacity: 0.35; }
.ss-puddle-water { fill: var(--sky-b); opacity: 0.8; }
.ss-puddle-shine { fill: none; stroke: var(--mist); stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.ss-bb-body { fill: var(--ss-ink-l); }
.ss-bb-tail { fill: none; stroke: var(--ss-ink-l); stroke-width: 2.6; stroke-linecap: round; }
.ss-bb-beak { fill: var(--ss-ink-l); }
.ss-eye-tiny { fill: #fbf8f0; opacity: 0.8; }
.ss-bb-red { fill: var(--ss-red-l); }
.ss-bb-gold { fill: none; stroke: var(--ss-gold-l); stroke-width: 1.2; stroke-linecap: round; }
.ss-bb-feet { fill: none; stroke: var(--ss-ink-l); stroke-width: 1; stroke-linecap: round; }
.ss-blackbird { transform-origin: 50% 100%; }
/* lake life */
.ss-kayak-hull { fill: var(--ss-hull-l); }
.ss-kayak-rim { fill: none; stroke: var(--ss-hull-rim-l); stroke-width: 1.6; stroke-linecap: round; }
.ss-cockpit { fill: var(--ss-cockpit-l); }
.ss-pfd { fill: var(--ss-pfd-l); }
.ss-skin { fill: var(--ss-skin-l); }
.ss-cap { fill: var(--ss-cap-l); }
.ss-brim { fill: none; stroke: var(--ss-cap-l); stroke-width: 2; stroke-linecap: round; }
.ss-paddle-shaft { fill: none; stroke: var(--ss-shaft-l); stroke-width: 1.6; stroke-linecap: round; }
.ss-blade { fill: var(--ss-blade-l); }
.ss-board { fill: var(--ss-board-l); }
.ss-sup-legs { fill: none; stroke: var(--ss-ink-l); stroke-width: 2.2; stroke-linecap: round; }
.ss-sup-shirt { fill: var(--ss-shirt-l); }
/* sunglasses on the person floating on the curd ring */
.ss-glasses { fill: none; stroke: #1d2630; stroke-width: 1.4; stroke-linecap: round; }
.ss-ring-hole { fill: var(--water-b); }
.ss-curd-dot { fill: var(--ss-ring-dot-l); opacity: 0.8; }
.ss-shade-arm { fill: none; stroke: var(--ss-skin-l); stroke-width: 2; stroke-linecap: round; }
.ss-paddle { transform-origin: 50% 50%; }
.ss-kayak-track { transform: translate(1700px, 506px); }
.ss-sup-track { transform: translate(740px, 586px); }
.ss-sail2-track { transform: translate(1680px, 480px); }
.ss-float-track { transform: translate(1340px, 598px); }
/* rooftop */
.ss-p1 { fill: var(--ss-p1-l); } .ss-p2 { fill: var(--ss-p2-l); } .ss-p3 { fill: var(--ss-p3-l); } .ss-p4 { fill: var(--ss-p4-l); }
.ss-umb-a { fill: var(--ss-umb-a-l); } .ss-umb-b { fill: var(--ss-umb-b-l); } .ss-umb-c { fill: var(--ss-umb-c-l); }
/* the pontoon */
.ss-tube { fill: var(--ss-tube-l); }
.ss-deck { fill: var(--ss-deck-l); }
.ss-rail { fill: none; stroke: var(--ss-rail-l); stroke-width: 1.2; }
.ss-post { fill: none; stroke: var(--ss-rail-l); stroke-width: 1.4; stroke-linecap: round; }
.ss-canopy { fill: var(--ss-canopy-l); }
.ss-wheel { fill: none; stroke: var(--ss-ink-l); stroke-width: 1.2; }
.ss-cabin-glow { fill: #ffd98a; opacity: 0; }
.ss-light-green { fill: #7cf5a0; }
.ss-light-white { fill: #fff8e0; }
.ss-boat-lights circle { filter: drop-shadow(0 0 3px #fff2b0); }
.ss-pontoon-track { transform: translate(-150px, 536px); }
/* air */
.ss-cumulus-shade { fill: var(--cloud-b); opacity: 0.5; }
.ss-heat-sky { opacity: var(--ss-heat-op); }
.ss-warm-band { opacity: var(--ss-warm-op); }
.ss-milk { opacity: var(--ss-milk-op); }
.ss-shimmer { opacity: var(--ss-shimmer-op); transform-origin: 50% 100%; }
.ss-mist-1 { opacity: var(--ss-mist-op); } .ss-mist-2 { opacity: calc(var(--ss-mist-op) * 0.7); }
/* storm */
.ss-anvil { fill: url(#ss-storm-g); }
.ss-flash { opacity: 0; }
.ss-bolt { fill: none; stroke: #fff7d6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 4px #fff3b0); }
.ss-rain-veil { opacity: 0.8; }
.ss-whitecaps path { fill: none; stroke: #ffffff; stroke-linecap: round; opacity: 0.55; }
.ss-ring { fill: none; stroke: var(--mist); stroke-width: 1.2; opacity: 0; transform-origin: 50% 50%; }
.ss-umb-pole { fill: none; stroke: var(--ter-shade); stroke-width: 0.8; }
/* weather */
.ss-petal-p { fill: var(--ss-petal-p-l); }
.ss-petal-w { fill: var(--ss-petal-w-l); }
.ss-petal { opacity: 0; }
.ss-firefly { opacity: 0; }
.ss-ff-core { fill: #f4ffb0; }
.ss-fw { --fw: #ffd36a; }
.ss-fw-gold { --fw: #ffd36a; } .ss-fw-zest { --fw: #d9f26b; } .ss-fw-pink { --fw: #ff9bc6; } .ss-fw-white { --fw: #fff6d8; } .ss-fw-teal { --fw: #8fe3d8; }
.ss-fw-rays { fill: none; stroke: var(--fw); stroke-width: 2.4; stroke-linecap: round; }
.ss-fw-sparks { fill: var(--fw); }
.ss-fw-burst { opacity: 0; transform-origin: 50% 50%; }
.ss-fw-trail { fill: none; stroke: var(--fw); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0; transform-origin: 50% 100%; }
.ss-fw-water { fill: var(--fw); opacity: 0; }

/* MOTION ---------------------------------------------------- */
.ss-kayak, .ss-sup, .ss-sail2, .ss-float, .ss-pontoon { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .madison-scene[data-season="spring"] .ss-blackbird { animation: ms-sway 5s ease-in-out infinite; }
  .madison-scene[data-season="spring"][data-stage="peak"] .ss-petal { animation-name: ss-petal; animation-timing-function: linear; animation-iteration-count: infinite; }
  .madison-scene[data-event="fireworks"][data-time="night"] .ss-fw-burst { animation: ss-burst 9s cubic-bezier(.1,.7,.3,1) infinite; }
  .madison-scene[data-event="fireworks"][data-time="night"] .ss-fw-trail { animation: ss-trail 9s ease-out infinite; }
  .madison-scene[data-event="fireworks"][data-time="night"] .ss-fw-water { animation: ss-fw-water 9s ease-out infinite; }
}
@keyframes ss-petal {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  8% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-150px, 270px) rotate(520deg); }
}
@keyframes ss-firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  35% { opacity: 1; transform: translate(3px, -4px); }
  55% { opacity: 0.85; transform: translate(5px, -5px); }
  78% { opacity: 0; transform: translate(7px, -3px); }
}
@keyframes ss-kayak { from { transform: translate(1700px, 506px); } to { transform: translate(-220px, 506px); } }
@keyframes ss-paddle { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
@keyframes ss-sup-drift { 0%, 100% { transform: translate(740px, 586px); } 50% { transform: translate(778px, 588px); } }
@keyframes ss-sup-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes ss-sail2 { from { transform: translate(1680px, 480px); } to { transform: translate(-80px, 480px); } }
@keyframes ss-float-drift { 0%, 100% { transform: translate(1340px, 598px); } 50% { transform: translate(1318px, 601px); } }
/* a 12 s cycle: the trail rises in the last second, the burst opens at 0 and fades by 17% */
@keyframes ss-burst {
  0% { opacity: 0; transform: scale(0.1); }
  1.5% { opacity: 1; transform: scale(0.45); }
  7% { opacity: 1; transform: scale(1.25); }
  17% { opacity: 0; transform: scale(1.4) translateY(16px); }
  100% { opacity: 0; transform: scale(0.1); }
}
@keyframes ss-trail {
  0%, 91.5% { opacity: 0; transform: scaleY(0); }
  92% { opacity: 0.85; transform: scaleY(0); }
  99.6% { opacity: 0.6; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
@keyframes ss-fw-water {
  0% { opacity: 0; } 2% { opacity: 0.45; } 16%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* still scenes: a few fireflies glow, the bursts sit open, no petals mid-air */
  .ss-firefly:nth-child(3n) { opacity: 0.55; }
  .ss-fw-burst:nth-child(2) { opacity: 0.9; }
  .ss-fw:nth-child(odd) .ss-fw-burst { opacity: 0.9; }
  .ss-petal:nth-child(2n) { opacity: 0.8; }
}

/* MOODS: how spring and summer feel at each hour -------------
   Spring: milky pastel light, cold and raw early, lush at peak.
   Summer: hot cyan middays with heat haze and big cumulus, humid orange
   evenings, boats with lights, fireflies, quiet late nights, predawn mist.
   (All selectors here carry the season, so they outrank the base moods.) */
/* -- spring light */
.madison-scene[data-season="spring"][data-time="day"] { --sky-a: #86bfe6; --sky-b: #c6e4f3; --sky-c: #f0f6f5; --cloud-b: #e4eef4; --city-haze-op: 0.6; --ss-milk-op: 0.45; }
.madison-scene[data-season="spring"][data-time="day"][data-sub="midday"] { --lt: #f3f6ee; --lt-amt: 8%; }
.madison-scene[data-season="spring"][data-time="day"][data-sub="morning"] { --ss-milk-op: 0.6; }
.madison-scene[data-season="spring"][data-time="golden"] { --ss-milk-op: 0.3; }
.madison-scene[data-season="spring"][data-stage="early"][data-time="day"] {
  --sky-a: #8db4d3; --sky-b: #c7d8e4; --sky-c: #edf1f2; --lt: #dde7ee; --lt-amt: 16%;
  --water-a: #a3c3cf; --water-b: #5f93aa; --water-c: #2c5e76; --glitter-op: 0.6; --ss-milk-op: 0.55;
}
.madison-scene[data-season="spring"][data-stage="early"][data-time="night"] { --water-a: #22395f; --water-b: #0f2140; --water-c: #050d20; }
.madison-scene[data-season="spring"][data-stage="peak"][data-time="day"] { --sky-a: #7fc0ea; --sky-b: #c3e6f5; }
/* -- summer sky: deep cyan at midday, heat haze on the far shore, big cumulus */
.madison-scene[data-season="summer"][data-time="day"] { --sky-a: #3a9de2; --sky-b: #95d3f1; --sky-c: #e5f4f3; --ss-heat-op: 0.3; --ss-shimmer-op: 0.3; }
.madison-scene[data-season="summer"][data-time="day"][data-sub="midday"] { --sky-a: #2a90dc; --sky-b: #86cdf0; --ss-heat-op: 0.42; --ss-shimmer-op: 0.45; }
.madison-scene[data-season="summer"][data-time="day"][data-sub="afternoon"] { --sky-a: #3d9ad8; --sky-b: #a4d4ec; --sky-c: #fbf0d6; --ss-heat-op: 0.6; --ss-shimmer-op: 0.55; }
.madison-scene[data-season="summer"][data-time="day"][data-sub="morning"] { --ss-heat-op: 0.15; --ss-shimmer-op: 0.1; }
.madison-scene[data-season="summer"]:is([data-time="day"], [data-time="golden"], [data-time="dusk"][data-sub="afterglow"], [data-time="dawn"][data-sub="sunrise"]) .ss-cumulus { display: inline; }
/* -- humid summer evenings: an orange band hangs on the horizon */
.madison-scene[data-season="summer"][data-time="golden"] { --ss-warm-op: 0.55; --ss-heat-op: 0.2; }
.madison-scene[data-season="summer"][data-time="dusk"][data-sub="afterglow"] { --ss-warm-op: 0.8; --sky-c: #f7a06e; }
.madison-scene[data-season="summer"][data-time="dusk"][data-sub="blue"] { --ss-warm-op: 0.3; }
.madison-scene[data-season="summer"][data-time="night"][data-sub="evening"] { --sky-c: #34507f; --water-a: #2b4a7a; }
/* -- late night: deeper, quieter; predawn: mist on the water */
.madison-scene[data-season="summer"][data-sub="late"] { --water-a: #1a2d55; --water-b: #0c1a38; }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-sub="predawn"] { --ss-mist-op: 0.6; --ss-mist-c: #8fa6c8; --sky-c: #2f4572; }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-time="dawn"][data-sub="blue"] { --ss-mist-op: 0.65; --ss-mist-c: #b3c2dc; }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-time="dawn"][data-sub="sunrise"] { --ss-mist-op: 0.45; --ss-mist-c: #f6e8dc; }
.madison-scene[data-season="spring"][data-stage="early"][data-time="dawn"] { --ss-mist-op: 0.8; }
.madison-scene:is([data-season="spring"], [data-season="summer"]):is([data-sub="predawn"], [data-time="dawn"]) .ss-mist { display: inline; }
/* before dawn the east (the right, where the sun rises) already shows a deep teal glow */
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-sub="predawn"] .ss-predawn-glow { display: inline; }
/* -- who is on the lake when: day boats go in at dusk, the pontoon and the striped sloop stay out with lights */
.madison-scene[data-season="summer"]:is([data-time="day"], [data-time="golden"], [data-time="dawn"][data-sub="sunrise"]) :is(.ss-kayak-track, .ss-sup-track) { display: inline; }
.madison-scene[data-season="summer"][data-time="day"] .ss-float-track, .madison-scene[data-season="summer"][data-time="golden"] .ss-float-track { display: inline; }
.madison-scene[data-season="summer"]:is([data-time="day"], [data-time="golden"], [data-time="dusk"], [data-time="night"][data-sub="evening"]) :is(.ss-sail2-track, .ss-pontoon-track) { display: inline; }
.madison-scene[data-season="summer"]:is([data-time="dusk"], [data-time="night"]) .ss-boat-lights { display: inline; }
.madison-scene[data-season="summer"]:is([data-time="dusk"][data-sub="blue"], [data-time="night"]) .ss-cabin-glow { opacity: 0.35; }
/* -- fireflies: thick at dusk and in the evening, a few in the small hours */
.madison-scene[data-season="summer"]:is([data-time="dusk"], [data-time="night"]) .ss-fireflies { display: inline; }
.madison-scene[data-season="summer"][data-time="dusk"][data-sub="afterglow"] .ss-firefly:not(:nth-child(3n)) { display: none; }
.madison-scene[data-season="summer"][data-sub="late"] .ss-firefly:not(:nth-child(5n)) { display: none; }
.madison-scene[data-season="summer"][data-sub="predawn"] .ss-firefly:not(:nth-child(7n)) { display: none; }

/* WEATHER: spring showers and summer storms ----------------- */
.madison-scene:is([data-season="spring"], [data-season="summer"]):is([data-weather="rain"], [data-weather="storm"]) :is(.ss-rain-umbrellas, .ss-rain-puddles, .ss-rain-rings) { display: inline; }
.madison-scene:is([data-season="spring"], [data-season="summer"]):is([data-weather="rain"], [data-weather="storm"]) :is(.ss-rooftop, .ss-sup-track, .ss-float-track, .ss-petals, .ss-cumulus, .ss-predawn-glow, .ss-mist) { display: none !important; }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="rain"] { --ss-heat-op: 0; --ss-warm-op: 0; --ss-milk-op: 0; --ss-shimmer-op: 0; --ss-mist-op: 0; }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] { --ss-heat-op: 0; --ss-warm-op: 0; --ss-milk-op: 0; --ss-shimmer-op: 0; --ss-mist-op: 0; --water-a: #58707f; --water-b: #2e4a58; --water-c: #16303c; --wave: rgba(255, 255, 255, 0.7); }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"][data-time="night"] { --water-a: #1d2c3c; --water-b: #0f1c28; --water-c: #070f18; }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] :is(.ss-storm, .ss-whitecaps) { display: inline; }
.madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] :is(.ss-kayak-track, .ss-pontoon-track, .ss-sail2-track, .ss-fireflies) { display: none !important; }
.madison-scene[data-time="night"] .ss-anvil { opacity: 0.85; }

@media (prefers-reduced-motion: no-preference) {
  /* summer lake traffic */
  .madison-scene[data-season="summer"] .ss-kayak-track { animation: ss-kayak 115s linear infinite -55s; }
  .madison-scene[data-season="summer"] .ss-kayak { animation: ms-rock 3s ease-in-out infinite; }
  .madison-scene[data-season="summer"] .ss-paddle { animation: ss-paddle 1.7s ease-in-out infinite alternate; }
  .madison-scene[data-season="summer"] .ss-sup-track { animation: ss-sup-drift 26s ease-in-out infinite; }
  .madison-scene[data-season="summer"] .ss-sup { animation: ss-sup-sway 3.6s ease-in-out infinite; }
  .madison-scene[data-season="summer"] .ss-sail2-track { animation: ss-sail2 190s linear infinite -120s; }
  .madison-scene[data-season="summer"] .ss-sail2 { animation: ms-rock 4.2s ease-in-out infinite -1s; }
  .madison-scene[data-season="summer"] .ss-float-track { animation: ss-float-drift 34s ease-in-out infinite; }
  .madison-scene[data-season="summer"] .ss-float { animation: ms-rock 5s ease-in-out infinite -2s; }
  .madison-scene[data-season="summer"] .ss-pontoon-track { animation: ss-pontoon 170s linear infinite -62s; }
  .madison-scene[data-season="summer"] .ss-pontoon { animation: ms-rock 5.5s ease-in-out infinite -3s; }
  /* summer air and nights */
  .madison-scene[data-season="summer"] .ss-cu-1 { animation: ss-drift 150s linear infinite -70s; }
  .madison-scene[data-season="summer"] .ss-cu-2 { animation: ss-drift 190s linear infinite -150s; }
  .madison-scene[data-season="summer"] .ss-cu-3 { animation: ss-drift 170s linear infinite -20s; }
  /* the heat shimmer is a still band: scaling a 1600 px translucent rect each frame cost ~30 points of main thread on a throttled phone */
  .madison-scene[data-season="summer"]:is([data-time="dusk"], [data-time="night"]) .ss-firefly { animation-name: ss-firefly; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .madison-scene:is([data-sub="predawn"], [data-time="dawn"]) .ss-mist-1 { animation: ss-mist 70s ease-in-out infinite; }
  .madison-scene:is([data-sub="predawn"], [data-time="dawn"]) .ss-mist-2 { animation: ss-mist 95s ease-in-out infinite reverse; }
  /* weather */
  .madison-scene:is([data-season="spring"], [data-season="summer"]):is([data-weather="rain"], [data-weather="storm"]) .ss-ring { animation: ss-ring 2.2s ease-out infinite; }
  .madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] .ss-whitecaps { animation: ss-caps 2.4s linear infinite; }
  .madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] .ss-flash { animation: ss-flash 11s linear infinite; }
  .madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] .ss-bolt { animation: ss-bolt 11s linear infinite; }
  .madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] .ms-cattail { animation-duration: 1.8s; }
  .madison-scene:is([data-season="spring"], [data-season="summer"])[data-weather="storm"] :is(.ms-waves-1, .ms-waves-2) { animation-duration: 2.4s; }
}
@keyframes ss-pontoon { from { transform: translate(-150px, 536px); } to { transform: translate(1760px, 536px); } }
@keyframes ss-drift { from { transform: translateX(-520px); } to { transform: translateX(1800px); } }
@keyframes ss-mist { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(40px); } }
@keyframes ss-ring { 0% { opacity: 0.7; transform: scale(0.15); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ss-caps { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes ss-flash { 0%, 61.5%, 63.5%, 65%, 100% { opacity: 0; } 62% { opacity: 1; } 64% { opacity: 0.7; } }
@keyframes ss-bolt { 0%, 61.5%, 63.6%, 100% { opacity: 0; } 62%, 63.2% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ss-ring:nth-child(2n) { opacity: 0.35; transform: scale(0.6); }
}


/* ===== winter.css ===== */
/* Winter (tools/scene/seasons/winter.py). Sections: stages, materials and
   light, winter moods (day, blue hour, evening, late, predawn), weather,
   paint, the ice-fishing badger, motion. All selectors are scoped to
   data-season="winter" or to wn-* classes that only exist in winter art.
   Animations sit in the selector that reveals the element, so nothing
   hidden is animated. */

/* STAGES --------------------------------------------------- */
.madison-scene:not([data-stage="frozen"]) .wn-frozen { display: none; }
.madison-scene:not([data-stage="early"]) .wn-early { display: none; }
.madison-scene:not([data-stage="late"]) .wn-late { display: none; }
.madison-scene[data-season="winter"] .ms-leafy { display: none; }
/* no sailing on a frozen or December lake; the base snow layer gives way to winter's own */
.madison-scene[data-season="winter"] :is(.ms-sail-track, .ms-far-sail-track, .ms-wx-snow) { display: none; }

/* MATERIALS, then the same material in today's light ------- */
.madison-scene[data-season="winter"] {
  --m-tree-a: #9a8f9c; --m-tree-b: #6f6474; --m-tree-back: #a89daa;
  --m-bank-a: #f5f8fb; --m-bank-b: #dde7f1; --m-bank-c: #b4c8dd;
  --m-haze-a: #d6dfe7; --m-haze-b: #bcc9d4;
  --wn-m-snow: #f7f9fc; --wn-m-snow-sh: #b9cee4;
  --wn-m-ice-a: #e5edf4; --wn-m-ice-b: #d3e1ec; --wn-m-ice-c: #bcd1e3; --wn-m-glaze: #a9c3da; --wn-m-crack: #8aa6bf;
  --wn-m-steel: #425a6c; --wn-m-slush: #d7dde2; --wn-m-slush-sh: #aab6bf;
  --wn-m-pine: #3a654f; --wn-m-pine-sh: #244838; --wn-m-bark: #5b4a4e; --wn-m-twig: #8c7f8c;
  --wn-m-shed-a: #b44d3f; --wn-m-shed-a-sh: #7e3129; --wn-m-shed-b: #4f6f82; --wn-m-shed-c: #3f6b58;
  --wn-m-roof: #5b5560; --wn-m-bucket: #e9893a; --wn-m-bucket-sh: #b65f21;
  --wn-m-scarf: #c8463a; --wn-m-scarf-stripe: #f6e8d2; --wn-m-trouser: #3f3733; --wn-m-boot: #2a2524; --wn-m-parka: #2c4a6e;
  --wn-m-liberty: #7fb09a; --wn-m-liberty-dark: #4e7d69; --wn-m-stalk: #b89b70; --wn-m-cattail: #5c4330;
  --wn-amt: var(--lt-amt);
  --wn-snow: var(--wn-m-snow); --wn-snow-sh: var(--wn-m-snow-sh);
  --wn-ice-a: var(--wn-m-ice-a); --wn-ice-b: var(--wn-m-ice-b); --wn-ice-c: var(--wn-m-ice-c); --wn-glaze: var(--wn-m-glaze); --wn-crack: var(--wn-m-crack);
  --wn-steel: var(--wn-m-steel); --wn-slush: var(--wn-m-slush); --wn-slush-sh: var(--wn-m-slush-sh);
  --wn-pine: var(--wn-m-pine); --wn-pine-sh: var(--wn-m-pine-sh); --wn-bark: var(--wn-m-bark); --wn-twig: var(--wn-m-twig);
  --wn-shed: var(--wn-m-shed-a); --wn-shed-sh: var(--wn-m-shed-a-sh); --wn-shed-b: var(--wn-m-shed-b); --wn-shed-c: var(--wn-m-shed-c); --wn-roof: var(--wn-m-roof);
  --wn-bucket: var(--wn-m-bucket); --wn-bucket-sh: var(--wn-m-bucket-sh);
  --wn-scarf: var(--wn-m-scarf); --wn-scarf-stripe: var(--wn-m-scarf-stripe); --wn-trouser: var(--wn-m-trouser); --wn-boot: var(--wn-m-boot); --wn-parka: var(--wn-m-parka);
  --wn-liberty: var(--wn-m-liberty); --wn-liberty-dark: var(--wn-m-liberty-dark); --wn-stalk: var(--wn-m-stalk); --wn-cattail: var(--wn-m-cattail);
  --wn-shadow: #35598a; --wn-shadow-op: 0.14; --wn-cast-op: 0.13; --wn-glare-op: 0.32;
  --wn-sparkle-op: 0.9; --wn-flake-op: 0.9; --wn-breath-op: 0.5; --wn-window: var(--win);
}
@supports (color: color-mix(in oklab, red, blue)) {
  .madison-scene[data-season="winter"] {
    --wn-snow: color-mix(in oklab, var(--wn-m-snow), var(--lt) var(--wn-amt));
    --wn-snow-sh: color-mix(in oklab, var(--wn-m-snow-sh), var(--lt) var(--wn-amt));
    --wn-ice-a: color-mix(in oklab, color-mix(in oklab, var(--wn-m-ice-a), var(--sky-c) 25%), var(--lt) var(--wn-amt));
    --wn-ice-b: color-mix(in oklab, var(--wn-m-ice-b), var(--lt) var(--wn-amt));
    --wn-ice-c: color-mix(in oklab, var(--wn-m-ice-c), var(--lt) var(--wn-amt));
    --wn-glaze: color-mix(in oklab, var(--wn-m-glaze), var(--lt) var(--wn-amt));
    --wn-crack: color-mix(in oklab, var(--wn-m-crack), var(--lt) var(--wn-amt));
    --wn-steel: color-mix(in oklab, var(--wn-m-steel), var(--lt) var(--lt-amt));
    --wn-slush: color-mix(in oklab, var(--wn-m-slush), var(--lt) var(--wn-amt));
    --wn-slush-sh: color-mix(in oklab, var(--wn-m-slush-sh), var(--lt) var(--wn-amt));
    --wn-pine: color-mix(in oklab, var(--wn-m-pine), var(--lt) var(--lt-amt));
    --wn-pine-sh: color-mix(in oklab, var(--wn-m-pine-sh), var(--lt) var(--lt-amt));
    --wn-bark: color-mix(in oklab, var(--wn-m-bark), var(--lt) var(--lt-amt));
    --wn-twig: color-mix(in oklab, var(--wn-m-twig), var(--lt) var(--lt-amt));
    --wn-shed: color-mix(in oklab, var(--wn-m-shed-a), var(--lt) var(--lt-amt));
    --wn-shed-sh: color-mix(in oklab, var(--wn-m-shed-a-sh), var(--lt) var(--lt-amt));
    --wn-shed-b: color-mix(in oklab, var(--wn-m-shed-b), var(--lt) var(--lt-amt));
    --wn-shed-c: color-mix(in oklab, var(--wn-m-shed-c), var(--lt) var(--lt-amt));
    --wn-roof: color-mix(in oklab, var(--wn-m-roof), var(--lt) var(--lt-amt));
    --wn-bucket: color-mix(in oklab, var(--wn-m-bucket), var(--lt) var(--lt-amt));
    --wn-bucket-sh: color-mix(in oklab, var(--wn-m-bucket-sh), var(--lt) var(--lt-amt));
    --wn-scarf: color-mix(in oklab, var(--wn-m-scarf), var(--lt) var(--lt-amt));
    --wn-scarf-stripe: color-mix(in oklab, var(--wn-m-scarf-stripe), var(--lt) var(--lt-amt));
    --wn-trouser: color-mix(in oklab, var(--wn-m-trouser), var(--lt) var(--lt-amt));
    --wn-boot: color-mix(in oklab, var(--wn-m-boot), var(--lt) var(--lt-amt));
    --wn-parka: color-mix(in oklab, var(--wn-m-parka), var(--lt) var(--lt-amt));
    --wn-liberty: color-mix(in oklab, var(--wn-m-liberty), var(--lt) var(--lt-amt));
    --wn-liberty-dark: color-mix(in oklab, var(--wn-m-liberty-dark), var(--lt) var(--lt-amt));
    --wn-stalk: color-mix(in oklab, var(--wn-m-stalk), var(--lt) var(--lt-amt));
    --wn-cattail: color-mix(in oklab, var(--wn-m-cattail), var(--lt) var(--lt-amt));
  }
}

/* WINTER MOODS ----------------------------------------------
   Day: a paler, colder, crisper sky and flat cool light; the low sun glares
   across the ice and throws long blue shadows (toward the left in the
   morning, the right after noon). Under an overcast the glare and the cast
   shadows go, like the base sun does. */
.madison-scene[data-season="winter"][data-time="day"] { --sky-a: #8fb6dc; --sky-b: #c9dcee; --sky-c: #eef3f8; --mist: #f3f7fb; --cloud-b: #d4e0ea; }
.madison-scene[data-season="winter"][data-time="day"]:not([data-weather="cloudy"]):not([data-weather="fog"]):not([data-weather="rain"]):not([data-weather="storm"]):not([data-weather="snow"]) {
  --lt: #dde8f3; --lt-amt: 14%; --wn-cast-op: 0.16; --wn-glare-op: 0.34;
}
.madison-scene[data-season="winter"][data-time="day"][data-sub="afternoon"]:not([data-weather="cloudy"]):not([data-weather="fog"]):not([data-weather="rain"]):not([data-weather="storm"]):not([data-weather="snow"]) {
  --lt: #f1e4d2; --lt-amt: 12%; --wn-cast-op: 0.2;
}
.madison-scene[data-season="winter"][data-time="dawn"] { --wn-shadow: #5a5a9a; --wn-shadow-op: 0.16; --wn-cast-op: 0.2; --wn-glare-op: 0.5; }
.madison-scene[data-season="winter"][data-time="golden"] { --wn-shadow: #6a5a8a; --wn-shadow-op: 0.18; --wn-cast-op: 0.24; --wn-glare-op: 0.55; }
.madison-scene[data-season="winter"][data-time="dusk"] { --wn-amt: 40%; --wn-shadow: #2a2a5e; --wn-shadow-op: 0.22; --wn-cast-op: 0.1; --wn-glare-op: 0.4; }
/* blue hour: the snow itself glows cobalt, lights are on, no cast shadows */
.madison-scene[data-season="winter"][data-sub="blue"] { --wn-amt: 32%; --wn-shadow: #0d1b4a; --wn-shadow-op: 0.26; --wn-cast-op: 0; --wn-glare-op: 0.14; --wn-sparkle-op: 0.4; }
/* night: snow under the moon is blue-grey but never as dark as grass */
.madison-scene[data-season="winter"][data-time="night"] { --wn-amt: 58%; --wn-shadow: #0a1a3a; --wn-shadow-op: 0.22; --wn-cast-op: 0.08; --wn-glare-op: 0.12; --wn-sparkle-op: 0.5; --wn-flake-op: 0.8; --wn-breath-op: 0.3; }
/* late night: the shanty and the lantern are dark, the stars are crisp, the snow sparkles under the moon */
.madison-scene[data-season="winter"][data-sub="late"] { --wn-amt: 64%; --wn-window: var(--bldg-shade); --wn-sparkle-op: 0.85; --wn-glare-op: 0.2; }
.madison-scene[data-season="winter"][data-sub="predawn"] { --wn-amt: 60%; --wn-window: var(--bldg-shade); --wn-sparkle-op: 0.6; }
/* a cloudy winter day is a flat grey Wisconsin lid */
.madison-scene[data-season="winter"][data-weather="cloudy"] { --oc-op: 0.78; --oc-a: #9ea8b3; --oc-b: #c6ced5; }
/* overcast: flat light, no glare, no cast shadows, no sparkle */
.madison-scene[data-season="winter"]:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) { --wn-cast-op: 0; --wn-glare-op: 0; --wn-sparkle-op: 0; --wn-shadow-op: 0.1; }
.madison-scene[data-season="winter"][data-weather="flurries"] { --wn-cast-op: 0.05; --wn-glare-op: 0.1; --wn-sparkle-op: 0.2; }
.madison-scene[data-season="winter"]:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="rain"], [data-weather="storm"], [data-weather="snow"]) .wn-sky-cold { display: none; }

/* things that belong to one mood */
.wn-angler-eve, .wn-walker, .wn-late-sky, .wn-predawn, .madison-scene[data-season="winter"] .wn-iceboat-track { display: none; }
.madison-scene[data-season="winter"][data-sub="predawn"] .wn-predawn { display: inline; }
.madison-scene[data-season="winter"][data-sub="evening"] .wn-angler-eve { display: inline; }
.madison-scene[data-season="winter"][data-sub="predawn"] .wn-walker { display: inline; }
.madison-scene[data-season="winter"][data-sub="late"]:not([data-weather="cloudy"]):not([data-weather="fog"]):not([data-weather="rain"]):not([data-weather="storm"]):not([data-weather="snow"]):not([data-weather="flurries"]) .wn-late-sky { display: inline; }
.madison-scene[data-season="winter"][data-time="day"][data-lake="frozen"]:not([data-weather="fog"]):not([data-weather="storm"]):not([data-weather="snow"]) .wn-iceboat-track { display: inline; }
.madison-scene[data-season="winter"]:is([data-sub="late"], [data-sub="predawn"]) .wn-lantern { display: none; }
.wn-lamp-light { opacity: var(--lamp-op); }
.wn-lamp-dot { fill: #fff6d0; opacity: var(--lamp-op); }
.madison-scene[data-season="winter"]:is([data-time="night"], [data-sub="blue"]) .wn-smoke { opacity: 0.3; }
.madison-scene[data-season="winter"][data-sub="late"] .wn-smoke { display: none; }
.madison-scene[data-season="winter"]:is([data-time="dawn"], [data-time="golden"]) .wn-sky-cold { opacity: 0.4; }
.madison-scene[data-season="winter"]:is([data-time="night"], [data-time="dusk"]) .wn-sky-cold { opacity: 0; }

/* WEATHER: snowfall follows the real sky ------------------
   snow: all three sheets; flurries: two; unknown weather: one light seasonal
   flurry; clear, cloudy, fog, rain, storm: none. Late winter (thaw): none. */
.wn-snowfall { display: none; }
.madison-scene[data-season="winter"]:not([data-stage="late"]):is([data-weather=""], :not([data-weather]), [data-weather="flurries"], [data-weather="snow"]) .wn-snowfall { display: inline; }
.madison-scene[data-season="winter"]:is([data-weather=""], :not([data-weather])) :is(.wn-flakes-2, .wn-flakes-3) { display: none; }
.madison-scene[data-season="winter"][data-weather="flurries"] .wn-flakes-3 { display: none; }
/* small flakes read as blue-grey against a bright day sky */
.madison-scene[data-season="winter"]:not([data-time="night"]):not([data-time="dusk"]) .wn-flakes-1 circle { fill: var(--wn-snow-sh); }

/* the far hills are snow too, so the haze is lighter than the base */
.madison-scene[data-season="winter"] .ms-far-hills { opacity: 0.92; }
/* dead cattails, dry and tan; the bank shadow stays blue, not green */
.madison-scene[data-season="winter"] .ms-stalk { stroke: var(--wn-stalk); }
.madison-scene[data-season="winter"] .ms-cattail-head { fill: var(--wn-cattail); }
.madison-scene[data-season="winter"] .ms-ground-shadow { fill: var(--wn-shadow); opacity: var(--wn-shadow-op); }
.madison-scene[data-season="winter"]:not([data-time="night"]) .ms-sun-halo { opacity: 0.8; }

/* PAINT ---------------------------------------------------- */
.wn-cap { fill: var(--wn-snow); }
.wn-cap-sh { fill: var(--wn-snow-sh); }
.wn-ledge { fill: none; stroke: var(--wn-snow); stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.wn-ridge { fill: none; stroke: var(--wn-snow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wn-ridge-thick { stroke-width: 4; }
.wn-dome-dust { fill: none; stroke: var(--wn-snow); stroke-width: 2.4; stroke-linecap: round; opacity: 0.55; }
.wn-shoreline { fill: var(--wn-snow); opacity: 0.92; }
.wn-shoreline-sh { fill: none; stroke: var(--wn-snow-sh); stroke-width: 2.5; stroke-linecap: round; opacity: 0.7; }
.wn-brush { fill: var(--wn-twig); opacity: 0.28; }
.wn-twig-haze { fill: var(--wn-twig); opacity: 0.22; }
.wn-bark { fill: var(--wn-bark); }
.wn-branch { fill: none; stroke: var(--wn-bark); stroke-linecap: round; stroke-linejoin: round; }
.wn-branch-snow { fill: none; stroke: var(--wn-snow); stroke-linecap: round; opacity: 0.9; }
.wn-bare-back { opacity: 0.66; }
.wn-tree-snow { fill: var(--wn-snow); opacity: 0.95; }
.wn-glare { opacity: var(--wn-glare-op); }
.wn-floodlight { opacity: var(--glow-op); }
.wn-reflect { fill: var(--reflect); opacity: calc(var(--reflect-op) * 0.45); }
.wn-glaze { fill: var(--wn-glaze); opacity: 0.45; }
.wn-drift { opacity: 0.95; }
.wn-drift-sh { fill: var(--wn-shadow); opacity: calc(var(--wn-shadow-op) * 0.6); }
.wn-crack { fill: none; stroke: var(--wn-crack); stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.wn-crack-lit { fill: none; stroke: var(--wn-snow); stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.wn-sparkle circle { fill: var(--glitter); opacity: var(--wn-sparkle-op); }
.wn-prints { fill: var(--wn-shadow); opacity: calc(var(--wn-shadow-op) * 1.6); }
.wn-steel-late { opacity: 0.7; }
.wn-shelf { fill: var(--wn-ice-b); opacity: 0.85; }
.wn-shelf-near { fill: var(--wn-ice-c); }
.wn-floes { fill: var(--wn-slush); opacity: 0.92; }
.wn-floe-shade { fill: var(--wn-slush-sh); opacity: 0.35; }
.wn-ice-shadow { fill: var(--wn-shadow); opacity: var(--wn-shadow-op); }
.wn-cast { fill: var(--wn-shadow); opacity: var(--wn-cast-op); }
.wn-cast-pm, .madison-scene[data-sun="pm"] .wn-cast-am { display: none; }
.madison-scene[data-sun="pm"] .wn-cast-pm { display: inline; }
.wn-big-cast { opacity: calc(var(--wn-cast-op) * 0.8); }
.wn-shed-b { fill: var(--wn-shed-b); }
.wn-shed-c { fill: var(--wn-shed-c); }
.wn-roof { fill: var(--wn-roof); }
.wn-door { fill: var(--wn-shed-sh); opacity: 0.85; }
.wn-window { fill: var(--wn-window); opacity: 0.9; }
.wn-pipe { fill: var(--wn-trouser); }
.wn-smoke { fill: var(--wn-snow); opacity: 0.55; }
.wn-drift-foot { fill: none; stroke: var(--wn-snow); stroke-width: 5; stroke-linecap: round; opacity: 0.9; }
.wn-parka { fill: var(--wn-parka); }
.wn-parka-hood { fill: var(--wn-trouser); }
.wn-plank { stroke: #6b4a2b; stroke-width: 4; stroke-linecap: round; }
.wn-runner { fill: none; stroke: #4b4f58; stroke-width: 2; stroke-linecap: round; }
.wn-fuselage { fill: #f1e7d2; }
.wn-cockpit { fill: none; stroke: #3b3430; stroke-width: 2.4; stroke-linecap: round; }
.wn-mast { stroke: #5a4632; stroke-width: 3; stroke-linecap: round; }
.wn-jib { fill: var(--sail-b); }
.wn-spray { fill: none; stroke: var(--wn-snow); stroke-width: 2.4; stroke-linecap: round; opacity: 0.8; }
.wn-lib { fill: var(--wn-liberty); }
.wn-lib-dark { fill: var(--wn-liberty-dark); stroke: none; }
.wn-lib-ray { fill: var(--wn-liberty); stroke: var(--wn-liberty-dark); stroke-width: 0.6; stroke-linejoin: round; }
.wn-lib-arm { stroke: var(--wn-liberty); stroke-width: 5; stroke-linecap: round; }
.wn-flame { fill: #f3b43e; }
.wn-bank-edge { fill: none; stroke: var(--wn-shadow); stroke-width: 6; stroke-linecap: round; opacity: calc(var(--wn-shadow-op) * 1.4); }
.wn-bank-lit { fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; opacity: 0.45; }
.wn-bank-sh { fill: none; stroke: var(--wn-shadow); stroke-width: 7; stroke-linecap: round; opacity: calc(var(--wn-shadow-op) * 0.8); }
.wn-ghost { fill: none; stroke: none; }
.wn-scarf { fill: var(--wn-scarf); stroke: var(--wn-scarf); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ms-badger-ice .wn-scarf { stroke-width: 2.5; }
.wn-scarf-stripe { fill: none; stroke: var(--wn-scarf-stripe); stroke-width: 2.2; stroke-linecap: round; opacity: 0.9; }
.wn-fringe { fill: none; stroke: var(--wn-scarf); stroke-width: 1.6; stroke-linecap: round; }
.wn-beanie { fill: var(--wn-scarf); }
.wn-beanie-band { fill: var(--wn-scarf-stripe); }
.wn-beanie-rib { fill: none; stroke: var(--wn-scarf-stripe); stroke-width: 1.3; stroke-linecap: round; opacity: 0.7; }
.wn-pom { fill: var(--wn-scarf-stripe); }
.wn-hole-rim { fill: var(--wn-snow-sh); }
.wn-hole { fill: var(--water-c); }
.wn-hole-shine { fill: none; stroke: var(--wn-snow); stroke-width: 1.5; stroke-linecap: round; opacity: 0.5; }
.wn-bucket-rim { fill: var(--wn-bucket-sh); }
.wn-bucket-line { fill: none; stroke: #000; stroke-opacity: 0.12; stroke-width: 2; }
.wn-trouser { fill: var(--wn-trouser); }
.wn-trouser-lit { fill: none; stroke: #ffffff; stroke-opacity: 0.14; stroke-width: 4; stroke-linecap: round; }
.wn-trouser-crease { fill: none; stroke: #000; stroke-opacity: 0.25; stroke-width: 2; stroke-linecap: round; }
.wn-boot { fill: var(--wn-boot); }
.wn-mitten { fill: var(--wn-scarf); }
.wn-breath { fill: #ffffff; opacity: 0; }
.wn-tipup-wood { fill: none; stroke: #8a6a44; stroke-width: 3; stroke-linecap: round; }
.wn-tipup-wire { fill: none; stroke: #3b3430; stroke-width: 1.4; }
.wn-tipup-flag { fill: #ef7d2a; }
.wn-auger-shaft { stroke: #3b3430; stroke-width: 2.4; stroke-linecap: round; }
.wn-auger-handle { stroke: #8a6a44; stroke-width: 4; stroke-linecap: round; }
.wn-auger-blade { fill: none; stroke: #9aa3ad; stroke-width: 2; stroke-linecap: round; }
.wn-lantern { opacity: var(--lamp-op); }
.wn-flakes circle { fill: #ffffff; opacity: var(--wn-flake-op); }
.wn-faint-stars circle { fill: #ffffff; opacity: 0.55; }

/* THE ICE-FISHING BADGER'S CATCH: the curd flies from the hole to his face */
.ms-badger-ice { --curd-mx: 70px; --curd-my: -168px; --curd-x: 150px; --curd-y: -112px; }

/* MOTION (each animation lives on the selector that shows the element) */
.wn-iceboat-track { transform: translate(1700px, 528px); }
.wn-iceboat { transform-origin: 50% 100%; }
.wn-walker { transform: translate(690px, 668px); }
@media (prefers-reduced-motion: no-preference) {
  .madison-scene[data-season="winter"][data-time="day"] .wn-iceboat-track { animation: wn-iceboat 26s linear infinite -9s; }
  .madison-scene[data-season="winter"][data-time="day"] .wn-iceboat { animation: wn-heel 2.6s ease-in-out infinite; }
  .madison-scene[data-season="winter"][data-time="day"] .wn-spray { animation: wn-spray 0.5s ease-in-out infinite alternate; }
  .madison-scene[data-season="winter"]:not([data-sub="late"]) .wn-smoke { animation: wn-smoke 5s ease-in-out infinite; transform-origin: 50% 100%; }
  .madison-scene[data-season="winter"][data-lake="frozen"] .wn-sparkle circle { animation: ms-glint 2.8s ease-in-out infinite; }
  .madison-scene[data-season="winter"][data-lake="frozen"] .wn-breath { animation: wn-breath 4.4s ease-out infinite; transform-origin: 100% 50%; }
  .madison-scene[data-season="winter"][data-sub="predawn"] .wn-walker { animation: wn-walk 54s linear infinite; }
  .madison-scene[data-season="winter"][data-sub="predawn"] .wn-walker-step { animation: wn-step 0.7s ease-in-out infinite alternate; }
  .madison-scene[data-season="winter"]:is([data-weather=""], :not([data-weather]), [data-weather="flurries"], [data-weather="snow"]) .wn-flakes-1 { animation: wn-fall-1 34s linear infinite; }
  .madison-scene[data-season="winter"]:is([data-weather="flurries"], [data-weather="snow"]) .wn-flakes-2 { animation: wn-fall-2 24s linear infinite -8s; }
  .madison-scene[data-season="winter"][data-weather="snow"] .wn-flakes-3 { animation: wn-fall-3 17s linear infinite -3s; }
}
@keyframes wn-iceboat { from { transform: translate(1720px, 528px); } to { transform: translate(-160px, 528px); } }
@keyframes wn-heel { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.2deg); } }
@keyframes wn-spray { from { transform: translateX(0); opacity: 0.8; } to { transform: translateX(-6px); opacity: 0.35; } }
@keyframes wn-smoke { 0%, 100% { opacity: 0.45; transform: translateY(0) scale(1); } 50% { opacity: 0.6; transform: translateY(-4px) scale(1.06); } }
@keyframes wn-breath { 0%, 55%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); } 62% { opacity: var(--wn-breath-op); transform: translate(-4px, -2px) scale(0.9); } 84% { opacity: 0; transform: translate(-22px, -10px) scale(1.5); } }
/* one angler walks out from the near shore toward the far ice, then starts again */
@keyframes wn-walk {
  0% { opacity: 0; transform: translate(690px, 668px) scale(1); }
  6% { opacity: 1; }
  90% { opacity: 1; transform: translate(1060px, 586px) scale(0.62); }
  100% { opacity: 0; transform: translate(1100px, 580px) scale(0.6); }
}
@keyframes wn-step { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
/* each sheet of flakes falls one scene height while drifting a little sideways */
@keyframes wn-fall-1 { 0% { transform: translate(0, 0); } 25% { transform: translate(-14px, 175px); } 50% { transform: translate(4px, 350px); } 75% { transform: translate(-10px, 525px); } 100% { transform: translate(0, 700px); } }
@keyframes wn-fall-2 { 0% { transform: translate(0, 0); } 30% { transform: translate(16px, 210px); } 60% { transform: translate(-6px, 420px); } 100% { transform: translate(0, 700px); } }
@keyframes wn-fall-3 { 0% { transform: translate(0, 0); } 40% { transform: translate(-20px, 280px); } 70% { transform: translate(8px, 490px); } 100% { transform: translate(0, 700px); } }