/* Holiday Animations */

/* 1. Snow (Christmas) */
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.snow {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}

/* 2. Confetti (New Year, Youth Day) */
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.7;
  animation: confettiFall linear infinite;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) translateX(0) rotate(0deg);
  }

  25% {
    transform: translateY(-50vh) translateX(10px) rotate(90deg);
  }

  50% {
    transform: translateY(0) translateX(-10px) rotate(180deg);
  }

  75% {
    transform: translateY(50vh) translateX(10px) rotate(270deg);
  }

  100% {
    transform: translateY(100vh) translateX(0) rotate(360deg);
  }
}

/* 3. Hearts (Valentine's, Charity) */
.heart {
  position: absolute;
  color: #ff4d6d;
  font-size: 20px;
  opacity: 0.6;
  animation: heartFloat ease-in infinite;
}

@keyframes heartFloat {
  0% {
    transform: translateY(100vh) scale(0.5) rotate(0deg);
    opacity: 0;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-20vh) scale(1.2) rotate(20deg);
    opacity: 0;
  }
}

/* 4. Flower Petals (Women's Day) */
.petal {
  position: absolute;
  color: #9d4edd;
  font-size: 15px;
  opacity: 0.5;
  animation: petalSway ease-in-out infinite;
}

@keyframes petalSway {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg);
  }

  100% {
    transform: translateY(110vh) translateX(20px) rotate(720deg);
  }
}

/* 5. Rain/Drops (Water Day) */
.drop {
  position: absolute;
  background: #3a86ff;
  width: 2px;
  height: 10px;
  opacity: 0.4;
  animation: dropFall linear infinite;
}

@keyframes dropFall {
  0% {
    transform: translateY(-10vh);
  }

  100% {
    transform: translateY(110vh);
  }
}

/* 6. Leaves (Earth Day, Environment Day) */
.leaf {
  position: absolute;
  color: #2d6a4f;
  font-size: 18px;
  opacity: 0.6;
  animation: leafTumble linear infinite;
}

@keyframes leafTumble {
  0% {
    transform: translateY(-10vh) rotateX(0deg);
  }

  100% {
    transform: translateY(110vh) rotateX(360deg) rotateY(360deg);
  }
}

/* 7. Small Bats (Halloween) */
.bat {
  position: absolute;
  color: #333;
  font-size: 24px;
  opacity: 0.4;
  animation: batFly linear infinite;
}

@keyframes batFly {
  0% {
    transform: translateX(-10vw) translateY(100vh);
  }

  50% {
    transform: translateX(50vw) translateY(20vh);
  }

  100% {
    transform: translateX(110vw) translateY(-10vh);
  }
}

/* 8. Stars (Children's Day, Happiness) */
.star {
  position: absolute;
  color: #ffb703;
  font-size: 14px;
  opacity: 0.8;
  animation: starTwinkle ease-in-out infinite;
}

@keyframes starTwinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* 9. Music Notes (Music Day) */
.music-note {
  position: absolute;
  color: #fff;
  font-size: 20px;
  opacity: 0.5;
  animation: noteFloatUp ease-out infinite;
}

@keyframes noteFloatUp {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  20% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(-10vh) rotate(45deg);
    opacity: 0;
  }
}

/* Holiday Banner Styles */
.holiday-banner {
  position: fixed;
  top: 4.5rem;
  /* Just below mobile header (h-16 = 4rem) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  /* Just below the header (z-50) */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.25rem;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  color: white;
  width: max-content;
  max-width: calc(100% - 2rem);
  white-space: normal;
  text-align: center;
  animation: slideDownFade 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1024px) {
  .holiday-banner {
    top: 5.5rem;
    /* Just below desktop header (h-20 = 5rem) */
  }
}

@keyframes slideDownFade {
  0% {
    transform: translate(-50%, -20px);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.holiday-banner span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.holiday-icons {
  font-size: 1.25rem;
}

.holiday-text {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.025em;
}

.holiday-text strong {
  color: #00c9a7;
  font-weight: 700;
}