/* Animations pour l'application Otis */

/* Fade in - Animation progressive d'apparition */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade out - Animation progressive de disparition */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Slide in - Animation d'entrée glissante */
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Slide out - Animation de sortie glissante */
@keyframes slideOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}

/* Pulse - Animation de pulsation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Bounce - Animation de rebond */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

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

/* Shake - Animation de secousse */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Pop - Animation d'apparition pop */
@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Ripple - Animation d'onde */
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
  100% { box-shadow: 0 0 0 20px rgba(52, 152, 219, 0); }
}

/* Spin - Animation de chargement rotation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

/* Classes d'animation réutilisables */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

.slide-in {
  animation: slideIn 0.5s ease forwards;
}

.slide-out {
  animation: slideOut 0.5s ease forwards;
}

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

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

.rotate {
  animation: rotate 2s linear infinite;
}

.shake {
  animation: shake 0.8s ease-in-out;
}

.pop {
  animation: pop 0.5s ease forwards;
}

.ripple {
  animation: ripple 1.5s infinite;
}

.spin {
  animation: spin 1s linear infinite;
}

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

/* Classes pour contrôler les délais */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Classes pour contrôler les durées */
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-1000 { animation-duration: 1000ms; }
.duration-2000 { animation-duration: 2000ms; }

/* Animation d'apparition pour les marqueurs */
.marker-appear {
  animation: pop 0.3s ease forwards;
}

/* Animation pour le bouton de localisation */
.locate-button:active {
  animation: ripple 0.8s ease-out;
}

/* Animation pour le menu latéral */
.side-menu.open {
  animation: slideIn 0.3s ease forwards;
}

/* Animation pour les notifications */
.notification {
  animation: slideIn 0.3s ease forwards, fadeOut 0.5s ease forwards 3s;
}

/* Animation pour les filtres */
.filter-active {
  animation: pulse 0.5s ease forwards;
}