/* ============================================================================
   ANIMATIONS COMPONENT

   Reusable CSS animation keyframes for UI elements.

   Purpose: Provide smooth, performant animations that can be applied
   to any element via animation properties.

   Usage:

   Apply to any element:
   .my-element {
     animation: float 3s ease-in-out infinite;
   }

   Available Animations:
   - float              # Gentle up/down float (-20px)
   - float-reverse      # Gentle down/up float (+20px)
   - gradient-shift     # Animated gradient background
   - spin-slow          # Slow 360° rotation
   - pulse              # Scale and fade pulse effect
   - wave               # Complex wave motion (X and Y)
   - fade-in            # Fade in with slide up
   - subtle-float       # Gentle float (-10px, subtle)
   - rotate-slow        # Slow rotation (same as spin-slow)
   - pulse-glow         # Pulsing glow effect
   - drift              # Drifting motion in multiple directions

   Performance Notes:
   - Use transform and opacity for best performance
   - Avoid animating width, height, top, left
   - Use will-change sparingly for heavy animations
   ============================================================================ */

/* ===== Float Animations ===== */

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes float-reverse {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(20px);
  }
}

@keyframes subtle-float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}


/* ===== Gradient Animations ===== */

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


/* ===== Rotation Animations ===== */

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* ===== Pulse Animations ===== */

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

  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}


/* ===== Wave and Drift Animations ===== */

@keyframes wave {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }

  25% {
    transform: translateX(-20px) translateY(-10px);
  }

  50% {
    transform: translateX(20px) translateY(5px);
  }

  75% {
    transform: translateX(-10px) translateY(10px);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }

  33% {
    transform: translateX(30px) translateY(-20px);
  }

  66% {
    transform: translateX(-20px) translateY(10px);
  }
}


/* ===== Fade Animations ===== */

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}