/* ==========================================================================
   Anatole — animations de la page d'accueil
   Règle : aucun état caché n'est appliqué tant que la classe `la-motion`
   n'est pas posée sur <html> par js/landing/main.js. Sans JavaScript, ou avec
   `prefers-reduced-motion: reduce`, la page reste complète et immobile.
   Seules `transform` et `opacity` sont animées, à deux exceptions demandées :
   `stroke-dashoffset` pour le tracé des flèches, et `color` pour la
   coloration d'une réponse (propriété de peinture, sans impact sur la mise
   en page).
   ========================================================================== */

:root{
  --la-ease-out:cubic-bezier(.22,1,.36,1);
  --la-ease-in:cubic-bezier(.4,0,1,1);
  --la-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --la-dur-in:620ms;
  --la-dur-out:300ms;
}

/* --------------------------------------------------------------------------
   1. Révélation générale
   La direction du défilement pilote --la-rv-y (entrée) et --la-rv-out
   (sortie), posées par js/landing/reveal.js.
   -------------------------------------------------------------------------- */
.la-motion [data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--la-rv-y,28px),0);
  transition:opacity var(--la-dur-in) var(--la-ease-out),transform var(--la-dur-in) var(--la-ease-out);
  transition-delay:calc(var(--la-i,0) * 60ms);
}
.la-motion [data-reveal][data-state="in"]{opacity:1;transform:none}
.la-motion [data-reveal][data-state="out"]{
  opacity:0;
  transform:translate3d(0,var(--la-rv-out,-12px),0);
  transition-duration:var(--la-dur-out);
  transition-timing-function:var(--la-ease-in);
  transition-delay:0s;
}

/* Cascade : --la-i est l'indice de l'élément dans son groupe. */
.la-motion [data-stagger]>[data-reveal]:nth-child(1){--la-i:0}
.la-motion [data-stagger]>[data-reveal]:nth-child(2){--la-i:1}
.la-motion [data-stagger]>[data-reveal]:nth-child(3){--la-i:2}
.la-motion [data-stagger]>[data-reveal]:nth-child(4){--la-i:3}
.la-motion [data-stagger]>[data-reveal]:nth-child(5){--la-i:4}
.la-motion [data-stagger]>[data-reveal]:nth-child(6){--la-i:5}
.la-motion [data-stagger]>[data-reveal]:nth-child(7){--la-i:6}
.la-motion [data-stagger]>[data-reveal]:nth-child(8){--la-i:7}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.la-motion .la-word{
  display:inline-block;
  overflow:hidden;
  padding:.04em .09em .16em;
  margin:-.04em -.09em -.16em;
  vertical-align:bottom;
}
.la-motion .la-word>span{
  display:inline-block;
  transform:translate3d(0,112%,0);
  transition:transform 780ms var(--la-ease-out);
  transition-delay:var(--la-d,0ms);
}
.la-motion .la-hero.is-in .la-word>span{transform:none}

/* « Maîtriser » « l’IA. » puis, avec un temps de retard, « Vraiment. » */
.la-motion .la-word:nth-child(1)>span{--la-d:120ms}
.la-motion .la-word:nth-child(2)>span{--la-d:180ms}
.la-motion .la-word:nth-child(3)>span{--la-d:420ms}

.la-motion .la-hero-badge,
.la-motion .la-hero-eyebrow,
.la-motion .la-hero-lede,
.la-motion .la-hero-actions{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity 560ms var(--la-ease-out),transform 560ms var(--la-ease-out);
  transition-delay:var(--la-d,0ms);
}
.la-motion .la-hero.is-in .la-hero-badge,
.la-motion .la-hero.is-in .la-hero-eyebrow,
.la-motion .la-hero.is-in .la-hero-lede,
.la-motion .la-hero.is-in .la-hero-actions{opacity:1;transform:none}

.la-motion .la-hero-badge{--la-d:60ms}
.la-motion .la-hero-eyebrow{--la-d:0ms}
.la-motion .la-hero-lede{--la-d:560ms}
.la-motion .la-hero-actions{--la-d:660ms}

/* --------------------------------------------------------------------------
   3. Bulle d'Anatole
   -------------------------------------------------------------------------- */
/* Les cartes d'exercices de la page d'accueil ont été retirées ; la bulle
   reste, elle sert encore à l'aperçu de l'espace prof. */
.la-motion .la-cohort .la-bubble{
  opacity:0;
  transform:translate3d(0,10px,0) scale(.97);
  transform-origin:left bottom;
  transition:opacity 340ms var(--la-ease-out),transform 420ms var(--la-ease-spring);
}
.la-motion .la-cohort .la-bubble.is-shown{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   4. Sources
   -------------------------------------------------------------------------- */
.la-motion .la-source{
  opacity:0;
  transform:translate3d(-20px,0,0);
  transition:opacity 480ms var(--la-ease-out),transform 480ms var(--la-ease-out);
}
.la-motion .la-source.is-shown{opacity:1;transform:none}

.la-motion .la-outcome{
  opacity:0;
  transform:translate3d(20px,0,0);
  transition:opacity 420ms var(--la-ease-out),transform 420ms var(--la-ease-out);
}
.la-motion .la-outcome.is-shown{opacity:1;transform:none}

.la-motion .la-arrow line{stroke-dasharray:48;stroke-dashoffset:48;transition:stroke-dashoffset 480ms ease}
.la-motion .la-arrow polyline{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset 280ms ease 380ms}
.la-motion .la-arrow.is-drawn line,
.la-motion .la-arrow.is-drawn polyline{stroke-dashoffset:0}

@keyframes la-pulse{
  0%,100%{transform:scale(1)}
  45%{transform:scale(1.045)}
}
.la-motion .la-sources-hub{opacity:0;transform:scale(.94);transition:opacity 420ms var(--la-ease-out),transform 420ms var(--la-ease-out)}
.la-motion .la-sources-hub.is-shown{opacity:1;transform:none}
.la-motion .la-sources-hub.is-pulsing{animation:la-pulse 760ms var(--la-ease-out)}

/* --------------------------------------------------------------------------
   5. Barres de maîtrise (écoles)
   -------------------------------------------------------------------------- */
.la-motion .la-bar-fill{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 920ms var(--la-ease-out);
  transition-delay:var(--la-d,0ms);
}
.la-motion .la-bar-fill.is-filled{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   6. Mascotte de l'appel final
   -------------------------------------------------------------------------- */
@keyframes la-hop{
  0%{transform:translate3d(0,0,0) scale(1)}
  28%{transform:translate3d(0,-16px,0) scale(1.04)}
  55%{transform:translate3d(0,0,0) scale(.97)}
  78%{transform:translate3d(0,-5px,0) scale(1.01)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.la-final-mascot{display:inline-flex}
.la-motion .la-final-mascot.is-hopping{animation:la-hop 680ms var(--la-ease-out)}

/* --------------------------------------------------------------------------
   7. Mascotte compagnon
   La transformation est pilotée image par image par js/landing/companion.js :
   le CSS ne gère que l'opacité et les bulles.
   -------------------------------------------------------------------------- */
@keyframes la-dizzy{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-14deg)}
  75%{transform:rotate(14deg)}
}
.la-motion .la-companion{display:block;opacity:0;pointer-events:none;transition:opacity 220ms ease}
.la-motion .la-companion.is-visible{opacity:1;pointer-events:auto}
.la-motion .la-companion.is-dizzy .la-mascot{animation:la-dizzy 520ms ease-in-out 2}
.la-companion-bubble{transform:translate3d(10px,0,0) scale(.96);transform-origin:right center;transition:opacity 260ms ease,transform 320ms var(--la-ease-spring)}
.la-companion-bubble.is-shown{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   8. Mouvement réduit — filet de sécurité
   js/landing/main.js ne pose déjà pas `la-motion` dans ce cas ; ce bloc
   neutralise malgré tout toute transition ou animation résiduelle.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .la-motion [data-reveal],
  .la-motion [data-reveal][data-state="out"]{opacity:1;transform:none}
  .la-motion .la-word>span,
  .la-motion .la-hero-badge,
  .la-motion .la-hero-eyebrow,
  .la-motion .la-hero-lede,
  .la-motion .la-hero-actions,
  .la-motion .la-source,
  .la-motion .la-outcome,
  .la-motion .la-sources-hub,
  .la-motion .la-cohort .la-bubble{opacity:1;transform:none}
  .la-motion .la-bar-fill{transform:none}
  .la-motion .la-arrow line,
  .la-motion .la-arrow polyline{stroke-dashoffset:0}
  .la-companion{display:none!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}