/* Apparition — des éléments qui apparaissent quand on les atteint.

   Un élément marqué .apparition est invisible, un peu plus bas que sa place,
   et vient s'y poser en fondu quand il entre dans l'écran. Une fois, jamais
   deux. Dans un conteneur .apparition-cascade, ses enfants marqués
   apparaissent l'un après l'autre, à quelques dizaines de millisecondes
   d'écart. Deux fichiers : cette feuille, et apparition.js qui pose les
   classes.

   Trois classes, un attribut :

     .apparition           l'élément à faire apparaître. Il occupe sa place
                           dès le départ : on n'anime que l'opacité et une
                           translation, jamais la mise en page.
     .apparition-cascade   un conteneur ; ses .apparition apparaissent en
                           cascade. data-apparition-pas="80" règle l'écart
                           (en ms).
     .apparition--vue      posée par le script quand l'élément est entré
                           dans l'écran. C'est elle qui déclenche.

   ── Le point à ne pas défaire ─────────────────────────────────────────────
   Rien n'est caché tant que le script n'a pas posé .apparition-prete sur
   <html>. C'est ce qui rend la brique sûre : sans JavaScript, ou si le
   script échoue, tout est visible, et personne ne lit une page vide. Le
   script pose cette classe au chargement, juste avant d'observer les
   éléments ; et il ne la pose PAS sous « moins d'animations », où rien ne
   doit bouger. Si vous cachez les éléments par défaut dans la feuille, vous
   perdez les deux.

   Tout ce qui se règle passe par les variables ci-dessous : posez-les sur
   .apparition, sur :root, ou sur une classe modificatrice — et liez cette
   feuille AVANT la vôtre, pour que vos réglages l'emportent. */

.apparition {
  --apparition-distance: 12px;          /* d'où l'élément vient, vers le haut */
  --apparition-duree: 500ms;            /* le fondu */
  --apparition-courbe: cubic-bezier(0.33, 1, 0.68, 1);
  --apparition-delai: 0ms;              /* posé par le script dans une cascade, ou par data-apparition-delai */
}

.apparition-prete .apparition {
  opacity: 0;
  transform: translateY(var(--apparition-distance));
  transition:
    opacity var(--apparition-duree) var(--apparition-courbe) var(--apparition-delai),
    transform var(--apparition-duree) var(--apparition-courbe) var(--apparition-delai);
}
.apparition-prete .apparition.apparition--vue {
  opacity: 1;
  transform: none;
}

/* Sous « moins d'animations », le script ne pose pas .apparition-prete ;
   ceci couvre le cas où la préférence change en cours de visite. */
@media (prefers-reduced-motion: reduce) {
  .apparition-prete .apparition {
    opacity: 1;
    transform: none;
    transition: none;
  }
}