/* Sky background */
.sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;  /* Ensure it is behind everything else */
  background: linear-gradient(to bottom, #87CEFA, #e0f7ff);
  transition: background 0.5s linear;
  overflow: hidden;
}

/* Sun-Moon orb */
.sun-moon {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 2%; /* from 20px to 2% */
  border-radius: 50%;
  background: radial-gradient(circle at center, #FFD700 30%, #FFA500 90%);
  box-shadow: 0 0 30px 10px #FFD700;
  /* Remove default animation to avoid conflicts */
  /* animation: sunMoonPulse 3s ease-in-out infinite; */
  transition: 
    left 0.4s linear,
    background 1s linear,
    box-shadow 1s linear;
  z-index: 3;
}

body.sun-active .sun-moon {
  animation: sunMoonPulse 3s ease-in-out infinite;
  background: radial-gradient(circle at center, #FFD700 30%, #FFA500 90%);
  box-shadow: 0 0 30px 10px #FFD700;
}

body.moon-92 .sun-moon {
  animation: moonPulse 4s ease-in-out infinite;
  background: radial-gradient(circle at center, #ccc 30%, #999 90%);
  box-shadow: 0 0 20px 8px rgba(200, 200, 255, 0.5);
}

/* Moon pulse animation */
@keyframes moonPulse {
  0% {
    box-shadow: 0 0 20px 8px rgba(200, 200, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px 16px rgba(200, 200, 255, 0.7);
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 20px 8px rgba(200, 200, 255, 0.3);
    transform: scale(1);
  }
}

/* Stars container with twinkle animation */
#stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: fixed;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px white;
  animation: star-twinkle 4s ease-in-out infinite;
  opacity: 0.05;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.7; }
}

/* Cloud base styling */
.cloud {
  position: absolute;
  background: radial-gradient(ellipse at center, #fff 60%, rgba(255,255,255,0) 90%);
  border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  box-shadow:
    inset 0 10px 15px rgba(255, 255, 255, 0.9),
    0 5px 15px rgba(255, 255, 255, 0.8);
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  will-change: transform, left;
  filter: blur(1.2px);
}

/* Cloud puff shapes with varied size and shading */
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: radial-gradient(ellipse at center, #fff 70%, rgba(255,255,255,0) 95%);
  border-radius: 50%;
  box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.95);
  filter: blur(1px);
}

.cloud::before {
  width: 7vw;
  height: 7vw;
  top: -4vw;
  left: 0.5vw;
}

.cloud::after {
  width: 9vw;
  height: 9vw;
  top: -5vw;
  left: 5vw;
}

/* Add a third puff for more realism */
.cloud::after {
  /* keep as is */
}

/* Add a new puff as a child div inside the cloud container in HTML */
.cloud .puff3 {
  position: absolute;
  background: radial-gradient(ellipse at center, #fff 70%, rgba(255,255,255,0) 95%);
  width: 6vw;
  height: 6vw;
  top: -3vw;
  left: 9vw;
  border-radius: 50%;
  box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.9);
  filter: blur(1px);
}

/* Cloud instances with unique horizontal movements */
/* Cloud 1 - Initial position and size */
.cloud.cloud1 {
  top: 15vh;
  left: 10vw; /* Unique left position */
  width: 12vw; /* Increase size if needed */
  height: 6vw;
  z-index: 2;
  animation: float 6.3s ease-in-out infinite, cloud-move1 120s linear infinite;
  opacity: 0.9;
}

/* Cloud 2 - Random position and unique movement */
.cloud.cloud2 {
  top: 25vh;
  left: 18vw; /* Unique left position */
  width: 14vw; /* Increase size if needed */
  height: 7vw;
  z-index: 1;
  animation: float 6s ease-in-out infinite, cloud-move2 125s linear infinite;
  opacity: 0.85;
}

/* Cloud 3 - Random position and unique movement */
.cloud.cloud3 {
  top: 35vh;
  left: 35vw; /* Unique left position */
  width: 13vw; /* Increase size if needed */
  height: 6vw;
  z-index: 0;
  animation: float 7.1s ease-in-out infinite, cloud-move3 130s linear infinite;
  opacity: 0.8;
}

/* Cloud 4 - Random position and unique movement */
.cloud.cloud4 {
  top: 45vh;
  left: 55vw; /* Unique left position */
  width: 15vw; /* Increase size if needed */
  height: 8vw;
  z-index: 3;
  animation: float 6.7s ease-in-out infinite, cloud-move4 140s linear infinite;
  opacity: 0.75;
}

/* Cloud 5 - Random position and unique movement */
.cloud.cloud5 {
  top: 65vh;
  left: 70vw; /* Unique left position */
  width: 14vw; /* Increase size if needed */
  height: 7vw;
  z-index: 4;
  box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.9),
              0 0 25px 10px rgba(255, 255, 255, 0.6);
  animation: float 6.4s ease-in-out infinite, cloud-move5 145s linear infinite;
  opacity: 0.7;
}

/* Adjust opacity of clouds based on scroll */
.cloud {
  opacity: 1; /* Set initial opacity */
}

body.sun-active .cloud {
  opacity: 0.6; /* Clouds fade when sun is active */
}

body.moon-92 .cloud {
  opacity: 1; /* Clouds return fully visible during the moon phase */
}

/* Horizontal cloud move animations */
/* Cloud animations for moving from off-screen left to right */
@keyframes cloud-move1 {
  0% { left: -10vw; }
  100% { left: 110vw; } /* Cloud moves across the screen */
}

@keyframes cloud-move2 {
  0% { left: -12vw; }
  100% { left: 110vw; }
}

@keyframes cloud-move3 {
  0% { left: -15vw; }
  100% { left: 115vw; }
}

@keyframes cloud-move4 {
  0% { left: -20vw; }
  100% { left: 120vw; }
}

@keyframes cloud-move5 {
  0% { left: -25vw; }
  100% { left: 125vw; }
}

@keyframes sunMoonPulse {
  0% {
    box-shadow: 0 0 30px 10px rgba(255, 215, 0, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 60px 20px rgba(255, 215, 0, 0.9);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 30px 10px rgba(255, 215, 0, 0.6);
    transform: scale(1);
  }
}

/* Shooting star animation */
.shooting-star {
  position: fixed;
  width: 150px;
  height: 2px;
  background: linear-gradient(270deg, white, rgba(255,255,255,0));
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 0; /* Lower than content */
  transform: rotate(45deg); /* Diagonal streak */
  animation: shooting-star-animation 1s linear forwards;
}

@keyframes shooting-star-animation {
  0% {
    transform: translateX(0) translateY(0) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100vw) translateY(100vh) rotate(45deg);
    opacity: 0;
  }
}

/* Extra-large screens: Large desktops and TVs */
@media (min-width: 1440px) {
  .sun-moon {
    width: 200px;
    height: 200px;
  }
}

/*stork animation*/
.stork-container {
  position: fixed;
  top: 20vh;
  left: 0;
  width: 220px;
  height: 180px;
  pointer-events: none;
  transform: translateX(-300px); /* Start offscreen */
  transition: transform 0.1s ease-out;
  z-index: 10; /* Above clouds but below UI */
}

.wing {
  transform-origin: 30% 50%;
  animation: flap 1.2s ease-in-out infinite;
}

.wing.right {
  transform-origin: 70% 50%;
  animation-delay: 0.3s;
}

.baby-bundle {
  transform-origin: top center;
  animation: swing 3s ease-in-out infinite;
}

@keyframes flap {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

@keyframes swing {
  0%, 100% { transform: rotate(7deg); }
  50% { transform: rotate(-7deg); }
}

/* If using a simple image for stork */
.stork-container {
  position: fixed;
  top: 20vh;
  left: 20px;
  width: 220px;
  height: 180px;
  pointer-events: none;
  /* Removed the initial offscreen transform */
  z-index: 10;
}

/* Wings flap animation */
.wing {
  transform-origin: 30% 50%;
  animation: flap 1.2s ease-in-out infinite;
}

.wing.right {
  transform-origin: 70% 50%;
  animation-delay: 0.3s;
}

/* Baby bundle swing animation */
.baby-bundle {
  animation: swing 3s ease-in-out infinite;
}

@keyframes flap {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

@keyframes swing {
  0%, 100% { transform: rotate(7deg); }
  50% { transform: rotate(-7deg); }
}