/* The fixed paper-cut countryside behind every redesigned page.

   Markup: <div class="scene" aria-hidden="true"> ... </div>, injected by js/skin/scene.js on pages with
   <body class="has-scene"> (the home page writes the same markup inline so it needs no JS).
   The scene changes from dawn to night as the page scrolls: scene.js (inner pages) or js/skin/home.js (home)
   writes the colour variables below onto the .scene element (and the footer), never onto <html>, so a
   repaint restyles ~30 scene nodes instead of the whole document.

   Defaults here are the DAYTIME scene. That is what you get with reduced motion, with no JS, and on
   print. Content must sit on cream cards (.card, see theme.css): the sky behind them gets dark at night. */

:root {
  --sky-top: #8dbac7; --sky-bot: #f4ebcf;
  --sun: #fff8e0; --sun-x: 56vw; --sun-y: 15vh; --stars: 0;
  --cloud: #fffaf0;
  --far: #b3c1a1; --mid: #8da683; --near: #667f5e; --ground: #566b47;
  --town: #9a7f6a; --town-roof: #6b4a3e; --win: #ffd98a; --win-op: .15;
}

/* Dark: the same scene, but always an evening one (no JS, reduced motion, or before the first repaint). With JS the sky
   still runs on from dusk to deep night as you scroll (js/skin/scene.js and js/skin/home.js carry the dark stops). Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-top: #14182e; --sky-bot: #3a2f50;
    --sun: #efe5c6; --sun-x: 70vw; --sun-y: 22vh; --stars: 1;
    --cloud: #3f3a5c;
    --far: #3a3552; --mid: #2c2943; --near: #221f36; --ground: #1a1830;
    --town: #2a2640; --town-roof: #1c1a30; --win: #ffd98a; --win-op: 1;
  }
}
:root[data-theme="dark"] {
  --sky-top: #14182e; --sky-bot: #3a2f50;
  --sun: #efe5c6; --sun-x: 70vw; --sun-y: 22vh; --stars: 1;
  --cloud: #3f3a5c;
  --far: #3a3552; --mid: #2c2943; --near: #221f36; --ground: #1a1830;
  --town: #2a2640; --town-roof: #1c1a30; --win: #ffd98a; --win-op: 1;
}

body.has-scene { background-color: var(--sky-bot); }

.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.sky { position: absolute; inset: 0; background: linear-gradient(var(--sky-top), var(--sky-bot) 80%); }
.stars { position: absolute; inset: 0 0 38% 0; opacity: var(--stars);
  background-image: radial-gradient(1.5px 1.5px at 23px 31px, #fff, transparent 60%), radial-gradient(1px 1px at 87px 74px, #fff, transparent 60%), radial-gradient(1.8px 1.8px at 141px 18px, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 61px 112px, #fff, transparent 60%);
  background-size: 170px 150px, 130px 150px, 210px 120px, 97px 140px; }
/* the sun: a disc with two flat concentric bands (hard-edged, no blur) */
.sun { position: absolute; left: 0; top: 0; width: clamp(90px, 10vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--sun);
  /* placed with a transform, not left/top: the sun moves on every repaint and a moving left/top counts as layout shift */
  transform: translate(calc(var(--sun-x) - 50%), calc(var(--sun-y) - 50%));
  box-shadow: 0 0 0 clamp(10px, 1.2vw, 18px) color-mix(in srgb, var(--sun) 38%, transparent), 0 0 0 clamp(26px, 3vw, 44px) color-mix(in srgb, var(--sun) 18%, transparent); }
.cloud { position: absolute; left: 0; width: clamp(170px, 20vw, 320px); height: auto; fill: var(--cloud); opacity: .96; animation: scene-drift 150s linear infinite; }
.cloud--1 { top: 13%; animation-delay: -30s; }
.cloud--2 { top: 27%; width: clamp(130px, 15vw, 240px); animation-duration: 190s; animation-delay: -120s; opacity: .85; }
.cloud--3 { top: 7%; width: clamp(110px, 12vw, 200px); animation-duration: 230s; animation-delay: -70s; opacity: .8; }
@keyframes scene-drift { from { transform: translateX(-30vw); } to { transform: translateX(115vw); } }
.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 48vh; }
.hills--near { height: 34vh; }
.h-far { fill: var(--far); } .h-mid { fill: var(--mid); } .h-near { fill: var(--near); }
.town { position: absolute; left: 0; bottom: 15vh; width: 100%; height: 13vh; }
.t-tree { fill: color-mix(in srgb, var(--near) 82%, #0e1a0e); }
.t-body { fill: var(--town); } .t-roof { fill: var(--town-roof); } .t-win { fill: var(--win); opacity: var(--win-op); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 7vh; background: var(--ground); }

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none !important; left: 8%; }
  .cloud--2 { left: 58%; }
  .cloud--3 { left: 34%; }
}
@media print { .scene { display: none; } body.has-scene { background: #fff; } }