/* BeandBus — effets, feuille ADDITIVE
   ═══════════════════════════════════════════════════════════════════════
   Rien ici ne modifie une regle existante : que des ajouts, tous annulables
   en retirant les deux lignes de <link>/<script> de index.html.

   Les recettes viennent de 21st.dev — @asanshay/reveal (opacite + montee +
   flou, stagger, une seule fois) et @ibelick/spotlight — mais AUCUN de ces
   composants n'est installable ici : ils sont tous React + Tailwind +
   Framer Motion, et le site est en HTML statique avec zero appel sortant
   (propriete acquise en 1.19.0, a ne pas perdre pour un effet). Le geste
   est repris, le code est ecrit a la main.

   REGLE DE SURETE : tout est conditionne a `html.fx`, classe posee par le
   JS. Si le script echoue ou ne se charge pas, la page reste exactement
   comme avant — jamais un contenu cache par un effet qui n'arrive pas. */

/* ——— 1 · APPARITION AU DEFILEMENT —————————————————————————————————
   Le bloc monte de 14 px en se defloutant. Volontairement PAS applique au
   formulaire du heros : on n'anime pas le chemin de conversion. */
html.fx .fx-r {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1),
              filter .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--fx-d, 0ms);
}
/* le flou n'est pose que sur les blocs ou il ne cree pas de bloc
   conteneur genant (voir le test `position: sticky` cote JS) */
html.fx .fx-r.fx-blur { filter: blur(7px); }
html.fx .fx-r.fx-in { opacity: 1; transform: none; filter: none; }

/* ——— 2 · COMPTEURS ————————————————————————————————————————————————
   Les chiffres defilent de 0 a leur valeur. `tabular-nums` + une largeur
   reservee par le JS : la ligne ne bouge pas d'un pixel pendant le compte. */
html.fx .fx-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
  text-align: left;
}

/* ——— 3 · REFLET SUR L'APPEL A L'ACTION ————————————————————————————
   Un trait clair traverse le bouton au survol. Uniquement au survol, et
   uniquement sur un pointeur precis : rien sur telephone. */
@media (hover: hover) and (pointer: fine) {
  html.fx #qp-go,
  html.fx .fx-sheen { position: relative; overflow: hidden; }
  html.fx #qp-go::after,
  html.fx .fx-sheen::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg); pointer-events: none; opacity: 0;
  }
  html.fx #qp-go:hover::after,
  html.fx .fx-sheen:hover::after { opacity: 1; animation: fx-sheen .72s ease-out; }
}
@keyframes fx-sheen { from { left: -60%; } to { left: 115%; } }

/* ——— 4 · LUMIERE QUI SUIT LE CURSEUR ——————————————————————————————
   Sur les deux cartes en degrade. `border-radius: inherit` evite d'ajouter
   un `overflow: hidden` qui pourrait rogner un contenu. */
@media (hover: hover) and (pointer: fine) {
  html.fx .fx-spot { position: relative; isolation: isolate; }
  html.fx .fx-spot::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(420px circle at var(--fx-x, 50%) var(--fx-y, 50%),
      rgba(255,255,255,.14), transparent 62%);
    opacity: 0; transition: opacity .32s ease; pointer-events: none; z-index: -1;
  }
  html.fx .fx-spot:hover::before { opacity: 1; }
}

/* ——— 5 · LES TUILES DU MUR DE LOGOS ———————————————————————————————
   Elles n'avaient qu'un changement de bordure. On ajoute un souleve de
   2 px : de quoi signaler que la tuile est un lien vers la fiche. */
@media (hover: hover) and (pointer: fine) {
  html.fx .lw-track .lt { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  html.fx .lw-track .lt:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11,18,32,.10);
  }
}

/* ——— RESPECT DU REGLAGE SYSTEME ————————————————————————————————————
   « Reduire les animations » coupe tout : les blocs sont visibles d'emblee,
   les chiffres sont ecrits d'un coup, plus un seul mouvement. */
@media (prefers-reduced-motion: reduce) {
  html.fx .fx-r,
  html.fx .fx-r.fx-blur { opacity: 1; transform: none; filter: none; transition: none; }
  html.fx #qp-go::after, html.fx .fx-sheen::after,
  html.fx .fx-spot::before { display: none; }
  html.fx .lw-track .lt { transition: none; }
  html.fx .lw-track .lt:hover { transform: none; }
}