/* ==========================================================================
   snow.css — ZSNES-style pixel snowfall behind the content panel.
   Pure CSS. Three parallax layers of tiled flakes; each layer falls by
   exactly one tile per loop (so it never "jumps") and sways side to side
   on a separate `translate` animation so the two motions combine.

   Markup (static, already in every page):
     <div class="snowfield" aria-hidden="true">
       <div class="snow snow-far"></div>
       <div class="snow snow-mid"></div>
       <div class="snow snow-near"></div>
     </div>

   Tuning: change --fall / --sway / --drift per layer below, or the flake
   colours in theme.css (--flake-far / --flake-mid / --flake-near).
   To add flakes, add another radial-gradient to a layer's list.
   ========================================================================== */

.snowfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 125%, var(--horizon-glow), transparent 60%),
    var(--void);
}

.snow {
  position: absolute;
  /* Oversize by one tile so the layer can slide down a full tile. */
  top: calc(var(--tile) * -1);
  left: calc(var(--tile) * -1);
  width: calc(100% + var(--tile) * 2);
  height: calc(100% + var(--tile));
  background-size: var(--tile) var(--tile);
  background-repeat: repeat;
  will-change: transform;
  animation:
    snow-fall var(--fall) linear infinite,
    snow-sway var(--sway) ease-in-out infinite alternate;
}

.snow-far  { --fall: 38s; --sway: 7s;   --drift: 10px; opacity: .55; }
.snow-mid  { --fall: 22s; --sway: 5s;   --drift: 16px; opacity: .8; }
.snow-near { --fall: 13s; --sway: 3.5s; --drift: 24px; }

@keyframes snow-fall {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, var(--tile), 0); }
}
@keyframes snow-sway {
  from { translate: calc(var(--drift) * -1) 0; }
  to   { translate: var(--drift) 0; }
}

/* Faint horizontal streaks, like a CRT capture of the emulator menu. */
.snowfield::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(0, 0, 0, .35) 3px 4px
  );
}

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

/* ---- generated flake positions (one radial-gradient = one flake) ---- */

/* far: 180px tile, 16 flakes */
.snow-far {
  --tile: 180px;
  background-image:
    radial-gradient(circle at 86px 42px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 105px 170px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 16px 22px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 141px 28px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 97px 153px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 18px 133px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 58px 13px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 26px 115px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 111px 21px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 65px 27px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 145px 112px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 19px 148px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 35px 61px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 165px 164px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 153px 19px, var(--flake-far) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 151px 153px, var(--flake-far) 0 0.9px, transparent 1.5px);
}

/* mid: 260px tile, 10 flakes */
.snow-mid {
  --tile: 260px;
  background-image:
    radial-gradient(circle at 105px 16px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 253px 60px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 15px 146px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 223px 38px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 78px 111px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 40px 142px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 34px 150px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 82px 147px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 212px 178px, var(--flake-mid) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 50px 30px, var(--flake-mid) 0 1.3px, transparent 1.9px);
}

/* near: 340px tile, 6 flakes */
.snow-near {
  --tile: 340px;
  background-image:
    radial-gradient(circle at 301px 296px, var(--flake-near) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 331px 100px, var(--flake-near) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 194px 53px, var(--flake-near) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 284px 36px, var(--flake-near) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 292px 34px, var(--flake-near) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 320px 109px, var(--flake-near) 0 1.8px, transparent 2.4px);
}