Lightning

<!-- Lightning (gentle, occasional flash — calmed under reduced motion) -->
<div class="nuda-weather-lightning" role="img" aria-label="Occasional lightning flash over clouds">
  <span class="nuda-weather-lightning__sky"></span>
  <span class="nuda-weather-lightning__flash"></span>
  <span class="nuda-weather-lightning__bolt"></span>
</div>

/* Lightning
   A slow, gentle, occasional flash — the active flicker is only the first ~4%
   of a long 9s cycle, so it fires roughly once every 9s (well under 3/sec) and
   stays dark the rest of the time. Disabled entirely under reduced motion.
   Customize: --lightning-color, cycle duration (9s on both keyframes). */

.nuda-weather-lightning {
  --lightning-color: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #101019, #09090b);
}

.nuda-weather-lightning__sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(228, 255, 84, 0.06), transparent 70%);
}

.nuda-weather-lightning__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 55% at 50% 25%,
    rgba(228, 255, 84, 0.55),
    rgba(250, 250, 250, 0.18) 40%,
    transparent 70%
  );
  opacity: 0;
  will-change: opacity;
  animation: nuda-weather-flash 9s steps(1, end) infinite;
}

.nuda-weather-lightning__bolt {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 3px;
  height: 54px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fafafa, var(--lightning-color));
  clip-path: polygon(45% 0, 100% 38%, 58% 42%, 90% 100%, 0 52%, 42% 48%);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(228, 255, 84, 0.8));
  will-change: opacity;
  animation: nuda-weather-bolt 9s steps(1, end) infinite;
}

/* Only the first ~4% of the cycle lights up; the remaining ~96% is dark. */
@keyframes nuda-weather-flash {
  0%, 7%, 100% { opacity: 0; }
  1%  { opacity: 0.9; }
  2%  { opacity: 0.2; }
  3%  { opacity: 0.7; }
  4%  { opacity: 0; }
}

@keyframes nuda-weather-bolt {
  0%, 7%, 100% { opacity: 0; }
  1%   { opacity: 1; }
  2.4% { opacity: 0.3; }
  3.4% { opacity: 0.85; }
  4.2% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-weather-lightning__flash,
  .nuda-weather-lightning__bolt { animation: none; opacity: 0; }
}