/* weather.css — Weather effects (rain, lightning, fog) */

/* === WEATHER OVERLAY (fog, dark filter) === */
.weather-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--overlay-color);
  pointer-events: none;
  transition: background 2s ease;
  z-index: 5;
}

/* Fog effect */
.weather-overlay.fog {
  background: rgba(200, 210, 220, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Storm darkening */
.weather-overlay.storm {
  background: rgba(0, 0, 0, 0.35);
}

/* === RAIN === */
.rain-container {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70%; /* Rain falls in sky + ocean area */
  opacity: var(--rain-opacity, 0);
  pointer-events: none;
  z-index: 6;
  transition: opacity 1s ease;
  overflow: hidden;
}

/* Generate raindrops as pseudo-elements via JS-inserted spans */
.rain-drop {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(174, 194, 224, 0.7));
  border-radius: 0 0 2px 2px;
  animation: rain-fall linear infinite;
  image-rendering: pixelated;
}

@keyframes rain-fall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* === LIGHTNING === */
.lightning-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-lightning);
  transition: opacity 0.05s ease;
}

.lightning-flash.active {
  opacity: 0.7;
}

/* === SNOW === */
.snow-flake {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: snow-fall linear infinite;
  opacity: 0.8;
}

@keyframes snow-fall {
  0% { transform: translateY(-10px) rotate(0deg) translateX(0); }
  25% { transform: translateY(25vh) rotate(90deg) translateX(8px); }
  50% { transform: translateY(50vh) rotate(180deg) translateX(-5px); }
  75% { transform: translateY(75vh) rotate(270deg) translateX(10px); }
  100% { transform: translateY(100vh) rotate(360deg) translateX(-8px); }
}