/* Core Animation Keyframes - Always Included */
@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes globeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes particleFloat {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  25% { opacity: 1; }
  50% { transform: translateY(-100px) translateX(20px); opacity: 0.5; }
  75% { opacity: 1; }
}

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

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Animation Classes - Production Safe */
.animate-gradient {
  animation: gradient 8s ease infinite !important;
  background-size: 300% 300% !important;
}

.animate-globe-spin {
  animation: globeSpin 40s linear infinite !important;
}

.animate-particle-float {
  animation: particleFloat 20s ease-in-out infinite !important;
}

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

.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Background Utilities */
.bg-300\% {
  background-size: 300% 300% !important;
}