/* Layer: feature-specific */
/* Scope: gomb-hover „függöny” animáció – LEVÁLASZTHATÓ: a két link egyike
   sem kötelező; e fájl nélkül a gombok statikusak maradnak. Végső termékben
   ezt REX is átveheti (lásd a handoff animáció-leírását). */
/* Used by: prototypes/webshop/*.html, prototypes/gomb-animaciok.html */

/* Függöny-effekt: az inverz szín a gomb közepe felől nyílik kifelé,
   rugós (túlvetéses) időzítéssel – gyorsul, majd rugózik. */
.btn { background-repeat: no-repeat; background-position: center; }

.btn-primary, .btn-secondary {
  background-image: linear-gradient(var(--c3-elo), var(--c3-elo));
  background-size: 0% 100%;
  transition:
    background-size 340ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 140ms linear,
    border-color 140ms linear;
}

.btn-primary:hover {
  background-color: var(--c3);
  background-image: linear-gradient(var(--c3-elo), var(--c3-elo));
  background-size: 100% 100%;
  color: var(--c2);
  border-color: var(--c3);
}
.btn-secondary:hover {
  background-color: var(--c1);
  background-image: linear-gradient(var(--c3-elo), var(--c3-elo));
  background-size: 100% 100%;
  color: var(--c2);
  border-color: var(--c3);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary { transition: none; }
}