/* ==========================================================================
   MIST.CSS
   Soft, low-lying fog hugging the bottom edge of the banner for depth and
   a "premium real estate" atmosphere. Pure CSS - no JS animation cost.
   A brief brightness pulse ("mist-glow") is toggled by weather.js the
   instant lightning strikes, so the fog appears to catch the light.
   ========================================================================== */

.monsoon-mist {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 34%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(225, 232, 238, 0.55) 0%,
    rgba(225, 232, 238, 0.22) 45%,
    rgba(225, 232, 238, 0) 100%
  );
  filter: blur(7px);
  opacity: var(--mist-opacity, 0.55);
  animation: mistDriftA 20s ease-in-out infinite alternate;
  transition: opacity 0.35s ease;
}

.monsoon-mist::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 65%
  );
  animation: mistDriftB 26s ease-in-out infinite alternate;
}

.monsoon-mist.mist-glow {
  opacity: calc(var(--mist-opacity, 0.55) + 0.3);
}

@keyframes mistDriftA {
  0%   { transform: translateX(-4%); }
  100% { transform: translateX(4%); }
}

@keyframes mistDriftB {
  0%   { transform: translateX(3%); }
  100% { transform: translateX(-3%); }
}

@media (max-width: 768px) {
  .monsoon-mist { height: 26%; }
}

@media (prefers-reduced-motion: reduce) {
  .monsoon-mist,
  .monsoon-mist::before {
    animation: none;
  }
}