Snowfall

<!-- Snowfall (generate flakes from JS or template loop) -->
<div class="nuda-snow" role="img" aria-label="Snow falling">
  <span class="nuda-snow__flake" style="left:5%;  --d:0s;   --dur:4s; --s:3px"></span>
  <span class="nuda-snow__flake" style="left:18%; --d:.4s;  --dur:5s; --s:4px"></span>
  <span class="nuda-snow__flake" style="left:32%; --d:.8s;  --dur:3s; --s:2px"></span>
  <span class="nuda-snow__flake" style="left:46%; --d:1.2s; --dur:6s; --s:3px"></span>
  <span class="nuda-snow__flake" style="left:60%; --d:1.6s; --dur:4s; --s:4px"></span>
  <span class="nuda-snow__flake" style="left:74%; --d:2s;   --dur:5s; --s:2px"></span>
  <span class="nuda-snow__flake" style="left:88%; --d:2.4s; --dur:3s; --s:3px"></span>
  <!-- ...add 5–15 more for density -->
</div>

/* Snowfall
   Flakes falling vertically with horizontal sway.
   Customize: --snow-color, container height, individual --d/--dur/--s. */

.nuda-snow {
  --snow-color: #fff;
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  background: linear-gradient(180deg, rgba(228, 255, 84, 0.04), transparent);
  overflow: hidden;
  border-radius: 8px;
}

.nuda-snow__flake {
  position: absolute;
  top: -10px;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: var(--snow-color);
  opacity: 0.6;
  animation:
    nuda-snow-fall var(--dur, 4s) linear var(--d, 0s) infinite,
    nuda-snow-sway var(--dur, 4s) ease-in-out var(--d, 0s) infinite;
}

@keyframes nuda-snow-fall {
  0%   { transform: translateY(-10px); }
  100% { transform: translateY(calc(100% + 10px)); }
}

@keyframes nuda-snow-sway {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-snow__flake { animation: none; opacity: 0; }
}