Hail Shower

<!-- Hail Shower (fast, bouncy pellets — add more for density) -->
<div class="nuda-wa2-hail" role="img" aria-label="Falling hail">
  <span class="nuda-wa2-hail__pellet" style="left:4%;  --h2-d:0s;  --h2-dur:.5s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:14%; --h2-d:.1s; --h2-dur:.6s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:24%; --h2-d:.2s; --h2-dur:.7s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:34%; --h2-d:.3s; --h2-dur:.5s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:44%; --h2-d:.4s; --h2-dur:.6s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:54%; --h2-d:.5s; --h2-dur:.7s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:64%; --h2-d:0s;  --h2-dur:.5s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:74%; --h2-d:.1s; --h2-dur:.6s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:84%; --h2-d:.2s; --h2-dur:.7s"></span>
  <span class="nuda-wa2-hail__pellet" style="left:94%; --h2-d:.3s; --h2-dur:.5s"></span>
  <!-- ...add 6-10 more for density -->
</div>

.nuda-wa2-hail {
  position: relative;
  width: 100%;
  max-width: 210px;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg,#12141a,#09090b);
}

.nuda-wa2-hail__pellet {
  position: absolute;
  top: -10px;
  width: 5px;
  height: 5px;
  background: linear-gradient(135deg,#fafafa,#cfd8dc);
  opacity: .9;
  will-change: transform,opacity;
  animation: _nuda-wa2hailFall var(--h2-dur,.6s) cubic-bezier(.55,0,1,.45) var(--h2-d,0s) infinite;
}

@keyframes _nuda-wa2hailFall {
  0% {
    transform: translate3d(0,-10px,0) rotate(45deg) scale(1);
    opacity: .9;
  }
  82% {
    transform: translate3d(-4px,118px,0) rotate(45deg) scale(1);
    opacity: .9;
  }
  90% {
    transform: translate3d(-4px,122px,0) rotate(45deg) scale(1.5,.5);
    opacity: .7;
  }
  100% {
    transform: translate3d(-4px,122px,0) rotate(45deg) scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-wa2-hail__pellet {
    animation: none;
    opacity: .3;
    transform: rotate(45deg);
  }
}