/* Footer scene lane (fs-). Illustrated schoolhouse + playground above the footer wave.
   Every colour derives from the foundation's --brand-* tokens (cloneable). Decorative only.
   Motion: transform / opacity only, and only while .fs-anim is set (footer-scene.js adds it near the
   viewport and never under reduced motion). No-JS and reduced motion show the composed daytime still. */

.fs-scene {
  --fs-h: 194px;            /* art height */
  --fs-cx: 896;             /* composition x shown at the centre of the screen */
  position: relative; width: 100%; height: var(--fs-h);
  pointer-events: none; -webkit-user-select: none; user-select: none;

  /* ---- palette (all derived from brand tokens) ---- */
  --fs-white: color-mix(in oklab, var(--brand-paper) 55%, #fff);
  --fs-hill-far: color-mix(in oklab, var(--brand-leaf) 34%, color-mix(in oklab, var(--brand-primary) 24%, #fff));
  --fs-tree-far: color-mix(in oklab, var(--brand-leaf) 52%, color-mix(in oklab, var(--brand-primary) 30%, #fff));
  --fs-hill-mid: color-mix(in oklab, var(--brand-leaf) 62%, var(--brand-paper));
  --fs-lawn: color-mix(in oklab, var(--brand-leaf) 86%, var(--brand-sun));
  --fs-front: color-mix(in oklab, var(--brand-leaf) 90%, var(--brand-navy));
  --fs-tree: color-mix(in oklab, var(--brand-leaf) 74%, var(--brand-navy));
  --fs-tree-hi: color-mix(in oklab, var(--brand-leaf) 78%, var(--brand-sun));
  --fs-trunk: color-mix(in oklab, var(--brand-secondary) 42%, var(--brand-navy));
  --fs-stem: color-mix(in oklab, var(--brand-leaf) 70%, var(--brand-navy));
  --fs-wall: color-mix(in oklab, var(--brand-berry) 48%, var(--brand-secondary));
  --fs-wall-line: color-mix(in oklab, var(--fs-wall) 70%, var(--brand-navy));
  --fs-roof: color-mix(in oklab, var(--brand-accent) 82%, var(--brand-navy));
  --fs-stone: color-mix(in oklab, var(--brand-paper) 72%, var(--brand-ink));
  --fs-door: color-mix(in oklab, var(--brand-primary) 55%, var(--brand-sky));
  --fs-glass: color-mix(in oklab, var(--brand-primary) 52%, #fff);
  --fs-lit: color-mix(in oklab, var(--brand-sun) 72%, #fff);
  --fs-road: color-mix(in oklab, var(--brand-secondary) 16%, var(--brand-paper));
  --fs-road-edge: color-mix(in oklab, var(--brand-secondary) 34%, var(--brand-paper));
  --fs-kid: color-mix(in oklab, var(--brand-navy) 84%, var(--brand-accent));
  --fs-line: color-mix(in oklab, var(--brand-navy) 45%, #fff);
  --fs-star: color-mix(in oklab, var(--brand-sun) 35%, #fff);
  --fs-moon: color-mix(in oklab, var(--brand-sun) 28%, #fff);
  --fs-glow: color-mix(in oklab, var(--brand-sun) 80%, #fff);
  --fs-bird: color-mix(in oklab, var(--brand-navy) 72%, var(--brand-primary));

  /* ---- phase: day (default) ---- */
  --fs-sky1: color-mix(in oklab, var(--brand-primary) 46%, #fff);
  --fs-sky2: color-mix(in oklab, var(--brand-primary) 24%, #fff);
  --fs-sky3: color-mix(in oklab, var(--brand-sun) 16%, #fff);
  --fs-cloud: #fff;
  --fs-cloud-sh: color-mix(in oklab, var(--brand-primary) 20%, #fff);
  --fs-shade: var(--brand-navy);
  --fs-shade-o: 0;
  --fs-under: color-mix(in srgb, var(--fs-front), var(--fs-shade) calc(var(--fs-shade-o) * 100%));
}
.fs-scene[data-phase="golden"] {
  --fs-sky1: color-mix(in oklab, var(--brand-accent) 24%, var(--brand-berry-soft));
  --fs-sky2: color-mix(in oklab, var(--brand-secondary) 30%, var(--brand-sun-soft));
  --fs-sky3: color-mix(in oklab, var(--brand-sun) 66%, var(--brand-secondary));
  --fs-cloud: color-mix(in oklab, var(--brand-sun) 22%, #fff);
  --fs-cloud-sh: color-mix(in oklab, var(--brand-berry) 28%, var(--brand-sun-soft));
  --fs-shade: var(--brand-secondary);
  --fs-shade-o: .14;
}
.fs-scene[data-phase="dusk"] {
  --fs-sky1: color-mix(in oklab, var(--brand-accent) 78%, var(--brand-berry));
  --fs-sky2: color-mix(in oklab, var(--brand-berry) 72%, var(--brand-secondary));
  --fs-sky3: color-mix(in oklab, var(--brand-sun) 62%, var(--brand-secondary));
  --fs-cloud: color-mix(in oklab, var(--brand-berry) 34%, var(--brand-lavender));
  --fs-cloud-sh: color-mix(in oklab, var(--brand-accent) 45%, var(--brand-berry));
  --fs-shade: color-mix(in oklab, var(--brand-accent) 50%, var(--brand-navy));
  --fs-shade-o: .42;
}
.fs-scene[data-phase="night"] {
  --fs-sky1: color-mix(in oklab, var(--brand-navy) 60%, var(--brand-accent));
  --fs-sky2: color-mix(in oklab, var(--brand-accent) 78%, var(--brand-sky));
  --fs-sky3: color-mix(in oklab, var(--brand-accent) 42%, var(--brand-lavender));
  --fs-cloud: color-mix(in oklab, var(--brand-navy) 55%, var(--brand-lavender));
  --fs-cloud-sh: color-mix(in oklab, var(--brand-navy) 78%, var(--brand-accent));
  --fs-shade: var(--brand-navy);
  --fs-shade-o: .58;
}
.fs-scene[data-phase="dawn"] {
  --fs-sky1: color-mix(in oklab, var(--brand-accent) 62%, var(--brand-sky));
  --fs-sky2: color-mix(in oklab, var(--brand-berry) 40%, var(--brand-lavender));
  --fs-sky3: color-mix(in oklab, var(--brand-sun) 70%, var(--brand-berry-soft));
  --fs-cloud: color-mix(in oklab, var(--brand-berry) 22%, var(--brand-lavender));
  --fs-cloud-sh: color-mix(in oklab, var(--brand-accent) 35%, var(--brand-berry));
  --fs-shade: var(--brand-accent);
  --fs-shade-o: .32;
}

/* ---- frame: the SVG is sized by height and centred on --fs-cx; extra width is clipped ---- */
.fs-clip { position: absolute; inset: 0; overflow: hidden; contain: strict; }
.fs-svg {
  position: absolute; bottom: 0; display: block; max-width: none;
  height: 100%; width: calc(var(--fs-h) * 10);
  left: calc(50% - (var(--fs-cx) + 800) * var(--fs-h) / 320);
}
/* paper grain, same recipe as the foundation's .paper-grain */
.fs-clip::after {
  content: ""; position: absolute; inset: 9% 0 0; pointer-events: none; opacity: .45;  /* starts below the wave, so the paper above it is untouched */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the grass continues behind the footer wave (painted under it, never over it) */
.fs-under {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: -1;
  height: calc(clamp(28px, 4vw, 64px) + 2px); background: var(--fs-under);
}
@media (min-width: 640px) { .fs-scene { --fs-h: 240px; --fs-cx: 830; } }
@media (min-width: 1024px) { .fs-scene { --fs-h: max(clamp(250px, 20vw, 320px), 10vw); --fs-cx: 800; } }

/* ---- paint ---- */
.fs-sk1 { stop-color: var(--fs-sky1); } .fs-sk2 { stop-color: var(--fs-sky2); } .fs-sk3 { stop-color: var(--fs-sky3); }
.fs-gl0 { stop-color: var(--fs-glow); stop-opacity: .7; } .fs-gl1 { stop-color: var(--fs-glow); stop-opacity: 0; }
.fs-mg0 { stop-color: var(--fs-moon); stop-opacity: .4; } .fs-mg1 { stop-color: var(--fs-moon); stop-opacity: 0; }
.fs-gs0 { stop-color: color-mix(in oklab, var(--brand-primary) 12%, #fff); } .fs-gs1 { stop-color: var(--fs-glass); }
.fs-star { fill: var(--fs-star); }
.fs-moon-c { fill: var(--fs-moon); }
.fs-sun-c, .fs-ray { fill: var(--brand-sun); }
.fs-sun-hi { fill: #fff; opacity: .4; }
.fs-sunset-c { fill: color-mix(in oklab, var(--brand-secondary) 45%, var(--brand-sun)); }
.fs-cloud-c { fill: var(--fs-cloud); } .fs-cloud-sh { fill: var(--fs-cloud-sh); }
.fs-bird { stroke: var(--fs-bird); }
.fs-hill-far { fill: var(--fs-hill-far); } .fs-tree-far { fill: var(--fs-tree-far); }
.fs-hill-mid { fill: var(--fs-hill-mid); }
.fs-lawn { fill: var(--fs-lawn); }
.fs-tree { fill: var(--fs-tree); } .fs-tree-hi { fill: var(--fs-tree-hi); } .fs-trunk { fill: var(--fs-trunk); }
.fs-ground-sh { fill: var(--brand-navy); opacity: .13; }
.fs-wall { fill: var(--fs-wall); }
.fs-siding { fill: none; stroke: var(--fs-wall-line); stroke-width: 1.1; opacity: .32; }
.fs-trim, .fs-sign-edge, .fs-picket, .fs-rail { fill: var(--fs-white); }
.fs-picket { stroke: var(--fs-stem); stroke-width: .7; stroke-opacity: .28; }
.fs-base, .fs-step { fill: var(--fs-stone); }
.fs-chimney { fill: color-mix(in oklab, var(--fs-wall) 58%, var(--brand-navy)); }
.fs-chimney-cap, .fs-roof, .fs-box, .fs-sign { fill: var(--fs-roof); }
.fs-roof-hi { stroke: color-mix(in oklab, var(--fs-roof) 60%, #fff); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.fs-belfry-in { fill: color-mix(in oklab, var(--fs-roof) 70%, var(--brand-navy)); }
.fs-bell-c, .fs-knob, .fs-lamp { fill: var(--brand-sun); }
.fs-cross { fill: none; stroke: var(--brand-sun); stroke-width: 4; stroke-linecap: round; }
.fs-cross-lit { fill: none; stroke: var(--fs-lit); stroke-width: 4; stroke-linecap: round; }
.fs-eave { fill: var(--brand-navy); opacity: .14; }
.fs-shine { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: .75; }
.fs-mullion { fill: none; stroke: var(--fs-white); stroke-width: 2.6; }
.fs-bloom0 { fill: var(--brand-berry); } .fs-bloom1 { fill: var(--brand-sun); } .fs-bloom2 { fill: var(--brand-primary); }
.fs-door { fill: var(--fs-door); }
.fs-door-line { fill: none; stroke: color-mix(in oklab, var(--fs-door) 65%, var(--brand-navy)); stroke-width: 1.6; stroke-linecap: round; }
.fs-path, .fs-road { fill: var(--fs-road); }
.fs-road-edge, .fs-road-dot { fill: var(--fs-road-edge); }
.fs-sign-text { font-family: var(--font-accent); font-size: 20px; letter-spacing: .03em; fill: var(--fs-white); }
.fs-sign-l2 { fill: var(--brand-sun); }
.fs-stem { fill: none; stroke: var(--fs-stem); stroke-width: 3.2; stroke-linecap: round; }
.fs-sfleaf { fill: var(--fs-stem); }
.fs-petal { fill: var(--brand-sun); }
.fs-petal2 { fill: color-mix(in oklab, var(--brand-sun) 62%, var(--brand-secondary)); }
.fs-core { fill: var(--fs-trunk); } .fs-seed { fill: color-mix(in oklab, var(--fs-trunk) 60%, var(--brand-navy)); }
.fs-core-hi { fill: #fff; opacity: .28; }
.fs-frame { fill: none; stroke: var(--brand-sky); stroke-width: 5; stroke-linecap: round; }
.fs-frame-bar { fill: none; stroke: var(--brand-sky); stroke-width: 6.5; stroke-linecap: round; }
.fs-frame-thin { fill: none; stroke: var(--brand-accent); stroke-width: 2.6; stroke-linecap: round; }
.fs-rung { fill: none; stroke: var(--brand-sky); stroke-width: 2.6; stroke-linecap: round; }
.fs-deck { fill: var(--brand-sky); }
.fs-rope { fill: none; stroke: var(--fs-line); stroke-width: 1.6; }
.fs-seat-a { fill: var(--brand-berry); } .fs-seat-b { fill: var(--brand-secondary); }
.fs-kid { fill: var(--fs-kid); }
.fs-kid-limb { fill: none; stroke: var(--fs-kid); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.fs-chute { fill: none; stroke: var(--brand-secondary); stroke-width: 9; stroke-linecap: round; }
.fs-chute-sh { fill: none; stroke: color-mix(in oklab, var(--brand-secondary) 65%, var(--brand-navy)); stroke-width: 9; stroke-linecap: round; }
.fs-chute-hi { fill: none; stroke: color-mix(in oklab, var(--brand-secondary) 50%, #fff); stroke-width: 2.2; stroke-linecap: round; }
.fs-pivot { fill: var(--brand-accent); }
.fs-board { fill: var(--brand-berry); }
.fs-k-berry { fill: var(--brand-berry); } .fs-k-sun { fill: var(--brand-sun); }
.fs-k-cyan { fill: var(--brand-primary); } .fs-k-indigo { fill: var(--brand-accent); }
.fs-spar { fill: none; stroke: #fff; stroke-width: 1.3; opacity: .7; }
.fs-string, .fs-tail-l { fill: none; stroke: var(--fs-line); stroke-width: 1.1; opacity: .7; }
.fs-bus-c { fill: var(--brand-sun); }
.fs-bus-roof { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .6; }
.fs-bus-win { fill: var(--fs-glass); }
.fs-bus-dark, .fs-tyre { fill: var(--brand-ink); }
.fs-bus-door { fill: var(--fs-glass); stroke: var(--brand-ink); stroke-width: .8; }
.fs-bus-stripe, .fs-bus-dark-l { fill: none; stroke: var(--brand-ink); stroke-width: 1.5; }
.fs-bus-light { fill: #fff; }
.fs-bus-tail { fill: var(--brand-berry); }
.fs-bus-amber { fill: var(--brand-secondary); }
.fs-hub { fill: var(--fs-stone); }
.fs-spoke { fill: none; stroke: var(--brand-ink); stroke-width: 1.4; }
.fs-headlamp { opacity: 0; }
.fs-front, .fs-tuft { fill: var(--fs-front); }
.fs-shade { fill: var(--fs-shade); opacity: var(--fs-shade-o); }
.fs-halo { opacity: .75; }
.fs-litwin { fill: var(--fs-lit); }
.fs-mullion-n { fill: none; stroke: color-mix(in oklab, var(--fs-roof) 60%, var(--brand-navy)); stroke-width: 2.6; }
.fs-fly-c { fill: color-mix(in oklab, var(--brand-sun) 55%, #fff); }
.fs-fly-halo { fill: var(--brand-sun); opacity: .35; }

/* ---- what appears in which phase ---- */
.fs-sunset, .fs-moon, .fs-stars, .fs-flies, .fs-lit { display: none; }
.fs-scene[data-phase="golden"] .fs-sun { display: none; }
.fs-scene[data-phase="golden"] .fs-sunset { display: inline; }
.fs-scene[data-phase="golden"] .fs-headlamp { opacity: .9; }
.fs-scene:is([data-phase="dusk"], [data-phase="night"], [data-phase="dawn"]) :is(.fs-sun, .fs-kites, .fs-kids, .fs-birds, .fs-bus) { display: none; }
.fs-scene:is([data-phase="dusk"], [data-phase="night"], [data-phase="dawn"]) :is(.fs-moon, .fs-stars, .fs-lit) { display: inline; }
.fs-scene:is([data-phase="dusk"], [data-phase="night"]) .fs-flies { display: inline; }
.fs-scene[data-phase="dusk"] .fs-stars { opacity: .55; }
.fs-scene[data-phase="dawn"] .fs-stars { opacity: .35; }
.fs-scene[data-phase="dawn"] .fs-moon { opacity: .6; }

/* ---- pivots (every animated group carries an invisible anchor rect that centres its box on the pivot) ---- */
.fs-rays, .fs-wheel, .fs-plank, .fs-kite, .fs-flap, .fs-swing, .fs-tail, .fs-bell, .fs-sfu,
.fs-bus-body, .fs-door-l, .fs-door-r, .fs-fly, .fs-drift { transform-box: fill-box; transform-origin: 50% 50%; }
.fs-swing, .fs-tail, .fs-bell { transform-origin: 50% 0; }
.fs-sfu, .fs-bus-body { transform-origin: 50% 100%; }
.fs-door-l { transform-origin: 0 50%; } .fs-door-r { transform-origin: 100% 50%; }

/* ---- the composed still (no JS, reduced motion, and the pose before motion starts) ---- */
.fs-swing-a { transform: rotate(5deg); }
.fs-swing-b { transform: rotate(-15deg); }
.fs-plank { transform: rotate(-8deg); }
.fs-flock { transform: translate(1150px, 0); }
.fs-scene:is([data-phase="dusk"], [data-phase="night"], [data-phase="dawn"]) :is(.fs-swing, .fs-bell) { transform: none; animation: none; }
.fs-scene:is([data-phase="dusk"], [data-phase="night"], [data-phase="dawn"]) .fs-plank { animation: none; }

/* ---- motion (only while .fs-anim; .fs-paused freezes it offscreen). Each loop is gated to the
   phases where it is visible, so hidden layers never animate. ---- */
.fs-anim .fs-drift { animation: fs-drift 28s ease-in-out infinite alternate; }
.fs-anim .fs-sfu { animation: fs-sway 5.5s ease-in-out infinite alternate; }
.fs-anim[data-phase="day"] .fs-rays { animation: fs-spin 90s linear infinite; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-flock { animation: fs-fly 48s linear infinite; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-flap { animation: fs-flap .5s ease-in-out infinite alternate; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-kite-a { animation: fs-kite-a 7s ease-in-out infinite alternate; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-kite-b { animation: fs-kite-b 9s ease-in-out -4s infinite alternate; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-tail { animation: fs-tail 1.7s ease-in-out infinite alternate; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-bell { animation: fs-bell 15s ease-in-out infinite; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-swing-a { animation: fs-swing-a 3.1s ease-in-out -1s infinite alternate; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-swing-b { animation: fs-swing-b 3.4s ease-in-out infinite alternate; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-plank { animation: fs-seesaw 3s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-bus-move { animation: fs-bus 26s infinite; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-wheel { animation: fs-wheel 26s infinite; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) .fs-bus-body { animation: fs-rock 26s ease-in-out infinite; }
.fs-anim:is([data-phase="day"], [data-phase="golden"]) :is(.fs-door-l, .fs-door-r) { animation: fs-door 26s ease-in-out infinite; }
.fs-anim:is([data-phase="dusk"], [data-phase="night"], [data-phase="dawn"]) .fs-tw { animation: fs-twinkle 3.8s ease-in-out infinite alternate; }
.fs-anim:is([data-phase="dusk"], [data-phase="night"]) .fs-fly { animation: fs-flit 7s ease-in-out infinite alternate, fs-glow 2.8s ease-in-out infinite alternate; }
.fs-scene.fs-anim .fs-d1 { animation-delay: -1.3s; } .fs-scene.fs-anim .fs-d2 { animation-delay: -2.7s; }
.fs-scene.fs-anim .fs-d3 { animation-delay: -4.1s; } .fs-scene.fs-anim .fs-d4 { animation-delay: -5.6s; }
@media (max-width: 1599px) { .fs-scene.fs-anim .fs-edge { animation: none; } }  /* edge filler is off-screen below 1600px */
@media (max-width: 639px) { .fs-scene.fs-anim .fs-xm { animation: none; } }
.fs-paused, .fs-paused * { animation-play-state: paused !important; }

@keyframes fs-spin { to { transform: rotate(360deg); } }
@keyframes fs-drift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
@keyframes fs-fly { 0% { transform: translate(-1000px, 18px); } 36% { transform: translate(260px, -4px); }
  72%, 100% { transform: translate(2500px, 10px); } }
@keyframes fs-flap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
@keyframes fs-kite-a { from { transform: rotate(-2.4deg); } to { transform: rotate(2.6deg); } }
@keyframes fs-kite-b { from { transform: rotate(1.3deg); } to { transform: rotate(-1.5deg); } }
@keyframes fs-tail { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes fs-bell { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(14deg); } 90% { transform: rotate(-11deg); }
  93% { transform: rotate(7deg); } 96% { transform: rotate(-3deg); } }
@keyframes fs-swing-a { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
@keyframes fs-swing-b { from { transform: rotate(21deg); } to { transform: rotate(-21deg); } }
@keyframes fs-seesaw { 0%, 12% { transform: rotate(-11deg); } 88%, 100% { transform: rotate(11deg); } }
@keyframes fs-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
/* bus: 0-32% arrives (eases to a stop), 32-56% waits with the door open, 56-84% pulls away, then off stage */
@keyframes fs-bus {
  0% { transform: translateX(-1700px); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  32% { transform: translateX(0); }
  56% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .78, .4); }
  84%, 100% { transform: translateX(1900px); }
}
@keyframes fs-wheel { /* rotation matches distance: 1700 / (2 pi 9) turns, then 1900 / (2 pi 9) */
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  32% { transform: rotate(10822deg); }
  56% { transform: rotate(10822deg); animation-timing-function: cubic-bezier(.55, 0, .78, .4); }
  84%, 100% { transform: rotate(22918deg); }
}
@keyframes fs-rock { 0%, 30% { transform: rotate(0); } 33% { transform: rotate(1.6deg); } 36% { transform: rotate(-.6deg); }
  39%, 56% { transform: rotate(0); } 59% { transform: rotate(-1.3deg); } 63%, 100% { transform: rotate(0); } }
@keyframes fs-door { 0%, 34% { transform: scaleX(1); } 37%, 51% { transform: scaleX(.18); } 54%, 100% { transform: scaleX(1); } }
@keyframes fs-twinkle { from { opacity: 1; } to { opacity: .3; } }
@keyframes fs-flit { 0% { transform: translate(0, 0); } 33% { transform: translate(9px, -7px); }
  66% { transform: translate(-6px, -12px); } 100% { transform: translate(4px, -3px); } }
@keyframes fs-glow { from { opacity: .2; } to { opacity: 1; } }

/* ---- small screens: fewer layers, celestial bodies moved into the narrower window ---- */
@media (max-width: 639px) {
  .fs-xm { display: none; }
  .fs-sun-at { transform: translate(800px, -18px); }
  .fs-moon-at { transform: translate(-150px, -12px); }
  .fs-sunset-at { transform: translate(880px, 0); }
  .fs-flock { transform: translate(860px, -8px); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .fs-sun-at { transform: translate(140px, 0); }
  .fs-sunset-at { transform: translate(140px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fs-scene, .fs-scene * { animation: none !important; }
}
@media print { .fs-scene { display: none; } }