/* btn-press.css — profesjonalna animacja "press" (scale + fala/ripple) dla
   przyciskow i klikalnych kafli na public-site.
   Nowy, osobny plik: nic innego nie zmieniamy. Klasa .is-pressing dokladana
   jest przez assets/js/btn-press.js (pointerdown/klawiatura), nie CSS :active,
   zeby dzialalo tak samo na desktopie i na dotyku (iOS).

   Wazne: uzywamy osobnej wlasciwosci CSS `scale`, NIE nadpisujemy `transform`.
   Dzieki temu efekt wciskania dziala razem z istniejacymi hoverami, ktore juz
   licza na `transform` (np. .btn-primary:hover translateY, .vac:hover
   translateX, .card:hover translateY, .sek-tile:hover na obrazku) — oba
   mechanizmy skladaja sie w jeden render bez konfliktu. */

:root{
  --btn-press-in: scale .12s ease-out, filter .12s ease-out;
  --btn-press-out: scale .22s cubic-bezier(.2,.8,.2,1.2), filter .18s ease-out;
}

/* ---------- dotyk iOS: bez niebieskiej/szarej plamy na tap ---------- */
.btn, .chip, button, .anav__panel-item,
.vac--klik, .kafel-klik, [data-tegel]{
  -webkit-tap-highlight-color: transparent;
}

/* ---------- kontener na fale: tylko elementy z pelnym efektem ---------- */
/* .btn/.chip/button/.anav__panel-item nie maja gdzie indziej position/overflow
   ustawionych na sobie (sprawdzone), wiec to bezpieczny dodatek. Elementy ktore
   juz maja wlasny position (np. .modal-close: absolute, .anav__burger: relative)
   zostaja bez zmian — te reguly maja wyzsza specyficznosc (selektor klasy) niz
   goly `button`, wiec nie sa nadpisywane. */
.btn, .chip, button, .anav__panel-item{
  position: relative;
  overflow: hidden;
}

/* Stary wbudowany scale(.99) na :active .btn zderzalby sie z nowym efektem —
   zerujemy tylko transform, wlasciwosc scale (nasza) zostaje niezalezna. */
.btn:active{ transform: none; }

/* ---------- press: pelny efekt (scale + lekkie przyciemnienie) ---------- */
.btn, .chip, button, .anav__panel-item{
  scale: 1;
  transition: var(--btn-press-out);
}
.btn.is-pressing, .chip.is-pressing, button.is-pressing, .anav__panel-item.is-pressing{
  scale: .97;
  filter: brightness(.94);
  transition: var(--btn-press-in);
}

/* ---------- press: subtelny efekt na kartach/kaflach (bez fali) ---------- */
.vac--klik, .kafel-klik, [data-tegel]{
  scale: 1;
  transition: var(--btn-press-out);
}
.vac--klik.is-pressing, .kafel-klik.is-pressing, [data-tegel].is-pressing{
  scale: .985;
  filter: brightness(.97);
  transition: var(--btn-press-in);
}

/* ---------- fala (ripple) z punktu dotyku/klikniecia ---------- */
.btn-ripple{
  position: absolute;
  left: 0; top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  will-change: transform, opacity;
  animation: btnRippleGrow .55s ease-out forwards;
  --ripple-peak: .16;
}
@keyframes btnRippleGrow{
  0%{ transform: translate(-50%, -50%) scale(0); opacity: 0; }
  12%{ opacity: var(--ripple-peak); }
  100%{ transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* .btn-primary: tlo pomaranczowe/akcentowe, currentColor tam to kolor tekstu
   (najczesciej ciemny, dla kontrastu), wiec fala z currentColor wyszlaby jako
   brudna plama. Bialo-przezroczysta fala jest czytelna na kazdym motywie. */
.btn-primary .btn-ripple{
  background-color: #fff;
  --ripple-peak: .35;
}

/* ---------- prefers-reduced-motion: zero skalowania i fali, tylko blysk ---------- */
@media (prefers-reduced-motion: reduce){
  .btn, .chip, button, .anav__panel-item,
  .vac--klik, .kafel-klik, [data-tegel]{
    scale: 1 !important;
    transition: none !important;
  }
  .btn.is-pressing, .chip.is-pressing, button.is-pressing, .anav__panel-item.is-pressing,
  .vac--klik.is-pressing, .kafel-klik.is-pressing, [data-tegel].is-pressing{
    opacity: .82;
  }
  .btn-ripple{ display: none; }
}