/* nl-cennik-ruch.css — ruch i orientacja w cenniku laseroterapii.

   Wpięty jako OSTATNI arkusz w <head>, poniżej lokalnego bloku <style> strony.
   Powód jest twardy: strona trzyma reguły html i [data-sekcja] w stylach lokalnych,
   a przy równej swoistości wygrywa arkusz wczytany później.

   Wszystko tutaj podlega tym samym regułom co reszta serwisu: krzywa
   cubic-bezier(0.23,1,0.32,1), animujemy wyłącznie transform i opacity, żadnej
   parallaksy i żadnego przejmowania przewijania. Dokument ma 26 000 px na
   desktopie i 53 000 px na telefonie, więc każdy efekt musi zarabiać na siebie
   orientacją, nie ozdobą. */

:root{ --nl-pasek-sekcji:88px; }   /* wartość awaryjna, skrypt podmienia na zmierzoną */

/* ── 1. Lepki pasek nagłówka sekcji ──────────────────────────────────────────
   Nazwa urządzenia ze złotą kreską zostaje przy górnej krawędzi przez całą
   sekcję, a nagłówek następnej ją wypycha. Pacjentka, która zjechała w środek
   tabeli, widzi same kwoty i bez tego nie wie, którego lasera dotyczą. Przy
   dwóch laserach frakcyjnych 1550 nm o różnych cenach pomyłka sekcji to pomyłka
   w kwocie, nie w estetyce. Zero JS w samym efekcie, zero zmiany geometrii po
   przyklejeniu, więc przesunięcie układu jest wykluczone. */
/* Lepkość tylko na szerokim ekranie. Zmierzone na telefonie: nagłówki łamią się
   na trzy linie, pasek ma wtedy 147 px z 812, czyli osiemnaście procent ekranu,
   a mediana 107 px to trzynaście procent. Tyle nie wolno zabrać na stałe telefonowi.
   Na desktopie ten sam pasek ma 75 px z 900, czyli osiem procent, i jest opłacalny.
   Telefon dostanie osobne rozwiązanie: jeden wąski pasek na całą stronę z nazwą
   bieżącej sekcji, o stałej wysokości, zamiast siedemnastu wysokich. */
@media (min-width:761px){
  .nl-sek-pasek{
    position:sticky; top:0; z-index:5;
    background:var(--nl-tlo);
    padding-block:10px 14px;
  }
  html{ scroll-padding-top:var(--nl-pasek-sekcji, 88px); }
  [data-sekcja]{ scroll-margin-top:calc(12px - var(--nl-pasek-sekcji, 88px)); }
}
@media (max-width:760px){
  html{ scroll-padding-top:12px; }
  [data-sekcja]{ scroll-margin-top:12px; }
}
/* Margines kreski siedzi w stylu lokalnym HTML i wygrywa z arkuszem. Zerujemy go,
   odstęp daje padding paska. Bez tego pod paskiem przewijałby się widoczny pas treści. */
.nl-sek-pasek > .nl-linia{ margin-block-end:0 !important; }


/* ── 2. Śledzenie wiersza w tabeli cenowej ───────────────────────────────────
   Tabele mają do czterech kolumn, a opisy okolic łamią się na dwie linie. Bez
   podświetlenia łatwo odczytać cenę pakietu z sąsiedniego wiersza. Wyłącznie
   kolor tła, bez ruchu i bez zmiany metryki tekstu, więc ceny nie drgają. */
@media (hover:hover){
  .nl-cen > li:not(.nl-cen-glowka){
    transition:background-color 160ms var(--nl-ease, cubic-bezier(0.23,1,0.32,1));
  }
  .nl-cen > li:not(.nl-cen-glowka):hover{ background:var(--nl-tlo-2); }
}

/* ── 3. Komunikat pustej wyszukiwarki ────────────────────────────────────────
   Dziś wskakuje i znika skokiem pod polem, w którym ktoś właśnie pisze.
   allow-discrete pozwala animować także samo display, więc wejście i wyjście
   są symetryczne i nic nie miga przy poprawianiu zapytania. */
[data-szukaj-pusto]{
  transition:opacity 240ms var(--nl-ease, cubic-bezier(0.23,1,0.32,1)),
             display 240ms allow-discrete;
}
[data-szukaj-pusto][style*="display:none"],
[data-szukaj-pusto][style*="display: none"]{ opacity:0; }
@starting-style{ [data-szukaj-pusto]{ opacity:0; } }

/* ── 4. Złoty pasek postępu czytania ─────────────────────────────────────────
   Jedyny efekt czysto ozdobny i jedyny, na który dokument tej długości zarabia:
   pokazuje, ile cennika zostało. Oś przewijania w CSS, więc liczy się poza
   głównym wątkiem i nie kosztuje ani jednego nasłuchu. Za bramką @supports,
   bo animacje sterowane przewijaniem to na wrzesień 2026 Chrome i Edge od 115
   oraz Safari od 26, a Firefox trzyma je jeszcze za przełącznikiem. Tam, gdzie
   nie ma wsparcia, po prostu nie ma paska i nic się nie psuje. */
@supports (animation-timeline:scroll()){
  body::before{
    content:''; position:fixed; inset:0 0 auto 0; height:2px; z-index:400;
    background:linear-gradient(90deg, var(--nl-linia-zlota), var(--nl-zloto-orn));
    transform-origin:0 50%; transform:scaleX(0);
    animation:nl-postep-czytania linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes nl-postep-czytania{ to{ transform:scaleX(1); } }
}

@media (prefers-reduced-motion:reduce){
  .nl-cen > li:not(.nl-cen-glowka){ transition:none; }
  [data-szukaj-pusto]{ transition:none; }
  body::before{ display:none; }
  /* Przyklejenie nie jest ruchem własnym strony: element stoi nieruchomo względem
     palca, nic nie przyspiesza i nic nie wraca. Pasek sekcji zostaje. */
}

/* Kotwice przy wierszach cennika.
   Każdy wiersz ma trwały identyfikator, więc da się podać odnośnik do jednej ceny.
   Wskazany wiersz zaznaczamy statycznie, bez animacji, żeby było widać, o którą
   pozycję chodziło. scroll-padding-top na html już zadba o to, żeby nie schował się
   pod lepkim paskiem sekcji. */
ul.nl-cen li[id]:target{
  background:var(--nl-tlo-2, rgba(255,255,255,.05));
  box-shadow:inset 2px 0 0 var(--nl-zloto-orn,#c9a86a);
  border-radius:6px;
}