/* =========================================================================
   buttons.css — sloj animacije za sva dugmad na stranici
   Uz buttons.js. Vanilla prijenos ponašanja „liquid metal" dugmeta:
     · metalni odsjaj koji putuje preko dugmeta (u originalu WebGL shader;
       ovdje gradijentna traka — bez biblioteke, bez build koraka)
     · brzina odsjaja prati stanje: mirno → hover → klik (0.6 / 1 / 2.4×)
     · pritisak u dubinu (translateY + scale) s oprugom iz originala
     · talas (ripple) koji kreće tačno s mjesta klika

   Načelo: sloj NE dira boje, oblik ni raspored postojećih dugmadi. Svako
   dugme zadržava svoj identitet — dobiva samo pokret. Zato su vlastita
   pravila stranica jača (koristi se :where(), specifičnost 0) i sve što se
   crta živi u zasebnom djetetu .dpk-btn-fx.
   ========================================================================= */

/* Dijete .dpk-btn-fx se pozicionira po dugmetu; isolation pravi kontekst
   slaganja pa negativni z-index sjeda IZNAD pozadine, a ISPOD teksta —
   isto kao u originalu gdje natpis stoji na translateZ(20px) iznad shadera. */
[data-dpkb]{position:relative;isolation:isolate}

/* Tonovi: svijetli odsjaj na tamnim dugmadima, tamni na svijetlim.
   Ton određuje buttons.js iz stvarne izračunate pozadine. */
[data-dpkb="dark"]{--dpkb-sheen:rgba(255,255,255,.34);--dpkb-rip:rgba(255,255,255,.42)}
[data-dpkb="light"]{--dpkb-sheen:rgba(11,31,51,.18);--dpkb-rip:rgba(11,31,51,.20)}
/* Dugmad bez vlastite pozadine (tekstualna, „ghost") — odsjaj mora biti tiši,
   inače izgleda kao mrlja preko sadržaja iza njega. */
[data-dpkb][data-dpkb-ghost="1"]{--dpkb-sheen:rgba(255,255,255,.16)}
[data-dpkb="light"][data-dpkb-ghost="1"]{--dpkb-sheen:rgba(11,31,51,.10)}

.dpk-btn-fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;
  overflow:hidden;pointer-events:none;contain:paint}

/* ---- metalna traka ------------------------------------------------------
   Kosa traka putuje s lijeva na desno. Traje po --dpkb-dur, a to je jedina
   vrijednost koja se mijenja između mirovanja / hovera / klika. */
.dpk-btn-fx b{position:absolute;top:-70%;bottom:-70%;left:-64%;width:46%;
  background:linear-gradient(100deg,transparent 0%,var(--dpkb-sheen) 46%,var(--dpkb-sheen) 54%,transparent 100%);
  transform:translateX(0) skewX(-18deg);
  animation:dpkb-sweep var(--dpkb-dur,2.9s) linear infinite;
  animation-play-state:paused;opacity:0}

@keyframes dpkb-sweep{
  0%{opacity:0;transform:translateX(0) skewX(-18deg)}
  10%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;transform:translateX(350%) skewX(-18deg)}
}

/* Mirno stanje: traka stoji. Kreće na hover / fokus tipkovnicom, i ubrzava
   pod prstom — 2.9s → 1.5s → 0.6s, isti odnos kao setSpeed(0.6/1/2.4). */
[data-dpkb]:hover .dpk-btn-fx b,
[data-dpkb]:focus-visible .dpk-btn-fx b{animation-play-state:running;--dpkb-dur:1.5s}
[data-dpkb]:active .dpk-btn-fx b{--dpkb-dur:.6s}

/* Glavni pozivi na akciju odsjajuju i bez hovera, ali samo dok su u kadru
   (buttons.js skida data-dpkb-live kad odu s ekrana). */
[data-dpkb][data-dpkb-live="1"] .dpk-btn-fx b{animation-play-state:running}

/* ---- talas na klik ------------------------------------------------------ */
.dpk-btn-rip{position:absolute;border-radius:50%;
  background:radial-gradient(circle,var(--dpkb-rip) 0%,rgba(255,255,255,0) 68%);
  transform:translate(-50%,-50%) scale(0);
  animation:dpkb-rip .62s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes dpkb-rip{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.85}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ---- pritisak -----------------------------------------------------------
   :where() drži specifičnost na nuli, pa dugme koje već ima svoj :active
   (npr. .chip, .cta, .dl) zadržava svoj osjećaj — ovo hvata samo ona koja
   ga nemaju. Opruga je cubic-bezier(.34,1.56,.64,1) iz originala. */
:where([data-dpkb]){transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
:where([data-dpkb]):active{transform:translateY(1px) scale(.985)}

@media (prefers-reduced-motion:reduce){
  .dpk-btn-fx b{animation:none!important;opacity:0!important}
  .dpk-btn-rip{animation-duration:.01ms!important}
  :where([data-dpkb]){transition:none}
  :where([data-dpkb]):active{transform:none}
}