/* Animations d'arrivée et de défilement (partage/animations.js).
   Tout est sous html.anime : sans JS ou en « mouvement réduit », rien n'est caché. */

/* ─── L'en-tête descend, à l'arrivée ─── */
html.anime .entete { animation: descend .8s ease-out both; }
@keyframes descend { from { opacity: 0; transform: translateY(-12px); } }

/* ─── Apparitions ─── */
html.anime [data-apparition] { opacity: 0; }
html.anime [data-apparition].vu { animation: fondu .9s ease-out both; }
html.anime [data-apparition="monte"].vu { animation-name: monte; animation-duration: 1s; }
html.anime [data-apparition].fini { opacity: 1; animation: none; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
/* Pas de transform à l'arrivée : le survol (translateY) reste libre une fois l'animation finie */
@keyframes monte { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; } }

/* ─── La plume : chaque lettre se dévoile de gauche à droite derrière une plume lumineuse ─── */
.mot { white-space: nowrap; }
html.anime [data-plume] { position: relative; display: inline-block; }
html.anime [data-plume] .car {
  display: inline-block;
  /* Le masque s'arrête au bord de la boîte : on l'élargit pour ne pas couper les boucles d'une écriture cursive */
  padding: .3em .35em; margin: -.3em -.35em;
  -webkit-mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
          mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.plume {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--plume-coeur); pointer-events: none;
  box-shadow: 0 0 6px 2px var(--plume-halo), 0 0 22px 6px var(--plume-halo-large);
}

/* ─── La machine à écrire : la place est réservée, les lettres apparaissent une à une ─── */
/* opacity plutôt que visibility : la place est réservée ET le texte reste lisible par les lecteurs d'écran */
html.anime .a-ecrire .car { opacity: 0; }
html.anime .a-ecrire .car.ecrite { opacity: 1; }
.curseur { display: inline-block; position: relative; width: 0; }
.curseur::after { content: "_"; position: absolute; left: 1px; bottom: 0; color: var(--accent); animation: clignote .5s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

/* ─── La construction en glitch ─── */
html.anime [data-glitch] { display: inline-block; }
html.anime [data-glitch] .car { opacity: 0; text-align: center; }
/* Pendant le glitch, chaque lettre garde la largeur de sa lettre finale (width posée en JS) :
   inline-block obligatoire, sinon width ne s'applique pas et le titre tremble */
html.anime [data-glitch].glitch-actif .car { display: inline-block; }
html.anime [data-glitch] .car.surgie { opacity: 1; }
html.anime [data-glitch].glitch-actif { animation: tremble .32s steps(1) infinite; }
@keyframes tremble {
  0%   { transform: none;                         text-shadow: -3px 0 var(--glitch-a), 3px 0 var(--glitch-b); }
  20%  { transform: translate(-3px, 1px) skewX(-6deg); text-shadow: 5px 0 var(--glitch-a), -4px 0 var(--glitch-b); clip-path: inset(10% 0 45% 0); }
  35%  { transform: translate(2px, 0);             text-shadow: -2px 0 var(--glitch-a), 2px 0 var(--glitch-b); clip-path: none; }
  55%  { transform: translate(4px, -1px) skewX(4deg); text-shadow: -6px 0 var(--glitch-a), 6px 0 var(--glitch-b); clip-path: inset(50% 0 5% 0); }
  70%  { transform: none;                         text-shadow: none; clip-path: none; }
  85%  { transform: translate(-1px, 2px);          text-shadow: 3px 0 var(--glitch-a), -3px 0 var(--glitch-b); }
}

/* ─── Le soulignement de l'accroche (accueil) : il se dessine après le titre ─── */
/* clip-path plutôt que scaleX : le dégradé reste en place sous chaque mot pendant que le trait avance */
/* Le trait part quand « la machine » a fini sa construction (classe .construit posée par le glitch) */
html.anime .accroche .souligne::after { clip-path: inset(0 100% 0 0); }
@supports not selector(:has(*)) { html.anime .accroche .souligne::after { clip-path: none; } }   /* vieux navigateurs : trait affiché */
html.anime .accroche .souligne:has(.construit)::after { animation: souligner 1.1s cubic-bezier(.65, 0, .35, 1) .15s both; }
@keyframes souligner { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }