/* Animations personnalisées pour les loaders professionnels */

/* Animation pour les particules élégantes */
@keyframes elegant-particle {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; }
  25% { opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); }
  75% { opacity: 0.8; }
  100% { transform: scale(0.8) rotate(360deg); opacity: 0.5; }
}

.animate-elegant-particle {
  animation: elegant-particle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Animation de flottement */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

/* Animation de scintillement */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.2) 50%, 
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
}

/* Animation de rotation tricolore */
@keyframes tricolor-spin {
  0% { transform: rotate(0deg); }
  33% { transform: rotate(90deg); }
  66% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

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

/* Animation pour les anneaux tricolores */
@keyframes tricolor-pulse {
  0% { opacity: 0.7; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0.7; transform: scale(0.97); }
}

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

/* Effet de lueur */
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.3)); }
  50% { filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); }
}

.animate-glow {
  animation: glow 2.5s ease-in-out infinite;
}

/* Effet de rotation inversée */
@keyframes spin-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.animate-spin-reverse {
  animation: spin-reverse 3s linear infinite;
}

/* Effet d'ondulation */
@keyframes ripple {
  0% { transform: scale(0.85); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0; }
}

.animate-ripple {
  animation: ripple 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Animation aux couleurs de la France */
@keyframes france-colors {
  0%, 100% { stroke: #005cbf; } /* Bleu */
  33% { stroke: #ffffff; } /* Blanc */
  66% { stroke: #ef4444; } /* Rouge */
}

.animate-france-colors {
  animation: france-colors 6s ease-in-out infinite;
}