/* Christmas background: a snowy night behind the set, shown only while the Christmas
   season runs. js/main.js puts `season-x` on <body> until SEASONS.x.until in js/catalog.js
   (first day gone: 6 January 2027), so this needs no clean-up date of its own.
   Everything here is scenery under the page: it never takes a click and never covers the
   set, the panels or the picture. The markup is the .xmas block at the top of <body>.
   (js/snowfall.js adds heavier snow on top of this while a Christmas channel is on air.) */

.xmas { display: none; }

body.season-x .xmas {
  display: block;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #070d22 0%, #0e1838 38%, #18264d 70%, #223462 100%);
}

/* the small grey lines of text sit on the scene now: lift them so they stay readable */
body.season-x .site-links,
body.season-x .hint { color: #b3bccf; }
body.season-x .site-links a:hover,
body.season-x .site-links a:focus-visible { color: #ffffff; }
body.season-x .credit { color: #a3adc2; }

/* ---------- sky ---------- */

.xmas-stars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  opacity: .85;
  background-size: 420px 280px;
  background-image:
    radial-gradient(circle at 30px 40px, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 150px 110px, #dfe8ff 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 260px 30px, #fff3d6 0 1px, transparent 1.6px),
    radial-gradient(circle at 340px 170px, #ffffff 0 .9px, transparent 1.5px),
    radial-gradient(circle at 90px 220px, #dfe8ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 390px 90px, #ffffff 0 1.1px, transparent 1.8px);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}

/* in the gap between the end of the garland and the SUPPORT button */
.xmas-moon {
  position: absolute;
  right: 204px;
  top: 24px;
  width: 54px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fffaea 0%, #f3e6bd 58%, #d8c690 100%);
  box-shadow: 0 0 70px 22px rgba(255, 236, 180, .22), 0 0 18px 4px rgba(255, 244, 210, .5);
}

/* ---------- hills, pines, cabin ----------
   The set fills most of the window, so the scenery lives in the strip under it: the drawing
   is kept about a fifth of the window high and repeats sideways (three copies, the middle
   one mirrored so the hills join up) to reach across wide screens. */

.xmas-hills {
  position: absolute;
  left: 0;
  bottom: 0;
  height: clamp(120px, 20vh, 230px);
  width: auto;
  aspect-ratio: 4320 / 300;
  display: block;
}
.xmas-smoke { animation: xmas-smoke 6s ease-in-out infinite alternate; }

/* ---------- falling snow: three tiled layers, each drifting down by exactly one tile ---------- */

.xmas-sway {
  position: absolute;
  inset: 0;
  animation: xmas-sway 9s ease-in-out infinite alternate;
}
.xmas-snow {
  position: absolute;
  left: -20px;
  right: -20px;
  top: 0;
  will-change: transform;
}
.xmas-snow.far {
  height: calc(100% + 240px);
  opacity: .85;
  background-size: 240px 240px;
  animation: xmas-fall-far 30s linear infinite;
  background-image:
    radial-gradient(circle at 20px 30px, rgba(255,255,255,.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 95px 10px, rgba(255,255,255,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 160px 70px, rgba(255,255,255,.85) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 210px 150px, rgba(255,255,255,.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60px 130px, rgba(255,255,255,.85) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 130px 200px, rgba(255,255,255,.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 30px 215px, rgba(255,255,255,.8) 0 1.2px, transparent 2px),
    radial-gradient(circle at 190px 225px, rgba(255,255,255,.8) 0 1.1px, transparent 1.9px);
}
.xmas-snow.mid {
  height: calc(100% + 360px);
  opacity: .85;
  background-size: 360px 360px;
  animation: xmas-fall-mid 18s linear infinite;
  background-image:
    radial-gradient(circle at 40px 50px, rgba(255,255,255,.95) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 180px 20px, rgba(255,255,255,.9) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 300px 90px, rgba(255,255,255,.95) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 110px 160px, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 250px 210px, rgba(255,255,255,.95) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 60px 280px, rgba(255,255,255,.9) 0 1.9px, transparent 2.9px),
    radial-gradient(circle at 200px 320px, rgba(255,255,255,.95) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 330px 300px, rgba(255,255,255,.85) 0 1.7px, transparent 2.7px);
}
.xmas-snow.near {
  height: calc(100% + 520px);
  opacity: .7;
  background-size: 520px 520px;
  animation: xmas-fall-near 11s linear infinite;
  background-image:
    radial-gradient(circle at 70px 60px, rgba(255,255,255,.95) 0 4px, transparent 6px),
    radial-gradient(circle at 300px 30px, rgba(255,255,255,.9) 0 3.4px, transparent 5.4px),
    radial-gradient(circle at 450px 140px, rgba(255,255,255,.95) 0 4.6px, transparent 6.6px),
    radial-gradient(circle at 180px 220px, rgba(255,255,255,.9) 0 3.8px, transparent 5.8px),
    radial-gradient(circle at 380px 330px, rgba(255,255,255,.95) 0 4.2px, transparent 6.2px),
    radial-gradient(circle at 60px 400px, rgba(255,255,255,.9) 0 3.5px, transparent 5.5px),
    radial-gradient(circle at 250px 470px, rgba(255,255,255,.95) 0 4.4px, transparent 6.4px),
    radial-gradient(circle at 490px 450px, rgba(255,255,255,.9) 0 3.2px, transparent 5.2px);
}

@keyframes xmas-fall-far { from { transform: translate3d(0, -240px, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes xmas-fall-mid { from { transform: translate3d(0, -360px, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes xmas-fall-near { from { transform: translate3d(0, -520px, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes xmas-sway { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes xmas-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@keyframes xmas-smoke { 0% { opacity: .15; transform: translateY(4px); } 50% { opacity: .5; } 100% { opacity: .15; transform: translateY(-4px); } }

/* keeps the set the brightest thing on the page */
.xmas-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 72% at 50% 46%, rgba(3, 6, 18, 0) 55%, rgba(3, 6, 18, .5) 100%);
}

/* ---------- garland with bows and fairy lights along the top ----------
   It stops 300px short of the right edge, where the SUPPORT button is. */

.xmas-garland {
  position: absolute;
  left: 0;
  top: 0;
  width: min(calc(100% - 300px), 1370px);   /* on very wide screens it stops growing rather than hang down behind the set */
  height: auto;
  display: block;
}
.xmas-garland .bulb { animation: xmas-twinkle 3.2s ease-in-out infinite; }
.xmas-garland .bulb.r { fill: #ff6257; filter: drop-shadow(0 0 5px rgba(255, 98, 87, .9)); }
.xmas-garland .bulb.y { fill: #ffc44d; filter: drop-shadow(0 0 5px rgba(255, 196, 77, .9)); }
.xmas-garland .bulb.g { fill: #6fe3a1; filter: drop-shadow(0 0 5px rgba(111, 227, 161, .85)); }
.xmas-garland .bulb.b { fill: #7cc4ff; filter: drop-shadow(0 0 5px rgba(124, 196, 255, .9)); }
.xmas-garland .bulb.w { fill: #ffe9b0; filter: drop-shadow(0 0 5px rgba(255, 233, 176, .9)); }

/* phones held upright and narrow windows: the top of the page holds the credit, the links
   and the SUPPORT button there, so the garland and moon step aside */
.has-remote .xmas-garland,
.has-remote .xmas-moon { display: none; }
/* and the biggest flakes thin out, so they don't sit bright behind the small text up there */
.has-remote .xmas-snow.near { opacity: .45; }
@media (max-width: 700px) {
  .xmas-garland, .xmas-moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xmas-snow, .xmas-sway, .xmas-smoke, .xmas-garland .bulb { animation: none; }
}