/* ==========================================================================
   CLOUDS.CSS
   Dark, layered monsoon clouds. Images are injected by weather.js into
   .monsoon-clouds; JS drives the horizontal drift + gentle bob so the
   movement can stay perfectly in sync with wind direction and rain.
   Three depth layers (far / mid / near) create a soft parallax feel.
   ========================================================================== */

.monsoon-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.cloud {
  position: absolute;
  width: 26%;
  max-width: 380px;
  min-width: 160px;
  will-change: transform, left;
  user-select: none;
  -webkit-user-drag: none;
  opacity: var(--cloud-opacity, 0.7);
}

.cloud-far {
  filter: brightness(0.85) blur(1.5px);
  opacity: 0.4;
  width: 30%;
}

.cloud-mid {
  filter: brightness(0.9) blur(0.6px);
  opacity: 0.58;
  width: 25%;
}

.cloud-near {
  filter: brightness(1) blur(0px);
  opacity: 0.72;
  width: 20%;
}

@media (max-width: 768px) {
  .cloud {
    width: 46%;
    min-width: 140px;
  }
  .cloud-far { width: 52%; }
  .cloud-mid { width: 44%; }
  .cloud-near { width: 36%; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud {
    animation: none !important;
  }
}