/* === Sky Background Section === */
.sunrise-section {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, #0a1a2f 0%, #f9d29d 100%);
  transition: background 3s ease;
}

/* === The Sun Element === */
.rising-sun {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #ffb347 0%, #ffcc33 100%);
  border-radius: 50%;
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  animation: sunrise 8s ease-in-out forwards;
}

/* === Sunrise Animation === */
@keyframes sunrise {
  0% {
    bottom: -150px;
    background: radial-gradient(circle, #ff9966 0%, #ff5e62 100%);
  }
  50% {
    bottom: 50%;
    background: radial-gradient(circle, #ffcc33 0%, #ffb347 100%);
  }
  100% {
    bottom: 80%;
    background: radial-gradient(circle, #f9d29d 0%, #f6f1d3 100%);
  }
}

/* === Mobile tweaks === */
@media (max-width: 768px) {
  .rising-sun {
    width: 100px;
    height: 100px;
  }
}