/* ==========================================================================
   002 — Magnetic Button · boutons
   Bouton attiré vers le curseur dans un rayon d'approche, retour élastique
   en spring (physique dans anim.js). Le label bouge un peu plus que le
   bouton pour un léger parallax. Les transforms sont pilotés par le JS —
   ne pas ajouter de transition `transform` ici.
   ========================================================================== */

.magnetic-btn {
  --magnetic-btn-accent: var(--ml-accent, #7c8cff);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.8rem;
  border: 1px solid color-mix(in srgb, var(--ml-fg, #e8eaf2) 14%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(
      130% 160% at 50% -20%,
      color-mix(in srgb, var(--magnetic-btn-accent) 18%, transparent) 0%,
      transparent 60%
    ),
    var(--ml-surface, #151a24);
  color: var(--ml-fg, #e8eaf2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition:
    border-color 0.45s ease,
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.magnetic-btn:hover,
.magnetic-btn:focus-visible {
  border-color: color-mix(in srgb, var(--magnetic-btn-accent) 55%, transparent);
  box-shadow: 0 14px 44px -14px color-mix(in srgb, var(--magnetic-btn-accent) 55%, transparent);
}

.magnetic-btn:focus-visible {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 3px;
}

.magnetic-btn__label {
  display: inline-block;
  will-change: transform;
  pointer-events: none;
}

/* --- Wrapper de démo (galerie) -------------------------------------------- */

.magnetic-btn-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.magnetic-btn-hint {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ml-muted, #8b91a3);
}

/* --- Accessibilité --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* L'aimantation est désactivée par anim.js ; on neutralise le reste. */
  .magnetic-btn {
    will-change: auto;
    transition: none;
  }

  .magnetic-btn__label {
    will-change: auto;
  }
}