/* ============================================================
   JACKOWO — interakcje.css
   Podświetlenia, stany hover i animacje. Ładowany na każdej podstronie,
   po pozostałych arkuszach.

   Zasady, których się tu trzymam:
   · każdy efekt trwa 150–450 ms — poniżej wygląda na usterkę, powyżej spowalnia,
   · ruszamy tylko transform i opacity (nie layoutem) — inaczej przeglądarka
     przelicza układ przy każdej klatce i animacja się tnie,
   · każdy stan hover ma odpowiednik :focus-visible — inaczej klawiatura
     nie dostaje tej samej informacji co mysz,
   · na końcu pliku wszystko wyłącza prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   1. PRZYCISKI — uniesienie i cień, wciśnięcie przy kliknięciu
   ============================================================ */
.btn{
  position:relative;
  will-change:transform;
  transition:background .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease),transform .18s var(--ease),
             box-shadow .22s var(--ease);
}
.btn--primary:hover,.btn--primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(30,72,48,.22),0 10px 24px rgba(30,72,48,.16);
}
.btn--secondary:hover,.btn--secondary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(31,36,33,.08),0 10px 22px rgba(31,36,33,.08);
}
/* wciśnięcie: wraca na miejsce i traci cień — daje wrażenie dotknięcia */
.btn:active{transform:translateY(0);box-shadow:var(--sh-1);transition-duration:.06s}

/* strzałka w przycisku tekstowym dojeżdża, a nie przeskakuje */
.btn--ghost::after{transition:transform .24s var(--ease)}
.btn--ghost:hover::after,.btn--ghost:focus-visible::after{transform:translateX(5px)}

/* ============================================================
   2. LINKI W TREŚCI — podkreślenie rysowane od lewej

   background-size zamiast border-bottom: gradient da się animować,
   obramowania nie. Linia siedzi 2 px pod tekstem i nie rusza układu.
   ============================================================ */
main p a:not(.btn),
main li a:not(.btn),
main address a,
.foot a:not(.logo){
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .28s var(--ease),color .2s var(--ease);
  padding-bottom:2px;
}
main p a:not(.btn):hover, main p a:not(.btn):focus-visible,
main li a:not(.btn):hover, main li a:not(.btn):focus-visible,
main address a:hover, main address a:focus-visible,
.foot a:not(.logo):hover, .foot a:not(.logo):focus-visible{
  background-size:100% 1px;
}
/* w stopce linki są domyślnie podkreślone przy hoverze — teraz robi to gradient */
.foot a:hover{text-decoration:none}

/* ============================================================
   3. KARTY — uniesienie, cień, ocieplenie obramowania
   ============================================================ */
.card,.quote,.adres,.info,.beer-card,.plate{
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             border-color .28s var(--ease);
}
.card:hover,.quote:hover,.adres:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-3);
  border-color:var(--c-border-sand);
}
.plate{overflow:hidden}
.plate:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.plate__media img{transition:transform .55s var(--ease)}
.plate:hover .plate__media img{transform:scale(1.05)}

/* kafle bento i B2 mają własne przejścia w sections.css — tu tylko
   dokładamy delikatne rozjaśnienie obramowania */
.tile:hover,.bento__kafel:hover{border-color:var(--c-border-sand)}

/* ============================================================
   4. NAWIGACJA
   ============================================================ */
/* podkreślenie pozycji menu wyjeżdża od lewej — było, zostaje,
   tu tylko wydłużamy o odrobinę i dokładamy zmianę koloru */
.nav__link{transition:color .2s var(--ease)}

/* pozycje rozwijanego panelu przesuwają się o 3 px w prawo */
.nav__panel a{transition:background .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease)}
.nav__panel a:hover,.nav__panel a:focus-visible{padding-left:18px}

/* nagłówek po odjechaniu od góry: lekkie rozmycie tła.
   Kolor tła zostaje nieprzezroczysty w 92% — tekst pod spodem nie prześwituje. */
.hdr{transition:box-shadow .25s var(--ease),background .25s var(--ease)}
@supports (backdrop-filter:blur(8px)){
  .hdr.is-stuck{background:rgba(251,249,245,.92);backdrop-filter:blur(10px)}
}

/* logo — subtelne rozjaśnienie, bez ruchu (to kotwica strony) */
.logo{transition:opacity .2s var(--ease)}
.logo:hover{opacity:.78}

/* ============================================================
   5. PASEK POSTĘPU CZYTANIA
   Cienka linia pod nagłówkiem. Szerokość ustawia main.js.
   ============================================================ */
.postep{
  position:fixed;top:0;left:0;height:3px;z-index:120;
  width:0;
  background:linear-gradient(90deg,var(--c-green),var(--c-blue));
  transition:width .1s linear;
  pointer-events:none;
}

/* ============================================================
   6. POWRÓT NA GÓRĘ
   ============================================================ */
.dogory{
  position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:110;
  width:48px;height:48px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--c-border);
  background:var(--c-surface);color:var(--c-green-dk);cursor:pointer;
  box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .25s var(--ease),transform .25s var(--ease),
             visibility .25s,background .2s var(--ease);
}
.dogory.is-widoczny{opacity:1;visibility:visible;transform:none}
.dogory:hover{background:var(--c-green-lt);transform:translateY(-3px)}
.dogory svg{width:20px;height:20px}

/* ============================================================
   7. NAGŁÓWEK SEKCJI — kreska rysowana pod tytułem

   Rysuje się, gdy sekcja wejdzie w kadr (klasa .is-visible z main.js).
   ============================================================ */
.section__head h2{position:relative;padding-bottom:var(--sp-3)}
.section__head h2::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:0;height:2px;background:var(--c-green);
  transform:translateX(-50%);
  transition:width .5s var(--ease) .15s;
}
.section__head.is-visible h2::after{width:56px}
.section--sea .section__head.is-visible h2::after,
.section--blue .section__head.is-visible h2::after{background:var(--c-blue)}
.section--sand .section__head.is-visible h2::after,
.section--warm .section__head.is-visible h2::after{background:var(--c-brown)}
/* nagłówek wyrównany do lewej ma kreskę też po lewej */
.section__head--left h2::after{left:0;transform:none}

/* ============================================================
   8. KARTA DAŃ — podświetlenie wiersza
   ============================================================ */
.dish{
  transition:background .2s var(--ease);
  padding-inline:var(--sp-3);
  margin-inline:calc(var(--sp-3) * -1);
  border-radius:var(--r-sm);
}
.dish:hover{background:var(--c-green-lt)}
.dish:hover .dish__price{color:var(--c-green-dk)}
.dish__price{transition:color .2s var(--ease)}

/* chipsy filtrów — uniesienie */
.chip{transition:background .2s var(--ease),border-color .2s var(--ease),
                 color .2s var(--ease),transform .18s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip:active{transform:none}

/* ============================================================
   9. GALERIA — lupa na najechaniu
   ============================================================ */
.gal__item::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(30,72,48,.28);
  opacity:0;transition:opacity .28s var(--ease);
  pointer-events:none;
}
.gal__item:hover::after,.gal__item:focus-visible::after{opacity:1}

.gal__item::before{
  content:"";position:absolute;z-index:2;
  left:50%;top:50%;width:38px;height:38px;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease);
  border-radius:50%;
  background:rgba(255,255,255,.94)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4830' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E")
    center/20px no-repeat;
  pointer-events:none;
}
.gal__item:hover::before,.gal__item:focus-visible::before{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}

/* lightbox wchodzi z lekkim przybliżeniem */
.lbox[open]{animation:lbox-wejscie .28s var(--ease)}
@keyframes lbox-wejscie{
  from{opacity:0}
  to{opacity:1}
}
.lbox[open] .lbox__stage img{animation:lbox-foto .32s var(--ease)}
@keyframes lbox-foto{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:none}
}

/* ============================================================
   10. FORMULARZE — pole podnosi się przy fokusie
   ============================================================ */
.field input,.field select,.field textarea{
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),
             background .2s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--c-brown-lt)}

.check{transition:color .2s var(--ease)}
.check:hover{color:var(--c-text)}

/* ============================================================
   11. ACCORDION — panel rozwija się płynnie

   grid-template-rows 0fr → 1fr animuje wysokość bez znajomości
   docelowego rozmiaru. Wymaga wewnętrznego opakowania z overflow:hidden.
   ============================================================ */
.acc__panel{
  display:grid;grid-template-rows:0fr;
  padding-block:0;
  transition:grid-template-rows .3s var(--ease),padding-block .3s var(--ease);
}
.acc__panel > *{overflow:hidden;min-height:0;
  /* visibility, nie sam inert: w przegladarkach bez obslugi inert pola
     zwinietego panelu dalej lapalyby fokus. visibility zmienia sie skokowo,
     wiec przy otwieraniu wchodzi od razu, a przy zamykaniu czeka na koniec ruchu. */
  visibility:hidden;transition:visibility .3s}
.acc__item.is-otwarty .acc__panel{grid-template-rows:1fr;padding-bottom:var(--sp-4)}
.acc__item.is-otwarty .acc__panel > *{visibility:visible}
.acc__btn{transition:background .2s var(--ease),color .2s var(--ease)}

/* ============================================================
   12. PANEL MOBILNY — pozycje wchodzą kaskadą
   ============================================================ */
.mnav.is-open .mnav__item{animation:mnav-wejscie .32s var(--ease) both}
.mnav.is-open .mnav__item:nth-child(1){animation-delay:.04s}
.mnav.is-open .mnav__item:nth-child(2){animation-delay:.08s}
.mnav.is-open .mnav__item:nth-child(3){animation-delay:.12s}
.mnav.is-open .mnav__item:nth-child(4){animation-delay:.16s}
.mnav.is-open .mnav__item:nth-child(5){animation-delay:.20s}
.mnav.is-open .mnav__foot{animation:mnav-wejscie .32s var(--ease) .24s both}
@keyframes mnav-wejscie{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ============================================================
   13. WYCISZENIE ANIMACJI

   Jedna reguła na końcu wyłącza wszystko powyżej. Stany hover zostają,
   ale dzieją się natychmiast — użytkownik nadal wie, na czym stoi kursor.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .btn,.card,.quote,.adres,.info,.beer-card,.plate,.tile,.bento__kafel,
  .chip,.dogory,.nav__panel a,.dish{transition-duration:.01ms!important}
  .btn:hover,.btn--primary:hover,.btn--secondary:hover,
  .card:hover,.quote:hover,.adres:hover,.plate:hover,
  .chip:hover,.dogory:hover{transform:none!important}
  .plate:hover .plate__media img{transform:none!important}
  /* galeria: kadr nie przybliza sie, lupa pojawia sie bez przenikania */
  .gal__item:hover img{transform:none!important}
  .gal__item::after,.gal__item::before{transition:none}
  .gal__item:hover::before,.gal__item:focus-visible::before{transform:translate(-50%,-50%)}
  .section__head h2::after{transition:none}
  .section__head.is-visible h2::after{width:56px}
  .postep{transition:none}
  .lbox[open],.lbox[open] .lbox__stage img,
  .mnav.is-open .mnav__item,.mnav.is-open .mnav__foot{animation:none}
  .acc__panel,.acc__panel > *{transition:none}
}

/* ============================================================
   KARUZELA — zdjęcia zmieniają się same

   Klient wskazał restauracjastarydom.pl: „strona żyje, ruch zdjęć".
   Tamten serwis ma dziewięć karuzel Swipera (przenikanie co 2–2,5 s
   oraz coverflow co 5 s) plus 27 wejść na scroll. Wejścia na scroll
   już mamy — brakowało tylko ruchu samych zdjęć.

   Bez biblioteki. Swiper to ~140 kB i zapytanie do CDN; przenikanie
   czterech zdjęć to dziesięć linijek CSS. Serwis nie wysyła dziś
   ANI JEDNEGO zapytania na zewnątrz i tak ma zostać — inaczej
   ucierpi Lighthouse i kopia offline dla klienta.

   FAIL-SAFE: bez JavaScriptu widać pierwsze zdjęcie i tyle.
   Dopiero skrypt dokłada klasę .js-gotowa i przejmuje sterowanie.
   ============================================================ */
.karuzela__klatka{
  opacity:0;
  transition:opacity .9s var(--ease);
}
.karuzela__klatka:first-child{opacity:1}
.karuzela__klatka:not(:first-child){position:absolute; inset:0}

.karuzela.js-gotowa .karuzela__klatka{opacity:0}
.karuzela.js-gotowa .karuzela__klatka.jest{opacity:1}

/* Ruch to dodatek, nie treść. Kto go wyłączył, dostaje pierwsze zdjęcie. */
@media(prefers-reduced-motion:reduce){
  .karuzela__klatka{transition:none}
  .karuzela.js-gotowa .karuzela__klatka{opacity:0}
  .karuzela.js-gotowa .karuzela__klatka:first-child{opacity:1}
}

/* Karuzela w kolumnie .split musi mieć STAŁĄ wysokość. Kadry mają różne
   proporcje (od 0,57 do 1,50) i bez tego ramka skakałaby przy każdej
   zmianie zdjęcia, przesuwając całą sekcję.
   Specyficzność (0,3,1) — musi pobić .split__media .frame img (0,2,1)
   z sections.css, które ustawia height:auto. */
.split__media .karuzela{aspect-ratio:4/3; overflow:hidden; position:relative}
.split__media .frame.karuzela img{width:100%; height:100%; object-fit:cover}


/* ============================================================
   ZOOM-OUT KAFLI PRZY WEJŚCIU (finalny audyt 28.08.2026)

   Zdjęcie w kaflu .plate.reveal startuje minimalnie przybliżone
   i osiada przy pierwszym wejściu w kadr — raz, subtelnie, bez
   ciągłego ruchu. Hover (scale 1.06) ma wyższą specyficzność,
   więc dotychczasowe interakcje zostają nietknięte.
   ============================================================ */
.plate.reveal .plate__media img{
  transform:scale(1.05);
  transition:transform 1s var(--ease);
}
.plate.reveal.is-visible .plate__media img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .plate.reveal .plate__media img{transform:none;transition:none}
}