/* Animation Styles - All Keyframes and Transitions */

@keyframes scrollDiagonal {
  0% {
    transform: rotate(-45deg) translateX(-100%);
  }
  100% {
    transform: rotate(-45deg) translateX(100%);
  }
}

@keyframes shapeRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shapePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes loadingPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes shockwavePulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(12);
    opacity: 0;
  }
}

@keyframes glitchText {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes neonFlicker {
  0%, 100% {
    text-shadow: 
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor,
      0 0 20px currentColor;
  }
  50% {
    text-shadow: 
      0 0 2px currentColor,
      0 0 5px currentColor,
      0 0 8px currentColor,
      0 0 12px currentColor;
  }
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes energyBeam {
  0% {
    transform: translateX(-100%) skewX(-45deg);
  }
  100% {
    transform: translateX(200%) skewX(-45deg);
  }
}

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

@keyframes scanline {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}

@keyframes hologramFlicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    opacity: 0.9;
    filter: brightness(1.1);
  }
  50% {
    opacity: 0.95;
    filter: brightness(0.9);
  }
  75% {
    opacity: 0.85;
    filter: brightness(1.05);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gridPulse {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes energyFlow {
  0% {
    opacity: 0.5;
    transform: scaleX(0.8);
  }
  100% {
    opacity: 1;
    transform: scaleX(1.2);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

@keyframes titleGlow {
  0% {
    filter: brightness(1) saturate(1);
  }
  100% {
    filter: brightness(1.2) saturate(1.5);
  }
}

@keyframes expand {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 200px;
    opacity: 1;
  }
}

/* Utility Animation Classes */
.animate-glow {
  animation: neonFlicker 3s ease-in-out infinite alternate;
}

.animate-float {
  animation: cardFloat 6s ease-in-out infinite;
}

.animate-glitch {
  animation: glitchText 0.3s ease-in-out;
}

.animate-hologram {
  animation: hologramFlicker 4s ease-in-out infinite;
}

/* Hover Effects */
.hover-glow:hover {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor,
    0 0 35px currentColor;
  transition: text-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hover-slide:hover {
  transform: translateX(10px);
  transition: transform 0.3s ease;
}

/* Stagger Animations for Lists */
.stagger-fade-in > * {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.stagger-fade-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-fade-in > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-fade-in > *:nth-child(8) { animation-delay: 0.8s; }
.stagger-fade-in > *:nth-child(9) { animation-delay: 0.9s; }
.stagger-fade-in > *:nth-child(10) { animation-delay: 1s; }