:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-duration: 0.7s;
}

/* Pages / sections sans animation d'entrée */
.fx-static .fx {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Apparition en cascade au scroll */
.fx {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--fx-duration) var(--fx-ease),
    transform var(--fx-duration) var(--fx-ease),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  transition-delay: var(--fx-d, 0ms);
  will-change: opacity, transform;
}

.fx.fx-show {
  opacity: 1;
  transform: none;
}

/* Hover cartes */
.fx-card.fx-show {
  border-color: rgba(255, 255, 255, 0.07);
}

@media (hover: hover) {
  .fx-card.fx-show:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }
}

/* Menu mobile (fonctionnel) */
#mobile-nav {
  transition: opacity 0.3s var(--fx-ease), transform 0.3s var(--fx-ease);
}

#mobile-nav.fx-nav-hidden {
  display: none;
}

#mobile-nav.fx-nav-open {
  display: block;
  opacity: 1;
  transform: none;
}

/* ─── HERO : ENTRÉE PAGE LOAD ────────────────────────
   Déclenché par .fx-run (non scroll, déclenché au load) */
.fx-hero {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s var(--fx-ease),
    transform 0.9s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
  will-change: opacity, transform;
}
.fx-hero.fx-run {
  opacity: 1;
  transform: none;
}

/* Colonne droite hero — glisse depuis la droite */
.fx-hero-r {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 1s var(--fx-ease),
    transform 1s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
}
.fx-hero-r.fx-run {
  opacity: 1;
  transform: none;
}

/* ─── TITRES DE SECTION : ANIMATION SCROLL ───────────
   Offset vertical plus grand que les cartes.           */
.fx-title {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--fx-ease),
    transform 0.9s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
  will-change: opacity, transform;
}
.fx-title.fx-show {
  opacity: 1;
  transform: none;
}

/* ─── ÉTAPES TIMELINE : GLISSE DEPUIS LA GAUCHE ─────  */
.fx-step {
  opacity: 0;
  transform: translateX(-22px) translateY(4px);
  transition:
    opacity 0.75s var(--fx-ease),
    transform 0.75s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
  will-change: opacity, transform;
}
.fx-step.fx-show {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx,
  .fx-hero, .fx-hero-r,
  .fx-title,
  .fx-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .fx-card.fx-show:hover {
    transform: none;
    box-shadow: none;
  }

  #mobile-nav {
    transition: none;
  }
}