/* Custom animation utilities used across the site
   Keep names stable; components reference these classes directly. */

/* Floating (gentle vertical drift) */
@keyframes float-y {
  0% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}

.animate-float-slow {
  animation: float-y 14s ease-in-out infinite;
  will-change: transform;
}

.animate-float-medium {
  animation: float-y 10s ease-in-out infinite;
  will-change: transform;
}

.animate-float-fast {
  animation: float-y 6s ease-in-out infinite;
  will-change: transform;
}

/* Bounce (small accent dots) */
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-bounce-slow {
  animation: bounce-y 3.4s ease-in-out infinite;
  will-change: transform;
}

.animate-bounce-medium {
  animation: bounce-y 2.1s ease-in-out infinite;
  will-change: transform;
}

.animate-bounce-fast {
  animation: bounce-y 1.3s ease-in-out infinite;
  will-change: transform;
}

/* Rotate (generic) */
@keyframes rotate-turn {
  to { transform: rotate(360deg); }
}

.animate-rotate-slow { animation: rotate-turn 40s linear infinite; }
.animate-rotate-medium { animation: rotate-turn 20s linear infinite; }
.animate-rotate-fast { animation: rotate-turn 8s linear infinite; }

/* Floating animations */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
  25% { transform: translateY(-20px) translateX(10px) rotate(2deg); }
  50% { transform: translateY(-10px) translateX(-5px) rotate(-1deg); }
  75% { transform: translateY(-30px) translateX(8px) rotate(1deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
  25% { transform: translateY(-15px) translateX(-8px) rotate(-2deg); }
  50% { transform: translateY(-25px) translateX(12px) rotate(1deg); }
  75% { transform: translateY(-5px) translateX(-3px) rotate(-1deg); }
}

@keyframes float-fast {
  0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
  25% { transform: translateY(-10px) translateX(5px) scale(1.1); }
  50% { transform: translateY(-20px) translateX(-8px) scale(0.9); }
  75% { transform: translateY(-5px) translateX(3px) scale(1.05); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.3; }
  50% { transform: translateY(-15px) scale(1.2); opacity: 0.8; }
}

@keyframes bounce-medium {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.4; }
  50% { transform: translateY(-12px) scale(1.1); opacity: 0.7; }
}

@keyframes bounce-fast {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.5; }
  50% { transform: translateY(-8px) scale(1.15); opacity: 0.9; }
}

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

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

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

.animate-bounce-slow {
  animation: bounce-slow 4s ease-in-out infinite;
}

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

.animate-bounce-fast {
  animation: bounce-fast 2s ease-in-out infinite;
}