/* ========================================
   ANIMATION KEYFRAMES
   ======================================== */

/* Shimmer effect for hover states */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Slide in from bottom */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide in from left */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Glow animation */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 125, 132, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 125, 132, 0.6);
  }
}

/* Fade in with scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* AI Grid animation for background */
@keyframes aiGrid {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* AI Glow animation */
@keyframes aiGlow {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  }
}

/* ========================================
   ANIMATION CLASSES
   ======================================== */

/* Apply fade-in animation */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

/* Apply slide-up animation */
.animate-slide-up {
  animation: slideInUp 0.8s ease-out;
}

/* Apply float animation */
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Apply pulse animation */
.animate-pulse {
  animation: pulse 2s infinite;
}

/* Apply glow animation */
.animate-glow {
  animation: glow 2s ease-in-out infinite;
}