/* ═══════════════════════════════════════════════════════════════════════
   SNOWFALL
   Add data-snow to any dark 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.
   ═══════════════════════════════════════════════════════════════════════ */

section > .snow.snow {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.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: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6);
  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; background: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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") center / contain no-repeat;
  animation-name: snow-sway-spin;
}

@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; }
}