/* ============================================================================
   ANIMATIONS — uniquement `transform` et `opacity`.
   ============================================================================
   Toute autre propriété (largeur, hauteur, marge, position, ombre) force le
   navigateur à recalculer la mise en page à chaque image : la page saccade et
   le délai de réponse aux clics se dégrade. Ces deux propriétés-là sont les
   seules que le compositeur traite hors du fil principal.
   ========================================================================== */

/* ── Révélation au défilement ──────────────────────────────────────────────
   L'état masqué est SCOPÉ SOUS `html.js` — classe posée par le script lui-même.
   Sans script, la règle n'existe pas et le contenu reste visible : un bloc à
   `opacity: 0` livré sans cette garde n'est pas une animation, c'est du
   contenu que rien ne rend accessible si le script échoue. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-sortie), transform 0.7s var(--ease-sortie);
}
.js .reveal.est-visible { opacity: 1; transform: none; }

/* Décalage en cascade dans une même grille. Court : au-delà de ~80 ms par
   élément, l'attente devient perceptible et la page paraît lente. */
.js .reveal:nth-child(2) { transition-delay: 60ms; }
.js .reveal:nth-child(3) { transition-delay: 120ms; }
.js .reveal:nth-child(4) { transition-delay: 180ms; }

/* ── Le couloir de survie — la signature de la page ────────────────────────
   Les deux murs du couloir se resserrent une fois, lentement, au chargement.
   Ce n'est pas un ornement : c'est la démonstration, avant même la première
   règle lue, que la marge d'un compte se referme. L'animation ne joue qu'UNE
   fois (`forwards`), elle ne boucle pas — un mouvement continu exigerait un
   bouton pause (WCAG 2.2.2) et distrairait de la lecture. */
@keyframes couloir-resserre {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.62); }
}
.js .couloir__marge {
  transform-origin: center;
  animation: couloir-resserre 2.4s var(--ease-sortie) 0.5s both;
}

/* Trait qui se dessine : la longueur du tracé est posée en JS, seule
   `stroke-dashoffset` est animée. */
@keyframes trace {
  to { stroke-dashoffset: 0; }
}
.js .trace-au-scroll.est-visible path[data-trace] {
  animation: trace 1.5s var(--ease-sortie) forwards;
}

/* ── Survol des cartes ─────────────────────────────────────────────────────
   Deux pixels, pas huit. Un soulèvement marqué au survol est l'un des gestes
   les plus reconnaissables des pages produites en série ; discret, il confirme
   l'interactivité sans se faire remarquer. */
.carte--survol { will-change: auto; }