.cloudscape {
  position: fixed;
  /* Extend 200 px past every visual-viewport edge so the sky layer covers the
     browser's address / search bar no matter whether it is visible, hidden, or
     mid-animation.  position:fixed is anchored to the visual viewport, which
     shrinks when mobile chrome shows – the overhang fills that gap. */
  top: -200px;
  left: -20px;
  right: -20px;
  bottom: -200px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.cloudscape__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      185deg,
      var(--sky-top) 0%,
      var(--sky-mid) 42%,
      var(--sky-horizon) 100%
    ),
    radial-gradient(
      ellipse 120% 80% at 50% -10%,
      rgba(255, 255, 255, 0.9),
      transparent 55%
    ),
    radial-gradient(
      ellipse 90% 50% at 80% 20%,
      rgba(200, 220, 245, 0.35),
      transparent 50%
    );

}

.cloudscape__sun {
  position: absolute;
  top: -8%;
  right: 8%;
  width: min(45vw, 420px);
  height: min(45vw, 420px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 248, 0.4) 35%,
    transparent 70%
  );
  filter: blur(2px);
  opacity: 0.75;
  transform: translate(
    calc((var(--mx) - 0.5) * 24px),
    calc((var(--my) - 0.5) * 16px)
  );
  will-change: transform;
}

.cloud-layer {
  position: absolute;
  inset: -15% -10%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 50%;
  background-position-y: 30%;
  opacity: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.cloud-layer--far {
  background-image: url("https://images.unsplash.com/photo-1501594907352-04cda38ebc29?auto=format&fit=crop&w=2400&q=70");
  mix-blend-mode: normal;
  filter: blur(40px) saturate(0.88) brightness(1.12);
  opacity: var(--cloud-opacity-far);
  transform: translate3d(calc((var(--mx) - 0.5) * -18px), calc(var(--p-far, 0px) + (var(--my) - 0.5) * -10px), 0) scale(1.05);
  animation: cloud-drift-far 80s ease-in-out infinite alternate;
}

.cloud-layer--mid {
  background-image: url("https://images.unsplash.com/photo-1517483000871-1dbf64a6e1c6?auto=format&fit=crop&w=2200&q=70");
  mix-blend-mode: normal;
  filter: blur(28px) saturate(0.9) brightness(1.1);
  opacity: var(--cloud-opacity-mid);
  transform: translate3d(calc((var(--mx) - 0.5) * -28px), calc(var(--p-mid, 0px) + (var(--my) - 0.5) * -14px), 0) scale(1.08);
  animation: cloud-drift-mid 55s ease-in-out infinite alternate;
}

.cloud-layer--near {
  background-image: url("https://images.unsplash.com/photo-1534081163281-ca9d0bf10c51?auto=format&fit=crop&w=2200&q=65");
  mix-blend-mode: normal;
  filter: blur(18px) saturate(0.92) brightness(1.06);
  opacity: var(--cloud-opacity-near);
  transform: translate3d(calc((var(--mx) - 0.5) * -40px), calc(var(--p-near, 0px) + (var(--my) - 0.5) * -20px), 0) scale(1.1);
  animation: cloud-drift-near 40s ease-in-out infinite alternate;
}

.cloudscape__mist {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 30%,
    transparent 70%,
    rgba(232, 240, 250, calc(var(--haze-opacity) * 0.5)) 100%
  );

}

.cloudscape__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 75% at 50% 45%,
    transparent 40%,
    rgba(220, 232, 244, 0.25) 100%
  );
}

.cloudscape__canvas {
  position: absolute;
  inset: 0;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .cloud-layer--far,
  .cloud-layer--mid,
  .cloud-layer--near {
    animation: none;
  }

  .cloudscape__sun {
    transform: none;
  }
}

/* Drift animations use CSS translate instead of background-position
   to guarantee GPU acceleration and avoid scroll stutter. */
@keyframes cloud-drift-far {
  0%   { translate: -2% 0; }
  100% { translate: 2% 0; }
}

@keyframes cloud-drift-mid {
  0%   { translate: -3% 0; }
  100% { translate: 3% 0; }
}

@keyframes cloud-drift-near {
  0%   { translate: -4% 0; }
  100% { translate: 4% 0; }
}

@media (max-width: 768px) {
  .cloud-layer {
    animation: none !important;
  }
  .cloud-layer--far {
    filter: blur(32px) saturate(0.85) brightness(1.12);
  }

  .cloud-layer--mid {
    opacity: calc(var(--cloud-opacity-mid) * 0.85);
  }

  .cloud-layer--near {
    opacity: calc(var(--cloud-opacity-near) * 0.75);
  }
}