/* ==========================================================================
   LIGHTNING.CSS
   A soft, diffuse flash (never a harsh strobe) plus an optional glowing
   bolt silhouette. Triggered by weather.js roughly every 15-30 seconds.
   ========================================================================== */

.lightning-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at 50% 15%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(202, 220, 255, 0.45) 35%,
    rgba(202, 220, 255, 0) 72%
  );
}

.lightning-flash.active {
  animation: monsoonStrike 0.6s ease-out;
}

.lightning-flash.active.double {
  animation: monsoonStrikeDouble 0.9s ease-out;
}

@keyframes monsoonStrike {
  0%   { opacity: 0; }
  8%   { opacity: 0.85; }
  18%  { opacity: 0.12; }
  30%  { opacity: 0.6; }
  48%  { opacity: 0.04; }
  100% { opacity: 0; }
}

@keyframes monsoonStrikeDouble {
  0%   { opacity: 0; }
  6%   { opacity: 0.8; }
  14%  { opacity: 0.1; }
  22%  { opacity: 0.55; }
  36%  { opacity: 0.04; }
  55%  { opacity: 0.7; }
  66%  { opacity: 0.08; }
  100% { opacity: 0; }
}

.lightning-bolt {
  position: absolute;
  top: -4%;
  width: 64px;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.85));
  transform-origin: top center;
}

.lightning-bolt.active {
  animation: monsoonBoltFlicker 0.6s ease-out;
}

.lightning-bolt.active.double {
  animation: monsoonBoltDouble 0.9s ease-out;
}

@keyframes monsoonBoltFlicker {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 0.15; }
  32%  { opacity: 0.85; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes monsoonBoltDouble {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  16%  { opacity: 0.1; }
  26%  { opacity: 0.8; }
  40%  { opacity: 0; }
  58%  { opacity: 0.9; }
  68%  { opacity: 0.1; }
  100% { opacity: 0; }
}

@media (max-width: 768px) {
  .lightning-bolt { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightning-flash.active,
  .lightning-bolt.active {
    animation: none;
    opacity: 0;
  }
}