/* The Christmas night: a snowy winter scene, the Christmas 2026 collection's seasonal theme (markup:
   includes/snow.php). A .snow-scope section (and the collection page's header and main, under
   .theme-christmas) switches to winter tokens, so shared components follow; lime buttons keep their
   dark text. Inside it: a cold sky with warm light low on the horizon, snow falling on the designs'
   side only (--snow-inset keeps it away from the words), soft snowbanks along the bottom, and snow
   resting on chosen letters of the headline. Every animation stops under reduced motion. */

/* ---------- winter tokens ---------- */
.snow-scope,
.theme-christmas .site-header,
.theme-christmas main {
  --winter-0: #050A12; --winter-1: #08111C; --winter-2: #0E1827; --winter-3: #162235; --ember: #F2A93B; --frost: #CFE4F3;
  --ink: #F3F2ED; --ink-2: #C2C9D3; --ink-3: #95A0AE;
  --bone: #08111C; --bone-2: #162235; --paper: #0E1827;
  --line: rgba(207, 228, 243, .14); --line-2: rgba(207, 228, 243, .09);
  --lime-deep: var(--lime);
  --focus: 0 0 0 2px #08111C, 0 0 0 4px var(--lime);
  color: var(--ink);
}
.snow-scope .btn-lime, .theme-christmas .btn-lime { color: #141519; }
.snow-scope .btn-ghost:hover, .theme-christmas .btn-ghost:hover { border-color: rgba(207, 228, 243, .3); }
.snow-scope .textlink:hover, .theme-christmas .textlink:hover { color: #141519; }
.snow-scope .eyebrow::before, .theme-christmas .eyebrow::before { box-shadow: 0 0 12px var(--lime-glow); }
/* as on the Halloween night, the highlight is the words themselves, glowing lime */
.snow-scope .hl, .theme-christmas main .hl { background: none; padding: 0; color: var(--lime); text-shadow: 0 0 30px rgba(200, 240, 60, .2); }

/* ---------- the sky: cold moonlight up high, warm windows low on the horizon ---------- */
.winter {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(46% 52% at 82% 16%, rgba(207, 228, 243, .10), transparent 70%),
    radial-gradient(58% 42% at 76% 96%, rgba(242, 169, 59, .12), transparent 70%),
    radial-gradient(70% 48% at 8% 92%, rgba(62, 120, 170, .14), transparent 70%);
}

/* ---------- snow: three layers of flakes drifting down, on the designs' side only ---------- */
.snowfall {
  position: absolute; inset: var(--snow-inset, 0 0 0 50%);
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
  mask-image: linear-gradient(90deg, transparent, #000 18%);
  will-change: background-position;
}
.snowfall-1 {
  background-size: 220px 220px; opacity: .85; animation: snow-1 16s linear infinite;
  background-image:
    radial-gradient(2.2px 2.2px at 22px 34px, #fff 50%, transparent 56%), radial-gradient(1.6px 1.6px at 92px 118px, #fff 50%, transparent 56%),
    radial-gradient(2.6px 2.6px at 160px 62px, #fff 50%, transparent 56%), radial-gradient(1.4px 1.4px at 58px 188px, #fff 50%, transparent 56%),
    radial-gradient(2px 2px at 198px 168px, #fff 50%, transparent 56%), radial-gradient(1.3px 1.3px at 132px 12px, #fff 50%, transparent 56%);
}
.snowfall-2 {
  background-size: 160px 160px; opacity: .55; animation: snow-2 24s linear infinite;
  background-image:
    radial-gradient(1.2px 1.2px at 14px 22px, #fff 50%, transparent 56%), radial-gradient(1px 1px at 70px 94px, #fff 50%, transparent 56%),
    radial-gradient(1.4px 1.4px at 122px 40px, #fff 50%, transparent 56%), radial-gradient(1px 1px at 40px 140px, #fff 50%, transparent 56%),
    radial-gradient(1.2px 1.2px at 146px 120px, #fff 50%, transparent 56%);
}
.snowfall-3 {
  background-size: 340px 340px; opacity: .7; animation: snow-3 11s linear infinite;
  background-image:
    radial-gradient(3.4px 3.4px at 60px 80px, rgba(255, 255, 255, .9) 45%, transparent 60%), radial-gradient(3px 3px at 250px 210px, rgba(255, 255, 255, .85) 45%, transparent 60%),
    radial-gradient(3.8px 3.8px at 170px 300px, rgba(255, 255, 255, .8) 45%, transparent 60%);
}
@keyframes snow-1 { from { background-position: 0 0; } to { background-position: 44px 220px; } }
@keyframes snow-2 { from { background-position: 0 0; } to { background-position: -32px 160px; } }
@keyframes snow-3 { from { background-position: 0 0; } to { background-position: 60px 340px; } }

/* ---------- snowbanks along the bottom, frosty and quiet ---------- */
.drifts { position: absolute; inset: auto 0 0; z-index: 0; height: clamp(54px, 7vw, 104px); pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.drifts svg { display: block; width: 100%; height: 100%; }
.drift-back { fill: rgba(207, 228, 243, .06); }
.drift-front { fill: rgba(207, 228, 243, .11); }

/* ---------- snow resting on letters: a soft mound on top of the stroke. Each cap sits over its
   letter's stem: --x is the stem's middle from the letter's left edge, --w the mound's width,
   --top how far down the letter's top is (lower for a "t"). Leave about .14em above the line. ---------- */
.cap { position: relative; }
.cap::before {
  content: ""; position: absolute; left: var(--x, 50%); top: var(--top, .08em); width: var(--w, .36em); height: .17em;
  margin-left: calc(var(--w, .36em) / -2); transform: translateY(-78%);
  border-radius: 50% 50% 38% 38% / 100% 100% 28% 28%;
  background: linear-gradient(#FFFFFF 40%, #D8E6F2);
  box-shadow: 0 .03em .05em rgba(0, 0, 0, .35);
}
.cap-1 { --x: .17em; --w: .38em; }
.cap-2 { --x: .19em; --w: .3em; --top: .25em; }
.cap-3 { --x: .17em; --w: .34em; }

@media (prefers-reduced-motion: reduce) {
  .snowfall { animation: none; }
}