/* ==========================================================================
   009 — Jelly Press · boutons
   Squash & stretch gélatineux, 100 % CSS. À l'enfoncement (:active) le
   bouton s'écrase vite (scaleX ↑, scaleY ↓, ancré au sol). Au relâchement,
   la transition de retour utilise un VRAI ressort amorti encodé en
   easing linear() (ζ ≈ 0.3, ~3 oscillations décroissantes) : comme scaleX
   et scaleY interpolent en sens opposés avec la même courbe, le rebond
   est naturellement en contre-phase — effet gelée authentique.
   Fallback (navigateurs sans linear()) : cubic-bezier avec un overshoot.
   :active répond aussi au clavier (Espace maintenu sur un <button>).
   Préfixe de classes : .jelly-btn (abréviation du slug jelly-press).
   ========================================================================== */

.jelly-btn {
  --jelly-btn-accent: var(--ml-accent, #7c8cff);
  --jelly-btn-squash-x: 1.14; /* écrasement horizontal au press */
  --jelly-btn-squash-y: 0.82; /* écrasement vertical au press */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.1rem;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--jelly-btn-accent) 88%, var(--ml-fg, #e8eaf2)),
    var(--jelly-btn-accent)
  );
  color: var(--ml-bg, #0d1017);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 100%; /* la gelée est posée sur le sol */
  /* Retour : ressort amorti. Fallback un seul overshoot… */
  transition: transform 0.55s cubic-bezier(0.34, 1.8, 0.64, 1);
  /* …puis le vrai ressort pour les navigateurs qui savent (ω ≈ 21 rad/s,
     ζ ≈ 0.3 → rebonds à 141 %, 83 %, 107 %, 97 %, 101 % de la cible). */
  transition: transform 0.95s linear(
    0, 0.425, 0.984, 1.353, 1.416, 1.25, 1.019, 0.861, 0.828, 0.892,
    0.987, 1.054, 1.071, 1.047, 1.008, 0.979, 0.971, 0.98, 0.996,
    1.008, 1.012, 1.009, 1.002, 0.997, 0.995, 0.996, 1
  );
}

.jelly-btn:hover {
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--jelly-btn-accent) 70%, transparent);
}

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

/* Enfoncement : rapide et franc — la mollesse est réservée au retour. */
.jelly-btn:active {
  transform: scale(var(--jelly-btn-squash-x), var(--jelly-btn-squash-y));
  transition: transform 0.11s cubic-bezier(0.3, 0.6, 0.4, 1);
}

/* --- Variantes de taille ------------------------------------------------------ */

.jelly-btn--lg {
  padding: 1.15rem 2.7rem;
  font-size: 1rem;
  border-radius: 16px;
}

.jelly-btn--sm {
  --jelly-btn-squash-x: 1.2; /* petit volume : on exagère un peu */
  --jelly-btn-squash-y: 0.76;
  padding: 0.65rem 1.25rem;
  font-size: 0.8rem;
  border-radius: 10px;
}

/* Variante bicolore pour la démo. */
.jelly-btn--alt {
  --jelly-btn-accent: var(--ml-accent-2, #2dd4bf);
}

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

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

.jelly-btn-demo__row {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .jelly-btn {
    transition: transform 0.15s ease-out; /* plus de ressort */
  }

  .jelly-btn:active {
    transform: scale(0.98); /* press discret, sans squash */
    transition: transform 0.1s ease-out;
  }
}