/*
* Animations CSS pour le site Lonavrexithol
* Inclut toutes les animations pour les éléments de la page
*/

/* Animation d'apparition au scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Classe pour activer les animations au scroll */
.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.visible {
  animation: fadeInUp 0.8s forwards;
}

/* Animation différente par type d'élément */
.hero-content.animate-on-scroll.visible {
  animation: fadeIn 1.2s forwards;
}

.service-card.animate-on-scroll.visible {
  animation-delay: calc(var(--item-index, 0) * 0.2s);
  animation: fadeInUp 0.8s forwards;
}

.benefit-item.animate-on-scroll.visible {
  animation-delay: calc(var(--item-index, 0) * 0.15s);
  animation: fadeInUp 0.8s forwards;
}

.stat-item.animate-on-scroll.visible {
  animation: scaleUp 0.8s forwards;
  animation-delay: calc(var(--item-index, 0) * 0.2s);
}

.news-card.animate-on-scroll.visible {
  animation: fadeInUp 0.8s forwards;
  animation-delay: calc(var(--item-index, 0) * 0.2s);
}

/* Animation au hover */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(29, 233, 182, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(29, 233, 182, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(29, 233, 182, 0);
  }
}

.button:hover {
  animation: pulse 1.5s infinite;
}

/* Animation des statistiques - compteur */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-number.animate {
  animation: countUp 2s forwards;
}

/* Animation du logo */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.logo {
  background: linear-gradient(270deg, #1DE9B6, #FF5E1A, #FF3D6E);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientFlow 8s ease infinite;
}

/* Script PHP pour activer les animations au scroll */
/* 
Pour activer ces animations, ajouter ce script JavaScript minimaliste dans un fichier PHP :

<?php
// Ce code doit être placé juste avant la fermeture </body> pour éviter les problèmes de JavaScript
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Observer pour les animations au scroll
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        
        // Animation pour les éléments qui nécessitent un délai séquentiel
        if (entry.target.parentNode) {
          const items = Array.from(entry.target.parentNode.children);
          const index = items.indexOf(entry.target);
          if (index !== -1) {
            entry.target.style.setProperty('--item-index', index);
          }
        }
        
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });

  // Observer tous les éléments avec la classe animate-on-scroll
  document.querySelectorAll(".animate-on-scroll").forEach(function(item) {
    observer.observe(item);
  });
});
</script>
*/