/* =========================================================
   Pouzolles · animations (étape 2)
   Chaque animation ne joue qu'une fois. Rien en boucle.
   Seulement transform, opacity et clip-path.
   Mouvement réduit : fondus courts, aucun déplacement.
   ========================================================= */

/* ---------- 1. Entrée du héros et des intros de page (au chargement, CSS seul) ---------- */
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.heros__contenu > *,
.intro-page .conteneur > * {
  animation: entree 600ms var(--ease-out) both;
}
.heros__contenu > :nth-child(1) { animation-delay: 350ms; }
.heros__contenu > :nth-child(2) { animation-delay: 420ms; }
.heros__contenu > :nth-child(3) { animation-delay: 490ms; }
.heros__contenu > :nth-child(4) { animation-delay: 560ms; }
.heros__contenu > :nth-child(5) { animation-delay: 630ms; }
/* Le nom sort de derrière la haie, une fois */
@keyframes leve { from { opacity: 0; transform: translateY(9%); } to { opacity: 1; transform: none; } }
.heros__nom { animation: leve 1100ms var(--ease-out) 100ms both; }
/* Le grand titre reste visible dès le premier affichage (il ne fait que monter) :
   pas de fondu depuis 0, qui retarderait l'affichage principal mesuré par Lighthouse (LCP) */
@keyframes entree-titre {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
.intro-page .conteneur > h1 { animation-name: entree-titre; animation-duration: 800ms; }
.intro-page .conteneur > :nth-child(2) { animation-delay: 70ms; }
.intro-page .conteneur > :nth-child(3) { animation-delay: 140ms; }
.intro-page .conteneur > :nth-child(4) { animation-delay: 210ms; }
.intro-page .conteneur > :nth-child(5) { animation-delay: 280ms; }

/* ---------- 2. Apparition au défilement (js/animations.js pose data-anim) ---------- */
/* Seuls les éléments sous la ligne de flottaison au chargement sont masqués : sans JS, tout reste visible. */
[data-anim] {
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
[data-anim="attente"] { opacity: 0; transform: translateY(16px); }

/* La coupe : le trait de titre se taille de gauche à droite, puis le titre apparaît */
[data-anim] .titre-section h2::before,
.titre-section h2[data-anim]::before,
.trait[data-anim]::before {
  transform-origin: left;
  transition: transform 450ms var(--ease-in-out);
}
.titre-section h2[data-anim="attente"]::before,
.trait[data-anim="attente"]::before { transform: scaleX(0); }
.titre-section h2[data-anim="attente"], .trait[data-anim="attente"] { transform: translateY(10px); }
.titre-section h2[data-anim="vu"], .trait[data-anim="vu"] { transition-delay: 120ms; }
.titre-section h2[data-anim="vu"]::before, .trait[data-anim="vu"]::before { transition-delay: 0ms; }

/* Bandes de matière : un seul balayage, comme un passage de taille-haie */
.matiere[data-anim] { transition: clip-path 650ms var(--ease-in-out); }
.matiere[data-anim="attente"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.matiere[data-anim="vu"] { clip-path: inset(0 0 0 0); }

/* Mention crédit d'impôt : son trait se trace quand la carte arrive */
.etiquette::before { transform-origin: left; transition: transform 400ms var(--ease-out) 250ms; }
[data-anim="attente"] .etiquette::before { transform: scaleX(0); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .heros__contenu > *, .heros__nom,
  .intro-page .conteneur > * { animation: fondu 250ms ease both; animation-delay: 0ms !important; }
  .intro-page .conteneur > h1 { animation: none; }
  [data-anim] { transition: opacity 250ms ease; transition-delay: 0ms !important; }
  [data-anim="attente"],
  .titre-section h2[data-anim="attente"], .trait[data-anim="attente"] { transform: none; }
  .titre-section h2[data-anim="attente"]::before, .trait[data-anim="attente"]::before,
  [data-anim="attente"] .etiquette::before { transform: none; }
  .matiere[data-anim="attente"] { clip-path: none; }
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }