/* ============================================================
   LE TEXTE S'ALLUME AU DÉFILEMENT
   Même effet qu'avant — la phrase se révèle de gauche à droite —
   mais obtenu autrement.

   AVANT : chaque caractère était un <span> avec sa propre
   animation liée au défilement. 794 chronomètres à résoudre à
   chaque image. C'est ce qui rendait la page poussive.

   MAINTENANT : un dégradé de masque par bloc, dont on anime la
   position. UNE animation par titre au lieu d'une par lettre.
   Le DOM redevient du texte simple : plus de spans, plus
   d'aria-label de rattrapage, meilleur pour les lecteurs
   d'écran comme pour Google.
   ============================================================ */

@property --balayage{
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@supports (animation-timeline: view()) and (background: paint(x)){
  /* Repli implicite : sans prise en charge de @property, le masque
     n'est jamais posé et le texte reste simplement lisible. */
}

@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){

  .js .accroche__titre,
  .js .section__titre,
  .js .section__lede{
    /* Le masque : opaque jusqu'à --balayage, puis très atténué.
       La zone de transition fait la douceur du balayage. */
    -webkit-mask-image:linear-gradient(100deg,
      #000 0%,
      #000 var(--balayage),
      rgba(0,0,0,var(--lettre-eteinte)) calc(var(--balayage) + 16%),
      rgba(0,0,0,var(--lettre-eteinte)) 100%);
    mask-image:linear-gradient(100deg,
      #000 0%,
      #000 var(--balayage),
      rgba(0,0,0,var(--lettre-eteinte)) calc(var(--balayage) + 16%),
      rgba(0,0,0,var(--lettre-eteinte)) 100%);

    animation:balayer linear both;
    animation-timeline:view();
    animation-range:cover 16% cover 52%;
  }

  /* Le premier écran ne peut pas dépendre du défilement : on n'a
     pas encore défilé. Il s'allume à l'arrivée, une seule fois. */
  .js .accroche__titre{
    animation:balayer var(--t-balayage) var(--courbe) both;
    animation-timeline:auto;
    animation-range:normal;
  }
}
}

@keyframes balayer{
  from{ --balayage: -16% }
  to  { --balayage: 100% }
}