/* anim-listes.css · animations des pages listes (/etudes, /veille)
 *
 * Reprend les effets de la bibliothèque Vibe Animation, sans GSAP : le site
 * tient ses cinq moments de home en 8 Ko sans dépendance, on ne change pas
 * d'architecture pour deux pages de liste.
 *
 * Cinq effets, chacun justifié par un usage :
 *   1. Cascade au scroll, par rangée. Sur 139 cartes, une apparition en bloc
 *      est illisible ; une cascade donne un sens de lecture.
 *   2. Survol qui isole. Sur une grille dense, éteindre les voisines aide
 *      réellement à se concentrer sur une fiche.
 *   3. Bouton qui s'enfonce. Ces pages sont faites de filtres, le clic doit
 *      se sentir.
 *   4. Soulignement typographique au survol des liens.
 *
 * Le point « veille active » n'est pas ici : le site l'anime déjà nativement
 * (.live-dot dans css/system.css). On ne double pas une animation existante.
 *
 * Tout s'annule si l'utilisateur a demandé moins d'animations.
 */

/* ── 1 · cascade au scroll ─────────────────────────────────────────────── */
.casc {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .62s cubic-bezier(.22, 1, .36, 1),
    transform .62s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--casc-d, 0ms);
  will-change: opacity, transform;
}
.casc.casc-vu { opacity: 1; transform: none; }

/* ── 2 · survol qui isole ──────────────────────────────────────────────── */
.liste-isole > * { transition: opacity .28s ease, transform .28s ease, box-shadow .28s ease; }
.liste-isole.survol > *:not(.est-survolee) { opacity: .48; }
.liste-isole .est-survolee { transform: translateY(-4px); z-index: 2; position: relative; }

html[data-theme="light"] .liste-isole .est-survolee { box-shadow: 0 14px 38px rgba(15, 21, 48, .10); }
html:not([data-theme="light"]) .liste-isole .est-survolee { box-shadow: 0 14px 38px rgba(0, 0, 0, .34); }

/* ── 3 · bouton qui s'enfonce ──────────────────────────────────────────── */
.filter-btn, .filter-decade-btn, .filter-niveau-btn, .filter-flux-btn {
  transform: translateZ(0);
  transition: color .22s, border-color .22s, background .22s, transform .13s cubic-bezier(.34, 1.56, .64, 1);
}
.filter-btn:hover, .filter-decade-btn:hover,
.filter-niveau-btn:hover, .filter-flux-btn:hover { transform: translateY(-1px); }
.filter-btn:active, .filter-decade-btn:active,
.filter-niveau-btn:active, .filter-flux-btn:active { transform: scale(.96); transition-duration: .06s; }

/* ── 4 · soulignement typographique ────────────────────────────────────── */
.souligne-glisse {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .32s cubic-bezier(.22, 1, .36, 1);
}
a:hover > .souligne-glisse,
.souligne-glisse:hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .casc { opacity: 1 !important; transform: none !important; transition: none !important; }
  .liste-isole > *, .liste-isole.survol > *:not(.est-survolee) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .souligne-glisse { transition: none; }
  .filter-btn, .filter-decade-btn, .filter-niveau-btn, .filter-flux-btn { transition: color .2s, border-color .2s, background .2s; }
  .filter-btn:hover, .filter-decade-btn:hover, .filter-niveau-btn:hover, .filter-flux-btn:hover,
  .filter-btn:active, .filter-decade-btn:active, .filter-niveau-btn:active, .filter-flux-btn:active { transform: none; }
}