Thunderstorm Card

<!-- Thunderstorm Card (rain + a single gentle flash per ~7s cycle) -->
<div class="nuda-wa2-thunderstorm" role="img" aria-label="Thunderstorm with occasional lightning">
  <span class="nuda-wa2-thunderstorm__cloud"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:4%;  --t2-d:0s;   --t2-dur:.8s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:15%; --t2-d:.14s; --t2-dur:.95s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:26%; --t2-d:.28s; --t2-dur:1.1s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:37%; --t2-d:.42s; --t2-dur:.8s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:48%; --t2-d:.56s; --t2-dur:.95s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:59%; --t2-d:0s;   --t2-dur:1.1s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:70%; --t2-d:.14s; --t2-dur:.8s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:81%; --t2-d:.28s; --t2-dur:.95s"></span>
  <span class="nuda-wa2-thunderstorm__drop" style="left:92%; --t2-d:.42s; --t2-dur:1.1s"></span>
  <span class="nuda-wa2-thunderstorm__flash"></span>
  <span class="nuda-wa2-thunderstorm__bolt"></span>
</div>

.nuda-wa2-thunderstorm {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,#0c0c12,#09090b);
}

.nuda-wa2-thunderstorm__cloud {
  position: absolute;
  top: -18px;
  left: 10%;
  width: 80%;
  height: 46px;
  border-radius: 50%;
  background: #1c1c24;
  box-shadow: 40px 6px 0 -6px #1c1c24,80px -4px 0 -10px #17171d,-20px 10px 0 -8px #17171d;
  opacity: .9;
}

.nuda-wa2-thunderstorm__drop {
  position: absolute;
  top: 26px;
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg,transparent,rgba(228,255,84,.6));
  opacity: .6;
  will-change: transform;
  animation: _nuda-wa2thunderstormRain var(--t2-dur,.9s) linear var(--t2-d,0s) infinite;
}

.nuda-wa2-thunderstorm__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 60% at 50% 30%,rgba(250,250,250,.7),rgba(228,255,84,.25) 45%,transparent 70%);
  opacity: 0;
  will-change: opacity;
  animation: _nuda-wa2thunderstormFlash 7s steps(1,end) infinite;
}

.nuda-wa2-thunderstorm__bolt {
  position: absolute;
  top: 20%;
  left: 48%;
  width: 4px;
  height: 60px;
  background: linear-gradient(180deg,#fafafa,#e4ff54);
  clip-path: polygon(50% 0,100% 40%,55% 45%,95% 100%,0 55%,45% 50%);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(228,255,84,.9));
  will-change: opacity;
  animation: _nuda-wa2thunderstormBolt 7s steps(1,end) infinite;
}

@keyframes _nuda-wa2thunderstormRain {
  0% {
    transform: translate3d(0,-10px,0);
    opacity: 0;
  }
  10% {
    opacity: .6;
  }
  100% {
    transform: translate3d(-8px,120px,0);
    opacity: 0;
  }
}

@keyframes _nuda-wa2thunderstormFlash {
  0%,6%,100% {
    opacity: 0;
  }
  1% {
    opacity: .85;
  }
  2% {
    opacity: .15;
  }
  3% {
    opacity: .6;
  }
  4% {
    opacity: 0;
  }
}

@keyframes _nuda-wa2thunderstormBolt {
  0%,6%,100% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  2% {
    opacity: .2;
  }
  3% {
    opacity: .8;
  }
  4% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-wa2-thunderstorm__drop {
    animation: none;
    opacity: .25;
    transform: none;
  }
  .nuda-wa2-thunderstorm__flash,.nuda-wa2-thunderstorm__bolt {
    animation: none;
    opacity: 0;
  }
}