/* ═══════════════════════════════════════════════════════════════════════
   SNOWFALL
   Add data-snow to any section; assets/js/snow.js fills it with a few
   drifting flakes. Decorative only: no pointer events, hidden from
   assistive tech, switched off for reduced motion.
   data-snow-tone="tint" gives sky-blue flakes for light backgrounds;
   data-snow-tone="sky" keeps white flakes but shadows them for a pale sky.
   ═══════════════════════════════════════════════════════════════════════ */

/* The section becomes its own stacking context and the snow sits at z -1:
   above the section's background, below all of its content. */
[data-snow] { isolation: isolate; }
section > .snow.snow {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  --flake: #fff; --glow: 0 0 6px rgba(255,255,255,.6);
}
section > .snow.snow--tint { --flake: #7FB6DC; --glow: none; }
/* White flakes on a pale sky: a soft navy shadow keeps them visible */
section > .snow.snow--sky { --glow: 0 0 3px rgba(12,35,65,.35), 0 0 8px rgba(255,255,255,.9); }
section > .snow--sky i.crystal::before { filter: drop-shadow(0 0 1.5px rgba(12,35,65,.45)); }

.snow i {
  position: absolute; top: -12px; left: var(--x);
  width: var(--s); height: var(--s); opacity: var(--o);
  animation: snow-fall var(--d) linear var(--delay) infinite;
  will-change: transform;
}
.snow i::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--flake); box-shadow: var(--glow);
  animation: snow-sway calc(var(--d) / 3) ease-in-out var(--delay) infinite alternate;
}
/* Every few flakes is a proper six-armed crystal rather than a dot */
.snow i.crystal::before {
  border-radius: 0; box-shadow: none;
  -webkit-mask: var(--crystal) center / contain no-repeat;
          mask: var(--crystal) center / contain no-repeat;
  animation-name: snow-sway-spin;
}
.snow {
  --crystal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7'/%3E%3Cpath d='m9.5 3.5 2.5 2 2.5-2M9.5 20.5l2.5-2 2.5 2M4 10.2l3-.5-1-3M20 13.8l-3 .5 1 3M4 13.8l3 .5-1 3M20 10.2l-3-.5 1-3'/%3E%3C/svg%3E");
}

@keyframes snow-fall {
  to { transform: translate3d(0, var(--fall, 720px), 0); }
}
@keyframes snow-sway {
  from { transform: translateX(calc(var(--drift) * -1)); }
  to   { transform: translateX(var(--drift)); }
}
@keyframes snow-sway-spin {
  from { transform: translateX(calc(var(--drift) * -1)) rotate(0deg); }
  to   { transform: translateX(var(--drift)) rotate(120deg); }
}

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