/* Мягкие «облачные» переходы между крупными секциями (осветление, дымка) */

.section-cloud {
  --cloud-h: clamp(64px, 11vw, 108px);
  position: relative;
  z-index: 4;
  height: var(--cloud-h);
  margin-top: calc(-0.5 * var(--cloud-h));
  margin-bottom: calc(-0.5 * var(--cloud-h));
  pointer-events: none;
  isolation: isolate;
}

.section-cloud::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 50%;
  height: 135%;
  transform: translateY(-50%);
  background: radial-gradient(
      ellipse 95% 72% at 12% 52%,
      rgba(255, 255, 255, 0.98) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 88% 62% at 38% 44%,
      rgba(255, 255, 255, 0.94) 0%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 82% 58% at 62% 52%,
      rgba(236, 248, 255, 0.96) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 78% 54% at 86% 46%,
      rgba(255, 255, 255, 0.92) 0%,
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.82) 48%,
      rgba(255, 255, 255, 0) 100%
    );
  filter: drop-shadow(0 6px 28px rgba(180, 220, 245, 0.45));
}

/* После тёмного hero — чуть сильнее «засветление» */
.section-cloud--from-hero::before {
  background: radial-gradient(
      ellipse 100% 75% at 15% 55%,
      rgba(255, 255, 255, 1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 90% 65% at 45% 42%,
      rgba(255, 255, 255, 0.96) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 85% 60% at 72% 50%,
      rgba(230, 246, 255, 0.98) 0%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 75% 52% at 90% 44%,
      rgba(255, 255, 255, 0.94) 0%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.92) 46%,
      rgba(255, 255, 255, 0) 100%
    );
  filter: drop-shadow(0 8px 36px rgba(200, 230, 255, 0.55));
}