/* Seasonal Theme Animations */

/* ========== SPRING ANIMATIONS ========== */
.spring-animation {
  position: relative;
  overflow: hidden;
}

@keyframes float-flower {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes float-left-right {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(30px);
  }
  75% {
    transform: translateX(-30px);
  }
}

.spring-animation::before {
  content: '';
  position: fixed;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  background: none;
}

.spring-particle {
  position: fixed;
  top: -50px;
  font-size: 2rem;
  pointer-events: none;
  z-index: 998;
  animation: float-flower linear forwards;
}

.spring-particle:nth-child(1) {
  left: 10%;
  animation-duration: 8s;
  animation-delay: 0s;
}

.spring-particle:nth-child(2) {
  left: 20%;
  animation-duration: 10s;
  animation-delay: 2s;
}

.spring-particle:nth-child(3) {
  left: 30%;
  animation-duration: 9s;
  animation-delay: 4s;
}

.spring-particle:nth-child(4) {
  left: 40%;
  animation-duration: 11s;
  animation-delay: 6s;
}

.spring-particle:nth-child(5) {
  left: 50%;
  animation-duration: 8.5s;
  animation-delay: 1s;
}

/* ========== SUMMER ANIMATIONS ========== */
.summer-animation {
  position: relative;
  overflow: hidden;
}

@keyframes sun-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.4));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(251, 191, 36, 0.8));
    transform: scale(1.05);
  }
}

@keyframes sun-rays {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes float-up-glow {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1.2);
    opacity: 0;
  }
}

.summer-particle {
  position: fixed;
  bottom: -50px;
  font-size: 1.5rem;
  pointer-events: none;
  z-index: 998;
  animation: float-up-glow linear forwards;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}

.summer-particle:nth-child(1) {
  left: 15%;
  animation-duration: 7s;
  animation-delay: 0s;
}

.summer-particle:nth-child(2) {
  left: 35%;
  animation-duration: 9s;
  animation-delay: 2s;
}

.summer-particle:nth-child(3) {
  left: 50%;
  animation-duration: 8s;
  animation-delay: 4s;
}

.summer-particle:nth-child(4) {
  left: 65%;
  animation-duration: 10s;
  animation-delay: 1s;
}

.summer-particle:nth-child(5) {
  left: 85%;
  animation-duration: 7.5s;
  animation-delay: 3s;
}

/* ========== FALL ANIMATIONS ========== */
.fall-animation {
  position: relative;
  overflow: hidden;
}

@keyframes fall-leaves {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) translateX(100px);
    opacity: 0;
  }
}

@keyframes sway-left-right {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
}

.fall-particle {
  position: fixed;
  top: -50px;
  font-size: 2.5rem;
  pointer-events: none;
  z-index: 998;
  animation: fall-leaves linear forwards;
}

.fall-particle:nth-child(1) {
  left: 5%;
  animation-duration: 9s;
  animation-delay: 0s;
}

.fall-particle:nth-child(2) {
  left: 25%;
  animation-duration: 11s;
  animation-delay: 2s;
}

.fall-particle:nth-child(3) {
  left: 45%;
  animation-duration: 10s;
  animation-delay: 4s;
}

.fall-particle:nth-child(4) {
  left: 65%;
  animation-duration: 12s;
  animation-delay: 1s;
}

.fall-particle:nth-child(5) {
  left: 85%;
  animation-duration: 9.5s;
  animation-delay: 3s;
}

/* ========== WINTER ANIMATIONS ========== */
.winter-animation {
  position: relative;
  overflow: hidden;
}

@keyframes snowfall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg) translateX(30px);
    opacity: 0;
  }
}

@keyframes drift-snow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(40px);
  }
}

.winter-particle {
  position: fixed;
  top: -50px;
  font-size: 2rem;
  pointer-events: none;
  z-index: 998;
  animation: snowfall linear forwards;
  color: #e0f2fe;
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
}

.winter-particle:nth-child(1) {
  left: 8%;
  animation-duration: 10s;
  animation-delay: 0s;
}

.winter-particle:nth-child(2) {
  left: 20%;
  animation-duration: 12s;
  animation-delay: 2s;
}

.winter-particle:nth-child(3) {
  left: 40%;
  animation-duration: 11s;
  animation-delay: 4s;
}

.winter-particle:nth-child(4) {
  left: 60%;
  animation-duration: 13s;
  animation-delay: 1s;
}

.winter-particle:nth-child(5) {
  left: 80%;
  animation-duration: 10.5s;
  animation-delay: 3s;
}

/* ========== GLOW & SHIMMER EFFECTS ========== */
@keyframes shimmer {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes gentle-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
  }
}

.shimmer-text {
  animation: shimmer 2s ease-in-out infinite;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
  .spring-particle,
  .fall-particle,
  .winter-particle {
    font-size: 1.5rem;
  }

  .summer-particle {
    font-size: 1.2rem;
  }

  .spring-particle:nth-child(n),
  .summer-particle:nth-child(n),
  .fall-particle:nth-child(n),
  .winter-particle:nth-child(n) {
    animation-duration: calc(var(--duration) * 0.8);
  }
}

@media (max-width: 480px) {
  .spring-particle,
  .fall-particle,
  .winter-particle {
    font-size: 1.2rem;
  }

  .summer-particle {
    font-size: 1rem;
  }
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
  .spring-particle,
  .summer-particle,
  .fall-particle,
  .winter-particle,
  .shimmer-text {
    animation: none;
    opacity: 0.3;
  }
}