/* ═══════════════════════════════════════════════════════════════
   LDNR · Reveal global au scroll — toutes les pages
   ═══════════════════════════════════════════════════════════════
   Classes utilisables partout, y compris sur les blocs Gutenberg
   (Avancé → Classe(s) CSS additionnelle(s)) :

     reveal              apparition au scroll (fade + translation)
     reveal-1 … reveal-5 délai en cascade (.08s à .40s)

   Géré par scroll/ldnr-scroll.js (IntersectionObserver) : ajoute
   .is-in à l'entrée dans le viewport, puis retire les classes une
   fois l'animation jouée — les transitions propres de l'élément
   (hover, etc.) reprennent alors la main.

   NE PAS déplacer dans colors.css : colors.css est chargé comme
   style de l'éditeur Gutenberg (add_editor_style), les blocs y
   deviendraient invisibles. Ce fichier est front uniquement.
   ═══════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s),
    transform .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── Combiné avec le liquid glass (.lg) ──────────────────────────
   .lg (liquid-glass.css) définit AUSSI sa propre transition
   (background-color, box-shadow) sur le même élément — "transition"
   n'est pas additif entre deux règles, la dernière chargée écrase
   entièrement l'autre. Résultat sans cette règle : liquid-glass.css
   se charge après reveal.css → .lg gagnait → plus aucune transition
   d'opacity/transform → le reveal devenait instantané, delay ignoré.
   Sélecteur à 2 classes = spécificité plus forte que ".lg" seul (1
   classe) → gagne quel que soit l'ordre de chargement des fichiers. */
.reveal.lg {
  transition:
    opacity          .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s),
    transform        .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s),
    background-color .4s ease,
    box-shadow        .4s ease;
}

.reveal-1 { --reveal-delay: .08s; }
.reveal-2 { --reveal-delay: .16s; }
.reveal-3 { --reveal-delay: .24s; }
.reveal-4 { --reveal-delay: .32s; }
.reveal-5 { --reveal-delay: .40s; }
.reveal-6 { --reveal-delay: .48s; }
.reveal-7 { --reveal-delay: .56s; }
.reveal-8 { --reveal-delay: .64s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}