/* 
   Animations CSS pour Oventramilo.com
*/

/* Animation de fondu à l'entrée */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation de l'effet néon */
@keyframes neonPulse {
  0% {
    text-shadow: 0 0 0.5rem rgba(0, 255, 209, 0.7);
  }
  50% {
    text-shadow: 0 0 1.5rem rgba(0, 255, 209, 0.9), 0 0 2rem rgba(0, 255, 209, 0.5);
  }
  100% {
    text-shadow: 0 0 0.5rem rgba(0, 255, 209, 0.7);
  }
}

/* Animation de bordure néon */
@keyframes borderPulse {
  0% {
    box-shadow: 0 0 0.5rem rgba(0, 255, 209, 0.5);
  }
  50% {
    box-shadow: 0 0 1.5rem rgba(0, 255, 209, 0.8), 0 0 2rem rgba(0, 255, 209, 0.5);
  }
  100% {
    box-shadow: 0 0 0.5rem rgba(0, 255, 209, 0.5);
  }
}

/* Animation de rotation pour les icônes */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation d'échelle */
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Animation pour la progression des barres */
@keyframes progressBar {
  from {
    width: 0;
  }
  to {
    width: var(--progress-width, 80%);
  }
}

/* Application des animations */

/* Logo text animation */
.logo-text {
  animation: neonPulse 3s infinite;
}

/* Section fade in */
.hero-section h1,
.hero-section .hero-subtitle,
.hero-section .cta-button,
section h2,
.about-content,
.advantages-grid,
.services-cards,
.testimonial-item,
.form-section form,
.faq-item,
.clients-grid,
.contact-container {
  animation: fadeIn 1s ease-out forwards;
}

/* Animations sur hover */
.service-card:hover,
.advantage-item:hover,
.client-logo:hover {
  animation: scale 1s infinite;
}

/* Animation des éléments au survol */
.cta-button:hover,
.form-submit:hover {
  animation: borderPulse 2s infinite;
}

/* Animation pour les icônes */
.icon-animated {
  transition: transform 0.5s ease;
}

.icon-animated:hover {
  transform: rotate(10deg) scale(1.1);
}

/* Animation pour les éléments FAQ */
.faq-question.active + .faq-answer {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Animation pour la section témoignages */
.testimonial-active {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Animation pour les barres de progression */
.progress-bar .fill {
  animation: progressBar 1.5s ease-out forwards;
}

/* Animation pour les blocs de texte au survol */
.text-block:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

/* Animation pour le menu au survol */
.main-nav a:hover {
  animation: borderPulse 2s infinite;
}

/* Animation pour les cartes au survol */
.service-card:hover {
  transform: translateY(-10px);
  transition: transform 0.3s ease;
}
