/* Animations CSS */

/* Glow Animation */
@keyframes glow {
  from {
    text-shadow: 0 0 10px var(--color-accent-1), 
                 0 0 20px var(--color-accent-1), 
                 0 0 30px var(--color-accent-1);
  }
  to {
    text-shadow: 0 0 20px var(--color-accent-1), 
                 0 0 30px var(--color-accent-2), 
                 0 0 40px var(--color-accent-3);
  }
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Animation */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading Animation */
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Button Hover Animation */
@keyframes buttonGlow {
  0% {
    box-shadow: 0 0 5px var(--color-accent-1);
  }
  50% {
    box-shadow: 0 0 20px var(--color-accent-2);
  }
  100% {
    box-shadow: 0 0 5px var(--color-accent-1);
  }
}

/* Float Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 1s ease forwards;
}

.pulse {
  animation: pulse 2s infinite;
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* Scroll Reveal Animations */
[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

[data-aos="zoom-in"] {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="zoom-in"].aos-animate {
  opacity: 1;
  transform: scale(1);
}

/* Apply delay to animations */
[data-aos-delay="100"] { transition-delay: 0.1s; }
[data-aos-delay="200"] { transition-delay: 0.2s; }
[data-aos-delay="300"] { transition-delay: 0.3s; }
[data-aos-delay="400"] { transition-delay: 0.4s; }
[data-aos-delay="500"] { transition-delay: 0.5s; }