/* Day sky background */
.day-sky-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 420px at 50% -180px, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.15) 62%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #eaf6ff 0%, #dff1ff 48%, #f4fbff 100%);
}

.day-sky-cloud {
  position: absolute;
  left: -30vw;
  top: var(--cloud-top, 20%);
  width: var(--cloud-width, 220px);
  height: var(--cloud-height, 82px);
  opacity: var(--cloud-opacity, 0.68);
  filter: blur(0);
  animation: day-cloud-drift var(--cloud-duration, 70s) linear infinite;
  animation-delay: var(--cloud-delay, 0s);
}

.day-sky-cloud .cloud-shape {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.9) 100%);
  box-shadow:
    0 2px 10px rgba(255, 255, 255, 0.7),
    0 10px 20px rgba(182, 210, 232, 0.3);
}

.day-sky-cloud .cloud-shape::before,
.day-sky-cloud .cloud-shape::after {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.92) 100%);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.62);
}

.day-sky-cloud .cloud-shape::before {
  width: 42%;
  height: 95%;
  left: 16%;
  top: -42%;
}

.day-sky-cloud .cloud-shape::after {
  width: 36%;
  height: 82%;
  right: 14%;
  top: -30%;
}

@keyframes day-cloud-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(160vw);
  }
}