/* ═══════════════════════════════════════════════════════════════════════════
   MFXT — couche mouvement v1
   ---------------------------------------------------------------------------
   Tout ce qui bouge vit ici, séparé des tokens (mfxt.css) pour qu'on puisse
   l'alléger d'un seul endroit si une page doit rester sobre.

   RÈGLES DE PERFORMANCE, non négociables :
     · on n'anime QUE transform et opacity (jamais top/left/width/height) ;
     · backdrop-filter uniquement sur des éléments fixed/sticky ;
     · will-change posé seulement sur ce qui bouge réellement, et retiré après ;
     · tout est neutralisé sous prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barre de progression de lecture ──────────────────────────────────────── */
.mx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--mx-up),#5FFFB8);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ── Révélation générique (surcharge la version de base, courbe plus tenue) ── */
.mx-rv{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .9s cubic-bezier(.22,.61,.21,1),transform .9s cubic-bezier(.22,.61,.21,1);
}
.mx-rv.in{opacity:1;transform:none}

/* ── Bouton magnétique : le fond suit le curseur, l'étiquette reste nette ── */
.mx-btn{position:relative;overflow:hidden;isolation:isolate}
.mx-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.16),transparent 62%);
  transition:opacity .4s ease;
}
.mx-btn-p::before{background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
             rgba(11,12,14,.14),transparent 62%)}
.mx-btn:hover::before{opacity:1}

/* ── Projecteur au survol des cartes ──────────────────────────────────────── */
.mx-spot{position:relative}
.mx-spot::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(52,211,156,.07),transparent 60%);
}
.mx-spot:hover::after{opacity:1}

/* ── Chiffres animés : largeur stable pendant le comptage ─────────────────── */
.mx-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ── Pastille « données d'exemple » ───────────────────────────────────────── */
.mx-sample{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:4px 10px;font-family:var(--mx-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mx-ink-3);
  border:1px solid var(--mx-hair);background:var(--mx-surface-2);
}

/* ── Point pulsant en bout de courbe ──────────────────────────────────────── */
@keyframes mx-ping{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
.mx-ping{transform-box:fill-box;transform-origin:center;animation:mx-ping 2.4s ease-out infinite}

/* ── Respect strict des préférences système ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .mx-rv{opacity:1!important;transform:none!important;transition:none!important}
  .mx-ping{animation:none}
  .mx-progress{display:none}
  .mx-btn::before,.mx-spot::after{display:none}
}