/* ═══════════════════════════════════════════════════════════════════════════
 *  animations.css  —  Animations subtiles d'apparition au scroll
 *  ───────────────────────────────────────────────────────────────────────
 *  Toutes les animations sont déclenchées par js/animations.js via un
 *  IntersectionObserver. Quand un élément avec [data-reveal] entre dans
 *  le viewport, il reçoit la classe .is-visible et son contenu apparaît.
 *
 *  Respect de prefers-reduced-motion : si l'utilisateur a demandé moins
 *  d'animations, tout apparaît instantanément sans transition.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* État initial : invisible et légèrement décalé */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes ───────────────────────────────────────────────────────────── */

/* Fade simple, pas de déplacement */
[data-reveal="fade"] {
  transform: none;
}

/* Slide latéral depuis la gauche */
[data-reveal="slide-left"] {
  transform: translateX(-24px);
}
[data-reveal="slide-left"].is-visible {
  transform: translateX(0);
}

/* Slide latéral depuis la droite */
[data-reveal="slide-right"] {
  transform: translateX(24px);
}
[data-reveal="slide-right"].is-visible {
  transform: translateX(0);
}

/* Scale doux (utilisé sur les cards de la carte de visite) */
[data-reveal="zoom"] {
  transform: scale(0.97);
}
[data-reveal="zoom"].is-visible {
  transform: scale(1);
}

/* Délais en cascade (utilisé sur les listes : .pill, .card, .stat) */
[data-reveal-delay="1"] { transition-delay: 60ms; }
[data-reveal-delay="2"] { transition-delay: 120ms; }
[data-reveal-delay="3"] { transition-delay: 180ms; }
[data-reveal-delay="4"] { transition-delay: 240ms; }
[data-reveal-delay="5"] { transition-delay: 300ms; }
[data-reveal-delay="6"] { transition-delay: 360ms; }
[data-reveal-delay="7"] { transition-delay: 420ms; }
[data-reveal-delay="8"] { transition-delay: 480ms; }

/* La barre jaune signature qui se trace de gauche à droite */
.taxi-bar[data-reveal-trace] {
  width: 0;
  transition: width 800ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.taxi-bar[data-reveal-trace].is-visible {
  width: 48px;
}

/* ─── Compteurs animés ─────────────────────────────────────────────────
 * Pour les chiffres clés (« 0 € », « 20 ans », « 3 générations »).
 * Le JS détecte [data-counter] et anime de 0 vers la valeur cible.
 * En attendant, on garde la valeur cible affichée pour SEO.
 * ──────────────────────────────────────────────────────────────────────── */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ─── Hover doux sur les cards interactives ────────────────────────────── */
.card-hover {
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ─── Hero entrance — sequence sans JS ────────────────────────────────── */
.hero-enter > * {
  opacity: 0;
  animation: hero-fade-up 700ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.hero-enter > *:nth-child(1) { animation-delay: 0ms; }
.hero-enter > *:nth-child(2) { animation-delay: 80ms; }
.hero-enter > *:nth-child(3) { animation-delay: 160ms; }
.hero-enter > *:nth-child(4) { animation-delay: 240ms; }
.hero-enter > *:nth-child(5) { animation-delay: 320ms; }
.hero-enter > *:nth-child(6) { animation-delay: 400ms; }

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

/* ─── Surligneur jaune qui se "remplit" sur "20 ans" ──────────────────── */
.highlight-fill {
  position: relative;
  display: inline-block;
}

.highlight-fill::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: var(--taxi-soft);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.highlight-fill.is-visible::before {
  transform: scaleX(1);
}

/* ─── Respect prefers-reduced-motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal],
  [data-reveal="fade"],
  [data-reveal="slide-left"],
  [data-reveal="slide-right"],
  [data-reveal="zoom"] {
    opacity: 1 !important;
    transform: none !important;
  }

  .taxi-bar[data-reveal-trace] {
    width: 48px !important;
  }

  .highlight-fill::before {
    transform: scaleX(1) !important;
  }
}