.scene .day-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.scene[data-time="day"] .day-overlay {
  opacity: 1;
}

.scene .day-overlay .sun {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8d6, #ffd75e 60%, #ffb703 100%);
  box-shadow: 0 0 60px 20px rgba(255, 210, 90, 0.55);
  animation: pulse-sun 6s ease-in-out infinite;
}

@keyframes pulse-sun {
  0%, 100% { box-shadow: 0 0 60px 20px rgba(255, 210, 90, 0.55); }
  50%      { box-shadow: 0 0 80px 30px rgba(255, 210, 90, 0.75); }
}

.scene .day-overlay .sun-rays {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 100px;
  height: 100px;
  animation: rotate-rays 40s linear infinite;
}

.scene .day-overlay .sun-rays::before,
.scene .day-overlay .sun-rays::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  background:
    repeating-conic-gradient(
      rgba(255, 220, 130, 0.35) 0deg 4deg,
      transparent 4deg 18deg
    );
  border-radius: 50%;
}

.scene .day-overlay .sun-rays::after {
  width: 220px;
  height: 220px;
  opacity: 0.4;
}

@keyframes rotate-rays {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.scene .day-overlay .cloud {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  opacity: 0.9;
  box-shadow: 0 10px 25px rgba(100, 130, 160, 0.15);
  animation: drift linear infinite;
}

.scene .day-overlay .cloud::before,
.scene .day-overlay .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

.scene .day-overlay .cloud-1 {
  top: 15%; left: -20%;
  width: 120px; height: 40px;
  animation-duration: 60s;
}
.scene .day-overlay .cloud-1::before {
  width: 60px; height: 60px;
  top: -30px; left: 15px;
}
.scene .day-overlay .cloud-1::after {
  width: 45px; height: 45px;
  top: -20px; left: 65px;
}

.scene .day-overlay .cloud-2 {
  top: 35%; left: -25%;
  width: 90px; height: 32px;
  animation-duration: 45s;
  animation-delay: -15s;
}
.scene .day-overlay .cloud-2::before {
  width: 45px; height: 45px;
  top: -22px; left: 10px;
}
.scene .day-overlay .cloud-2::after {
  width: 35px; height: 35px;
  top: -14px; left: 48px;
}

.scene .day-overlay .cloud-3 {
  top: 55%; left: -30%;
  width: 150px; height: 46px;
  animation-duration: 75s;
  animation-delay: -30s;
  opacity: 0.75;
}
.scene .day-overlay .cloud-3::before {
  width: 70px; height: 70px;
  top: -36px; left: 20px;
}
.scene .day-overlay .cloud-3::after {
  width: 55px; height: 55px;
  top: -24px; left: 80px;
}

.scene .day-overlay .cloud-4 {
  top: 8%; left: -20%;
  width: 70px; height: 24px;
  animation-duration: 50s;
  animation-delay: -5s;
  opacity: 0.65;
}
.scene .day-overlay .cloud-4::before {
  width: 34px; height: 34px;
  top: -16px; left: 8px;
}
.scene .day-overlay .cloud-4::after {
  width: 26px; height: 26px;
  top: -10px; left: 36px;
}

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(140vw); }
}

.scene .day-overlay .bird {
  position: absolute;
  width: 20px;
  height: 10px;
  animation: fly linear infinite;
}

.scene .day-overlay .bird::before,
.scene .day-overlay .bird::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(60, 70, 90, 0.55);
  border-radius: 50%;
  animation: flap 0.6s ease-in-out infinite alternate;
}

.scene .day-overlay .bird::before {
  left: 0;
  border-right: 2px solid rgba(60, 70, 90, 0.55);
  transform-origin: right center;
}

.scene .day-overlay .bird::after {
  right: 0;
  border-left: 2px solid rgba(60, 70, 90, 0.55);
  transform-origin: left center;
  animation-delay: 0.05s;
}

@keyframes flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.3); }
}

@keyframes fly {
  from { transform: translate(0, 0); }
  to   { transform: translate(-130vw, -6vh); }
}

.scene .day-overlay .bird-1 { top: 22%; left: 120%; animation-duration: 22s; }
.scene .day-overlay .bird-2 { top: 26%; left: 128%; animation-duration: 22s; animation-delay: -1.2s; }
.scene .day-overlay .bird-3 { top: 20%; left: 135%; animation-duration: 22s; animation-delay: -2.1s; }
.scene .day-overlay .bird-4 { top: 45%; left: 120%; animation-duration: 30s; animation-delay: -8s; transform: scale(0.7); }
.scene .day-overlay .bird-5 { top: 48%; left: 127%; animation-duration: 30s; animation-delay: -9.1s; transform: scale(0.7); }