/* ============================================
   ANIMATIONS.CSS — Intro, reveals au scroll,
   traits or, compteurs, parallaxe
   ============================================ */

/* ---------- Intro : keyframes ---------- */
@keyframes intro-tracer {
  to { stroke-dashoffset: 0; }
}
@keyframes intro-etoile {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes intro-lettre {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ---------- Entrée du hero après l'intro ---------- */
.hero [data-entree] {
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body.hero-pret .hero [data-entree="1"] { transition-delay: 0.05s; }
body.hero-pret .hero [data-entree="2"] { transition-delay: 0.12s; }
body.hero-pret .hero [data-entree="3"] { transition-delay: 0.19s; }
body.hero-pret .hero [data-entree="4"] { transition-delay: 0.26s; }
body.hero-pret .hero [data-entree="5"] { transition-delay: 0.33s; }
body.hero-pret .hero [data-entree] {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Titre h1 : révélation masquée ligne par ligne ---------- */
.hero h1[data-entree] {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-titre__ligne {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero-titre__ligne > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
body.hero-pret .hero-titre__ligne:nth-child(1) > span {
  transform: translateY(0);
  transition-delay: 0.16s;
}
body.hero-pret .hero-titre__ligne:nth-child(2) > span {
  transform: translateY(0);
  transition-delay: 0.30s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-titre__ligne > span { transform: none; transition: none; }
}

/* ---------- Trait doré sous "excellence" uniquement ---------- */
.hero h1 em {
  position: relative;
}
/* Agrandir la zone de la ligne 2 pour que le trait dépasse sans être coupé */
.hero-titre__ligne:nth-child(2) {
  padding-bottom: 10px;
  margin-bottom: -7px;
}
.hero-titre__ligne:nth-child(2) em::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg,
    var(--color-or-sombre) 0%,
    var(--color-or-sombre) 20%,
    var(--color-or-clair) 50%,
    var(--color-or-sombre) 80%,
    var(--color-or-sombre) 100%
  );
  background-size: 300% 100%;
  background-position: -200% center;
  border-radius: 2px;
  clip-path: inset(0 100% 0 0);
}
@keyframes trait-apparait {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes trait-balaye {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
body.hero-pret .hero-titre__ligne:nth-child(2) em::after {
  animation:
    trait-apparait 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both,
    trait-balaye 2.5s ease-in-out 1.7s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-titre__ligne:nth-child(2) em::after {
    clip-path: inset(0 0% 0 0);
    animation: none;
    background-position: 0 center;
  }
}

/* ---------- Scroll reveal ---------- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal { transform: translateY(22px); }
.reveal-left { transform: translateX(-26px); }
.reveal-right { transform: translateX(26px); }
.reveal-scale { transform: scale(0.97); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 60ms; }
.stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
.stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
.stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
.stagger > .reveal:nth-child(6) { transition-delay: 300ms; }

/* ---------- Révélation de texte par ligne ---------- */
.text-reveal {
  display: block;
  overflow: hidden;
}
.text-reveal-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.text-reveal.visible .text-reveal-inner { transform: translateY(0); }

/* ---------- Surtitre : ligne animée ---------- */
.surtitre-anime::before,
.en-tete-section .surtitre-anime::after {
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.surtitre-anime::before { transform-origin: right; }
.en-tete-section .surtitre-anime::after { transform-origin: left; }
.surtitre-anime.visible::before,
.en-tete-section .surtitre-anime.visible::after {
  transform: scaleX(1);
}

/* ---------- Traits or qui se dessinent ---------- */
.fil-or {
  fill: none;
  stroke: var(--color-or);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}
.visible .fil-or,
.fil-or.visible {
  animation: fil-tracer 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fil-tracer {
  to { stroke-dashoffset: 0; }
}

/* Ligne verticale de parcours (timeline) */
.timeline-fil {
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-or), var(--color-bordure));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.visible .timeline-fil { transform: scaleY(1); }

/* ---------- Flottement doux ---------- */
.flotte { animation: flotter 7s ease-in-out infinite; }
.flotte--2 { animation-delay: -2.3s; animation-duration: 8s; }
.flotte--3 { animation-delay: -4.1s; animation-duration: 9s; }

@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes lueur-balaye {
  0% { transform: translateX(-135%); }
  55%, 100% { transform: translateX(135%); }
}

@keyframes nav-lueur-balaye {
  0%   { background-position: 200% center; opacity: 1; }
  70%  { background-position: 0% center; opacity: 1; }
  100% { background-position: -80% center; opacity: 0; }
}

@keyframes derive-ligne {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(18px); opacity: 0.8; }
}

@keyframes fil-traverse {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes orbite-rotation {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes grille-derive {
  from { background-position: 0 0, 0 0; }
  to { background-position: 110px 55px, 55px 110px; }
}

@keyframes points-flottent {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.45; }
  50% { transform: translate3d(0, 14px, 0); opacity: 0.72; }
}

@keyframes vague-organique {
  0%, 100% { transform: translate3d(-1%, 0, 0) scaleY(1); }
  50% { transform: translate3d(1%, 3px, 0) scaleY(1.04); }
}

@keyframes vague-echo {
  0%, 100% { opacity: 0.10; transform: translateY(4px); }
  50% { opacity: 0.26; transform: translateY(-5px); }
}

@keyframes fondu-respire {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

/* Vagues bleues (flow-ribbon) : pilotées par JS (main.js) */
.flow-ribbon svg {
  animation: none;
}

.flow-wave svg {
  animation: none;
}

.flow-wave--reverse svg { animation: none; }

.flow-wave__echo {
  transform-origin: center bottom;
  animation: none;
}

.flow-wave::before {
  animation: none;
}

.hero__scene-card::before,
.parcours__carte::before {
  animation: none;
}

.hero__scene-card:hover::before,
.parcours__carte:hover::before {
  animation: lueur-balaye 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.hero__scene-card--center:hover::before {
  animation: lueur-balaye 3.6s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.hero__lignes span {
  animation: derive-ligne 6s ease-in-out infinite;
}

.hero__lignes span:nth-child(2) { animation-delay: -2.4s; }
.hero__lignes span:nth-child(3) { animation-delay: -4.8s; }

.accompagnement-bandeau__fil {
  animation: fil-traverse 3.8s ease-in-out infinite;
}

.hero__orbit--one {
  animation: orbite-rotation 22s linear infinite;
}

.hero__orbit--two {
  animation: orbite-rotation 14s linear infinite reverse;
}

.hero::before {
  animation: none;
}

.hero::after {
  animation: none;
}

/* ---------- Parallaxe légère (JS pose --defilement) ---------- */
.parallaxe {
  transform: translateY(calc(var(--defilement, 0) * var(--vitesse, 0.1) * -1px));
  will-change: transform;
}

/* ---------- Shimmer or (texte) ---------- */
.shimmer-or {
  background: linear-gradient(110deg,
    var(--color-or-sombre) 0%,
    var(--color-or-clair) 25%,
    var(--color-or-sombre) 50%,
    var(--color-or-clair) 75%,
    var(--color-or-sombre) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  to { background-position: -250% 0; }
}

.pulse-count { text-shadow: 0 0 24px rgba(233, 181, 77, 0.5); }

/* ---------- Halo respirant ---------- */
.halo-respire::before {
  animation: none;
}
@keyframes halo-respirer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .intro { display: none !important; }

  .hero [data-entree],
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .text-reveal-inner { transform: none !important; transition: none !important; }
  .formation-panel.is-entering,
  .formation-panel.is-entering .formation-panel__contenu,
  .formation-panel.is-entering .formation-scene * { animation: none !important; }
  .hero__scene-card {
    animation: none !important;
    translate: none !important;
  }
  .etapes__item,
  .etapes__item::before,
  .etapes__item::after,
  .etapes__num { transition: none !important; }
  .etapes__item:hover,
  .etapes__item:hover .etapes__num { transform: none !important; }
  .fil-or {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .timeline-fil { transform: scaleY(1) !important; transition: none !important; }
  .flotte, .flotte--2, .flotte--3 { animation: none !important; }
  .shimmer-or { animation: none !important; }
  .halo-respire::before { animation: none !important; }
  .parallaxe { transform: none !important; }
  .hero__scene-card::before,
  .parcours__carte::before,
  .hero__lignes span,
  .accompagnement-bandeau__fil,
  .hero__orbit--one,
  .hero__orbit--two,
  .hero::before,
  .hero::after { animation: none !important; }
  .flow-wave svg,
  .flow-wave__echo,
  .flow-wave::before,
  .flow-ribbon svg { animation: none !important; }
}

/* Les animations décoratives ne consomment rien quand leur section est hors écran. */
section.motion-scope-offscreen,
section.motion-scope-offscreen::before,
section.motion-scope-offscreen::after,
section.motion-scope-offscreen *,
section.motion-scope-offscreen *::before,
section.motion-scope-offscreen *::after {
  animation-play-state: paused !important;
}