/* Animation Keyframes */
@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  
  /* Animation Classes */
  .animate {
    opacity: 0;
    transition: all 0.8s ease;
  }
  
  .animate.fade-in-up {
    transform: translateY(50px);
  }
  
  .animate.fade-in-left {
    transform: translateX(-100px);
  }
  
  .animate.fade-in-right {
    transform: translateX(100px);
  }
  
  .animate.scale-in {
    transform: scale(0.9);
  }
  
  .animate.active {
    opacity: 1;
    transform: translate(0) scale(1);
  }
  
  /* Staggered Animation Delays */
  .delay-1 {
    transition-delay: 0.1s;
  }
  
  .delay-2 {
    transition-delay: 0.2s;
  }
  
  .delay-3 {
    transition-delay: 0.3s;
  }
  
  .delay-4 {
    transition-delay: 0.4s;
  }
  
  .delay-5 {
    transition-delay: 0.5s;
  }
  
  /* Continuous Animations */
  .float {
    animation: float 4s ease-in-out infinite;
  }
  
  .pulse {
    animation: pulse 2s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* Hover Animations */
  .hover-lift {
    transition: transform 0.3s ease;
  }
  
  .hover-lift:hover {
    transform: translateY(-10px);
  }
  
  .hover-glow {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  
  .hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.5);
    transform: translateY(-5px);
  }