/* The light of the hour over a backdrop painting (assets.js -> daylight). A .tod-scene holds the painting (an <img>,
   directly or in a <picture>) and, after it, the layers of assets.js daylight.html; --tod-b, --tod-sat and one --tod-<layer>
   per layer come from daylight.at() for a clock time. Each clock step fades over --tod-fade, so morning, noon, dusk and
   night never switch at once. Used by the game's #backdrop (board.js) and the design overview's light rows. */
.tod-scene { --tod-fade: 4s; }
.tod-scene.tod-now, .tod-scene.tod-now * { transition: none !important; }
.tod-scene > img, .tod-scene > picture img { filter: brightness(var(--tod-b, 1)) saturate(var(--tod-sat, 1)); transition: filter var(--tod-fade) linear; }
.tod, .tod i { position: absolute; inset: 0; pointer-events: none; }
.tod i { transition: opacity var(--tod-fade) linear; }
/* day: a pale light from the top */
.tod-sky { opacity: var(--tod-sky, 0); mix-blend-mode: screen; background: linear-gradient(rgba(206, 222, 236, .34), rgba(206, 222, 236, .12) 45%, transparent 75%); }
/* dawn from the left, dusk from the right: a low warm light raking across, the far side left dark, a warm horizon band */
.tod-dawn { opacity: var(--tod-dawn, 0); mix-blend-mode: soft-light; background: linear-gradient(100deg, rgba(255, 160, 72, .95), rgba(255, 136, 60, .45) 40%, rgba(40, 24, 50, .7)),
  linear-gradient(transparent 22%, rgba(255, 150, 80, .45) 46%, transparent 68%); }
.tod-dusk { opacity: var(--tod-dusk, 0); mix-blend-mode: soft-light; background: linear-gradient(260deg, rgba(255, 150, 64, .95), rgba(255, 120, 56, .45) 40%, rgba(40, 24, 50, .7)),
  linear-gradient(transparent 22%, rgba(255, 140, 70, .45) 46%, transparent 68%); }
/* night: the blue dark, and the painting's own fires and windows glowing through it (daylight.glow() places them) */
.tod-night { opacity: var(--tod-night, 0); mix-blend-mode: multiply; background: rgb(60, 76, 120); }
.tod-glow { opacity: var(--tod-glow, 0); mix-blend-mode: screen; }