/* Effetto ZIP – versione PRO (solo .btn--fx-zip) */
.btn.btn--fx-zip{
  position: relative;
  overflow: hidden;
  z-index: 0;          /* crea una stacking context locale */
  isolation: isolate;  /* optional: evita interferenze esterne */
}

/* Filler: STA SOTTO al testo grazie a z-index:-1 */
.btn.btn--fx-zip::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;               /* 👈 sotto al contenuto del bottone */
  transform: translateY(100%);
  transition: transform .35s ease;
  pointer-events:none;

  background: var(--accent);
  background-image: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--accent) 92%, white) 0%,
    var(--accent) 100%
  );
  box-shadow: inset 0 0 0 1px color-mix(in oklab, black 12%, var(--accent));
}

/* Animazione attiva */
.btn.btn--fx-zip:hover::before,
.btn.btn--fx-zip:focus-visible::before{
  transform: translateY(0%);
}

/* Contrasto testo quando il filler copre */
.btn.btn--fx-zip:hover,
.btn.btn--fx-zip:focus-visible{
  color:#fff;
}

/* Varianti coerenti con i nostri bottoni */
.btn.btn--fx-zip.btn--outline{
  --btn-bg: transparent;
  --btn-ink: var(--accent);
}
.btn.btn--fx-zip.btn--ghost{
  --btn-bg: transparent;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .btn.btn--fx-zip::before{ transition: none; }
}