Snow

<!-- Snow (each flake combines a fall + a sway track) -->
<div class="nuda-weather-snow" role="img" aria-label="Drifting snowflakes">
  <span class="nuda-weather-snow__flake" style="left:6%;  --ws-d:0s;   --ws-dur:5s; --ws-s:3px; --ws-x:-10px"></span>
  <span class="nuda-weather-snow__flake" style="left:18%; --ws-d:.6s;  --ws-dur:6s; --ws-s:4px; --ws-x:12px"></span>
  <span class="nuda-weather-snow__flake" style="left:30%; --ws-d:1.2s; --ws-dur:4s; --ws-s:2px; --ws-x:-8px"></span>
  <span class="nuda-weather-snow__flake" style="left:42%; --ws-d:1.8s; --ws-dur:7s; --ws-s:3px; --ws-x:14px"></span>
  <span class="nuda-weather-snow__flake" style="left:54%; --ws-d:2.4s; --ws-dur:5s; --ws-s:4px; --ws-x:-12px"></span>
  <span class="nuda-weather-snow__flake" style="left:66%; --ws-d:3s;   --ws-dur:6s; --ws-s:2px; --ws-x:10px"></span>
  <span class="nuda-weather-snow__flake" style="left:78%; --ws-d:.3s;  --ws-dur:4s; --ws-s:3px; --ws-x:-8px"></span>
  <span class="nuda-weather-snow__flake" style="left:90%; --ws-d:.9s;  --ws-dur:7s; --ws-s:4px; --ws-x:12px"></span>
  <!-- ...add 8–16 more for density -->
</div>

/* Snow
   Flakes fall vertically while gently swaying sideways.
   Customize: --snow-color, container size, individual --ws-d/--ws-dur/--ws-s/--ws-x. */

.nuda-weather-snow {
  --snow-color: #fafafa;
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% -10%, #1c1c26, #09090b 70%);
}

.nuda-weather-snow__flake {
  position: absolute;
  top: -12px;
  width: var(--ws-s, 3px);
  height: var(--ws-s, 3px);
  border-radius: 50%;
  background: var(--snow-color);
  opacity: 0.8;
  will-change: transform;
  animation:
    nuda-weather-snow-fall var(--ws-dur, 5s) linear var(--ws-d, 0s) infinite,
    nuda-weather-snow-sway var(--ws-dur, 5s) ease-in-out var(--ws-d, 0s) infinite alternate;
}

@keyframes nuda-weather-snow-fall {
  0%   { transform: translateY(-12px); }
  100% { transform: translateY(132px); }
}

@keyframes nuda-weather-snow-sway {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--ws-x, 10px)); }
}

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