/* ============================================================
   animations.css — Keyframes et classes d'animation au scroll
   ============================================================ */

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

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* ── Classes JS-animées (déclenchées par Intersection Observer) ── */
/* État initial : élément invisible, prêt à animer */
.js-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État animé : ajouté par animations.js quand l'élément est visible */
.js-animate.is-visible {
  opacity: 1;
  transform: none;
}

/* Variantes de direction */
.js-animate-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-animate-left.is-visible {
  opacity: 1;
  transform: none;
}

.js-animate-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-animate-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Délais en cascade (utile pour les grilles) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ── Animations du hero (au chargement de page) ───────────── */
.hero__badge  { animation: fade-in-up 0.6s ease both; }
.hero__title  { animation: fade-in-up 0.6s ease 0.15s both; }
.hero__desc   { animation: fade-in-up 0.6s ease 0.3s both; }
.hero__actions{ animation: fade-in-up 0.6s ease 0.45s both; }
.hero__stats  { animation: fade-in-up 0.6s ease 0.6s both; }
.hero__visual { animation: slide-in-right 0.8s ease 0.3s both; }

/* ── Shimmer sur texte accent ─────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--clr-accent) 0%,
    #FFCC70 40%,
    var(--clr-accent) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* ── Préférence de réduction de mouvement ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-animate,
  .js-animate-left,
  .js-animate-right {
    opacity: 1;
    transform: none;
  }
}