/* Effets communs aux propositions de page d'accueil (voir effets.js). Seulement avec .fx,
   que effets.js ne pose pas si le système demande moins d'animations. */

/* Titres mot par mot : chaque mot monte de derrière son cache. */
.fx .fx-mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .1em; margin: -.06em -.02em -.1em; }
.fx .fx-mot > span {
  display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom;
  animation: fx-mot .95s cubic-bezier(.16, .84, .24, 1) forwards; animation-delay: calc(var(--i) * 60ms + var(--fx-delai, 120ms));
}
@keyframes fx-mot { to { transform: none; } }

/* Apparition au défilement. */
.fx [data-revele] {
  opacity: 0; transform: translateY(34px) scale(.985); filter: blur(4px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.fx [data-revele].vu { opacity: 1; transform: none; filter: none; }

/* Halo qui suit la souris (l'élément doit être en position relative et couper ce qui dépasse). */
.fx-lueur {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--fx-lueur, rgba(169, 207, 98, .16)), transparent 65%);
}
.fx-lueur-on > .fx-lueur { opacity: 1; }

/* Inclinaison vers la souris. */
[data-incline] { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.fx-incline-on[data-incline] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition-duration: .15s; }

/* Reflet qui balaie les boutons au survol. */
[data-brille] { position: relative; overflow: hidden; isolation: isolate; }
[data-brille]::after {
  content: ""; position: absolute; inset: -2px auto -2px -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
}
.fx [data-brille]:hover::after { animation: fx-reflet .85s cubic-bezier(.2, .7, .2, 1); }
@keyframes fx-reflet { 0% { opacity: 1; transform: skewX(-18deg) translateX(0); } 100% { opacity: 1; transform: skewX(-18deg) translateX(420%); } }