/* === BfastAI — Révélation au défilement, commune à toutes les pages ===========
   Reprend la chorégraphie de la section Services de l'accueil :
     - titres : badge / titre / sous-titre qui basculent en 3D depuis rotateX(90deg),
       l'un après l'autre (0s, .10s, .20s) ;
     - cartes : montée de 150px en fondu, décalée de .09s d'une carte à l'autre.

   Trois classes d'accroche, posées dans le HTML :
     .bf-rh  en-tête de section (conteneur) : son badge .bf-pill, son h1/h2 et son
             sous-titre p basculent ensemble quand l'en-tête entre à l'écran ;
     .bf-rv  titre isolé (h2 d'article, étiquette, contenu d'une Card) : bascule
             seul, avec le même décalage selon sa nature ;
     .bf-rc  carte : monte quand elle entre à l'écran ;
     .bf-rs  sur mesure : reçoit seulement `.is-in`, la page écrit elle-même
             l'animation (cartes Services de l'accueil, #bf-services-anim).
   `.is-in` est posée par assets/reveal.js (en defer). `.bf-rv-on` est posée sur
   <html> avant le premier rendu par l'amorce inline du <head> de chaque page :
   sans script, si reveal.js ne se charge pas (son onerror retire la classe) ou
   en mouvement réduit, rien n'est jamais masqué.

   Des animations plutôt que des transitions : elles ne remplacent pas les
   `transition` propres aux cartes (bordure au survol du blog) et, en
   `backwards`, rendent la main aux styles de l'élément une fois terminées. */

:root{ --bf-rev:cubic-bezier(0.16,1,0.3,1); }

@keyframes bf-rv-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes bf-rv-flip{ from{ transform:rotateX(90deg) } to{ transform:rotateX(0deg) } }
/* titre isolé : pas de parent en perspective, elle est portée par l'élément */
@keyframes bf-rv-flip-solo{
  from{ transform:perspective(900px) rotateX(90deg) }
  to  { transform:perspective(900px) rotateX(0deg) }
}
@keyframes bf-rv-rise{ from{ transform:translateY(150px) } to{ transform:translateY(0) } }

.bf-rh{ perspective:900px; }

/* ---------- Avant l'entrée à l'écran : masqué ---------- */
html.bf-rv-on .bf-rh:not(.is-in) > .bf-pill,
html.bf-rv-on .bf-rh:not(.is-in) > * > .bf-pill,
html.bf-rv-on .bf-rh:not(.is-in) > h1,
html.bf-rv-on .bf-rh:not(.is-in) > h2,
html.bf-rv-on .bf-rh:not(.is-in) > p,
html.bf-rv-on .bf-rv:not(.is-in),
html.bf-rv-on .bf-rc:not(.is-in){ opacity:0; }

@media (prefers-reduced-motion:no-preference){
  /* ---------- Titres ---------- */
  html.bf-rv-on .bf-rh.is-in > .bf-pill,
  html.bf-rv-on .bf-rh.is-in > * > .bf-pill,
  html.bf-rv-on .bf-rh.is-in > h1,
  html.bf-rv-on .bf-rh.is-in > h2,
  html.bf-rv-on .bf-rh.is-in > p{
    transform-origin:50% 100%;
    animation:bf-rv-fade .7s var(--bf-rev) backwards, bf-rv-flip .95s var(--bf-rev) backwards;
  }
  html.bf-rv-on .bf-rv.is-in{
    transform-origin:50% 100%;
    animation:bf-rv-fade .7s var(--bf-rev) backwards, bf-rv-flip-solo .95s var(--bf-rev) backwards;
  }
  html.bf-rv-on .bf-rh.is-in > :is(h1,h2),
  html.bf-rv-on :is(h1,h2).bf-rv.is-in{ animation-delay:.10s; }
  html.bf-rv-on .bf-rh.is-in > p,
  html.bf-rv-on p.bf-rv.is-in{ animation-delay:.20s; }

  /* ---------- Cartes ----------
     --bf-rv-i : rang de la carte parmi celles révélées au même instant (posé par
     le script), pour qu'une rangée arrive en cascade et non d'un bloc. */
  html.bf-rv-on .bf-rc.is-in{
    animation:bf-rv-fade .8s var(--bf-rev) backwards, bf-rv-rise .95s var(--bf-rev) backwards;
    animation-delay:calc(.30s + var(--bf-rv-i, 0) * .09s);
  }
}