/* ==========================================================================
   RAIN.CSS
   Base container for the whole weather effect + the rain canvas layer.
   The container is absolutely positioned to fill the parent banner
   (.video-hero) and never intercepts mouse/touch events, so your existing
   video, links and buttons keep working exactly as before.
   ========================================================================== */

.weather-effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* never blocks clicks on your banner content   */
  z-index: 1;              /* sits above the video, below your text/CTAs   */
  cursor: auto;             /* explicitly keep the default cursor          */

  /* Tunable design tokens - override on .weather-effects if you like */
  --rain-opacity: 0.9;
  --mist-opacity: 0.55;
  --cloud-opacity: 0.85;
  --atmosphere-opacity: 0.34; /* how much the banner dims into "storm light" */
}

/* Subtle darkening wash so a bright/light banner reads as an overcast
   monsoon sky, and so rain + lightning have something to contrast against.
   Sits behind the clouds/rain/mist, above your video. Needs no extra HTML -
   it's a pseudo-element on the wrapper you already added. */
.weather-effects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 38, 48, var(--atmosphere-opacity)) 0%,
    rgba(30, 38, 48, calc(var(--atmosphere-opacity) * 0.55)) 45%,
    rgba(30, 38, 48, calc(var(--atmosphere-opacity) * 0.25)) 100%
  );
  transition: background-color 0.4s ease;
}

.rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  opacity: var(--rain-opacity);
  /* No blend mode: rain is drawn with its own dark/light two-tone stroke
     in weather.js so it stays visible on both bright and dark banners. */
}

@media (max-width: 768px) {
  .rain-canvas {
    opacity: calc(var(--rain-opacity) - 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rain-canvas {
    display: none;
  }
}