@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

  /* Float Animation with Delay */
  .animate-float-delayed {
    animation: float 6s ease-in-out infinite;
    animation-delay: 3s;
  }

  /* Fade In Up */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Marquee Animation */
  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .animate-marquee {
    animation: marquee 30s linear infinite;
  }

  .pause-animation:hover {
    animation-play-state: paused;
  }

  /* Counter Animation */
  @keyframes countUp {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-countUp {
    animation: countUp 0.6s ease-out;
  }

  /* Pulse Glow Effect */
  @keyframes pulseGlow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
    }
    50% {
      box-shadow: 0 0 40px rgba(147, 51, 234, 0.8);
    }
  }

  .animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
  }

  /* Gradient Shift */
  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 5s ease infinite;
  }

  /* Bounce X Animation */
  @keyframes bounceX {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(30px);
    }
  }

  .animate-bounce-x {
    animation: bounceX 7s infinite linear;
  }

  /* Bob Y Animation */
  @keyframes bobY {
    0%, 100% {
      transform: translateY(-30px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .animate-bob-y {
    animation: bobY 3s infinite linear;
  }

  /* Rotate Animation */
  @keyframes rotate360 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-rotate {
    animation: rotate360 40s linear infinite;
  }

  /* Slide Down */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-slideDown {
    animation: slideDown 0.5s ease-out;
  }

  /* Ripple Effect */
  @keyframes ripple {
    70% {
      box-shadow: 0 0 0 40px rgba(147, 51, 234, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
    }
  }

  .animate-ripple {
    animation: ripple 1.5s ease-out infinite;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #9333ea, #3b82f6);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #7c3aed, #2563eb);
}