/* ==========================================================================
   Profilia - Animation des titres de section

   Cascade mot a mot, puis surlignage du mot-cle. Le mouvement souligne le
   sens plutot que de decorer le texte.

   Le titre reste lisible sans JavaScript : l'etat de depart n'est applique
   qu'une fois le decoupage fait, par une classe posee depuis le script. Un
   moteur de recherche ou un lecteur d'ecran voit toujours le titre entier.
   ========================================================================== */

.pf-anim__w {
  display: inline-block;
  will-change: transform, opacity;
}

.pf-anim--pret .pf-anim__w {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base, 320ms) var(--ease-out, cubic-bezier(.2, .8, .2, 1)),
    transform var(--dur-base, 320ms) var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
.pf-anim--vu .pf-anim__w {
  opacity: 1;
  transform: none;
}

/* Mot-cle : le fond cyan pale se deploie une fois la cascade terminee. */
.pf-anim__cle {
  position: relative;
  display: inline-block;
}
.pf-anim__cle::before {
  content: "";
  position: absolute;
  left: -5px; right: -5px; top: 4%; bottom: 8%;
  background: var(--cyan-100, #DCF3F6);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
}
.pf-anim--pret .pf-anim__cle::before {
  transition: transform 450ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)) var(--pf-anim-fin, 300ms);
}
.pf-anim--vu .pf-anim__cle::before {
  transform: scaleX(1);
}
.pf-anim__cle > .pf-anim__w {
  position: relative;
}

/* Mouvement reduit : le titre s'affiche d'emblee, sans transition. */
@media (prefers-reduced-motion: reduce) {
  .pf-anim--pret .pf-anim__w {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pf-anim--pret .pf-anim__cle::before {
    transform: scaleX(1);
    transition: none;
  }
}

/* ==========================================================================
   Variante du titre principal

   Le H1 est le plus grand element de l'ecran, donc celui que Google mesure
   pour le rendu du plus grand contenu. Un texte a opacite nulle est ignore
   par cette mesure : le masquer 400 ms repousserait la metrique dautant.
   Ici seule la position bouge, le texte est peint des la premiere image.
   ========================================================================== */

.pf-anim--h1.pf-anim--pret .pf-anim__w {
  opacity: 1;
  transform: translateY(16px);
  transition: transform 520ms var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
.pf-anim--h1.pf-anim--vu .pf-anim__w { transform: none; }

/* Les mots montent derriere une ligne invisible plutot que de flotter : le
   masque donne l'appui que l'opacite ne fournit plus. */
.pf-anim--h1 .pf-anim__ligne {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
}

/* Sur le teal du hero, un aplat cyan pale derriere du texte blanc serait
   illisible. L'accent devient un filet cyan clair sous le mot-cle, le meme
   signe que sous l'onglet actif du menu. */
.pf-hero__top .pf-anim__cle::before,
.pf-anim--h1 .pf-anim__cle::before {
  left: 0; right: 0; top: auto; bottom: -2px;
  height: 4px;
  background: var(--cyan-300, #7FE3F0);
  border-radius: 3px;
}