/* ==========================================================================
   05-ANIMATIONS.CSS — Le mouvement du site
   --------------------------------------------------------------------------
   Règle de base : l'état FINAL est l'état par défaut. Rien n'est caché tant
   que la classe .anim n'est pas posée sur <html> par site.js, et elle n'est
   posée que si le visiteur n'a pas demandé de réduire les animations.
   Sans JavaScript, ou en reduced-motion, le site est immédiatement complet.

   Aucun détournement du défilement (scroll-jacking) : la base de règles UX
   le signale comme cause de nausée. Le mouvement suit le défilement, il ne
   le confisque jamais.
   ========================================================================== */

/* === REVELATION D'UN BLOC ================================================= */

.anim [data-rev] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-moyen) var(--ease-out),
              transform var(--d-moyen) var(--ease-out);
}
.anim [data-rev].est-vu { opacity: 1; transform: none; }

/* Décalage en cascade pour les éléments d'une même série. */
.anim [data-rev-delai="1"] { transition-delay: 70ms;  }
.anim [data-rev-delai="2"] { transition-delay: 140ms; }
.anim [data-rev-delai="3"] { transition-delay: 210ms; }
.anim [data-rev-delai="4"] { transition-delay: 280ms; }
.anim [data-rev-delai="5"] { transition-delay: 350ms; }


/* === REVELATION D'UN TITRE, LIGNE PAR LIGNE =============================== */
/* Chaque ligne est enveloppée par site.js dans .ligne > .ligne-i.
   La ligne masque, l'intérieur monte. C'est l'effet le plus visible du site
   et il ne coûte qu'une transformation. */

.ligne { display: block; overflow: hidden; }
.ligne-i { display: block; }

.anim [data-titre] .ligne-i {
  transform: translateY(105%);
  transition: transform var(--d-long) var(--ease-out);
}
.anim [data-titre].est-vu .ligne-i { transform: none; }

.anim [data-titre].est-vu .ligne:nth-child(1) .ligne-i { transition-delay: 0ms;   }
.anim [data-titre].est-vu .ligne:nth-child(2) .ligne-i { transition-delay: 90ms;  }
.anim [data-titre].est-vu .ligne:nth-child(3) .ligne-i { transition-delay: 180ms; }
.anim [data-titre].est-vu .ligne:nth-child(4) .ligne-i { transition-delay: 270ms; }


/* === FILET QUI SE TRACE =================================================== */

.anim [data-trait] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-long) var(--ease-out);
}
.anim [data-trait].est-vu { transform: scaleX(1); }


/* === IMAGE QUI SE DEVOILE ================================================= */
/* Un volet remonte sur l'image et la découvre. */

.anim [data-photo] .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gris-surface);
  transform-origin: 50% 100%;
  transition: transform var(--d-long) var(--ease-out);
  z-index: 2;
}
.anim [data-photo].est-vu .photo::after { transform: scaleY(0); }

/* Léger décalage de l'image elle-même : elle se stabilise en arrivant. */
.anim [data-photo] .photo img { transform: scale(1.08); }
.anim [data-photo].est-vu .photo img { transform: scale(1); }


/* === COMPTEUR ============================================================= */
/* La valeur est incrémentée par site.js ; ici on empêche seulement le
   ballottement de la largeur pendant le comptage. */

[data-compteur] { font-variant-numeric: tabular-nums; }


/* === BADGE QUI SUIT LE CURSEUR ============================================ */
/* Sur les grandes photos cliquables, en pointeur fin uniquement.
   Purement décoratif : jamais le seul moyen de comprendre qu'on peut cliquer. */

.badge-curseur {
  position: fixed;
  top: 0; left: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--blanc);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity var(--d-court) var(--ease),
              transform var(--d-court) var(--ease);
}
.badge-curseur.est-actif { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (hover: none), (pointer: coarse) { .badge-curseur { display: none; } }


/* === ANIMATIONS REDUITES ================================================== */
/* Filet de sécurité CSS, en plus du test JavaScript. Tout état masqué
   redevient visible, toute boucle s'arrête. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .anim [data-rev],
  .anim [data-titre] .ligne-i,
  .anim [data-trait] { opacity: 1 !important; transform: none !important; }

  .anim [data-photo] .photo::after { display: none; }
  .anim [data-photo] .photo img { transform: none !important; }

  .bande-piste { animation: none !important; }
  .badge-curseur { display: none; }
}