/*
SCHEMA: snow-css
ONE-LINE: Page-wide snowfall layer styles plus the soft bottom snow-pile gradient, opted into per page via the .snow-layer and .snow-pile markup.

Defines the fixed .snow-layer (full-viewport flake container, opacity-toggled via .on), the snowFall keyframes (translate3d with per-flake --drift CSS variable), and the .snow-pile (bottom gradient with radial mask + blurred halo). Originally inline on /index.html and extracted so sub-pages can opt into the same effect with a single <link>. Pairs with /snow.js, which generates the flake DOM elements and toggles the .on class. Markup contract on each page that wants snow: `<div class="snow-layer" id="snow-layer"></div>` plus `<div class="snow-pile" id="snow-pile"></div>`. Touch when adjusting flake appearance, opacity timing, or the snow-pile mask.
*/

/* =====================================================================
 * snow.css — Page-wide snowfall layer + bottom snow accumulation
 *
 * Originally inline on index.html (cinematic homepage). Extracted so
 * sub-pages can opt into the same effect with a single <link>.
 *
 * Pair with snow.js (generates the flake elements + decides when to
 * activate). HTML for each page that wants snow:
 *   <div class="snow-layer" id="snow-layer"></div>
 *   <div class="snow-pile"  id="snow-pile"></div>
 *   <link rel="stylesheet" href="/snow.css">
 *   <script src="/snow.js" defer></script>
 * ===================================================================== */

/* Page-wide snowfall layer — fixed so it stays visible while scrolling */
.snow-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.snow-layer.on { opacity: 1; }
.snow-layer .flake {
  position: absolute;
  top: -10px;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  animation: snowFall linear infinite;
  will-change: transform;
}
@keyframes snowFall {
  0%   { transform: translate3d(0, -10vh, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(var(--drift, 20px), 110vh, 0); opacity: 0; }
}

/* Snow accumulation along bottom edge — subtle drift, sits below footer text */
.snow-pile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease 0.5s;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.10) 70%,
    rgba(255, 255, 255, 0.16) 100%
  );
  mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, black 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, black 50%, transparent 90%);
}
.snow-pile.on { opacity: 1; }
.snow-pile::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.12) 100%);
  filter: blur(6px);
}