/**
 * Klockometr — warstwa ruchu.
 *
 * OSOBNY PLIK, a nie dopisek do style-v2.css, z trzech powodow:
 *
 *   1. To jedyna czesc wygladu, ktora w calosci wylacza sie jednym
 *      zapytaniem medialnym na koncu tego pliku. Trzymana osobno, da sie
 *      wylaczyc takze jednym `<link>` mniej, gdyby kiedys trzeba bylo.
 *   2. Gdy przyjdzie poprawiona wersja projektu graficznego, glowny arkusz
 *      wymienia sie w calosci. Ten zostaje.
 *   3. Nic tu nie UKRYWA tresci samo z siebie. Kazda klasa, ktora cos
 *      chowa (`wjazd`, `score--anim`), jest dokladana przez skrypt — bez
 *      JavaScriptu zaden z tych elementow nie zniknie. Gdyby te reguly
 *      lezaly w glownym arkuszu, latwo byloby o tym zapomniec.
 *
 * Wszystkie animacje ruszaja z `transform` i `opacity`. Zadna nie rusza
 * `width`, `top` ani `margin` na elementach listy — to sa wlasciwosci,
 * ktore wymuszaja przeliczenie ukladu strony przy kazdej klatce.
 */

/* --- karty wjezdzajace przy przewijaniu ----------------------------- */

/**
 * Klase `wjazd` doklada skrypt i tylko tym kartom, ktore w chwili wczytania
 * sa pod zagieciem. Karta widoczna od razu nie ma z czego wjezdzac.
 */
/**
 * TRZECIE PODEJSCIE, i tym razem problem nie byl w sile ruchu.
 *
 * Wersja 1 (14 px / .45 s) byla nie do zauwazenia. Wersja 2 (22 px +
 * scale, .55 s) byla widoczna na klatce, ale czytala sie jak COS INNEGO:
 * na ciemnym tle karta wychodzaca z opacity:0 jest nieodrozonialna od
 * karty, ktorej jeszcze nie doladowano. Zdjecia i tak wchodza leniwie
 * (loading="lazy"), wiec mozg widzi „strona sie wczytuje", a nie
 * „strona animuje". Animacja dzialala idealnie i byla niewidzialna,
 * bo udawala blad.
 *
 * Stad trzy zmiany, kazda przeciwko temu zludzeniu:
 *
 *   1. Start od opacity .4, nie 0. Element nigdy nie wyglada na brakujacy,
 *      wiec nie ma sie z czym pomylic.
 *   2. Wiekszy dystans (30 px) i BEZ scale. Skalowanie czyta sie jak
 *      doostrzanie miniatury; samo przesuniecie czyta sie jak ruch.
 *   3. Krocej: .42 s zamiast .55 s. Dlugie przejscie to jezyk ladowania,
 *      krotkie i zdecydowane to jezyk animacji.
 *
 * --op to opoznienie startu, ustawiane przez skrypt osobno dla kazdej
 * karty w tej samej fali. Dzieki temu karty pojawiaja sie jedna po drugiej,
 * a nie wszystkie naraz — i to wlasnie ta kaskada, a nie sila pojedynczego
 * ruchu, czyta sie jako swiadoma animacja.
 */
.wjazd{opacity:.4;transform:translateY(30px)}
.wjazd--in{opacity:1;transform:none;
  transition:opacity .42s ease var(--op,0ms),
             transform .42s cubic-bezier(.2,.7,.2,1) var(--op,0ms)}

/* --- wskaznik na skali ocen ----------------------------------------- */

/**
 * Wskaznik dojezdza od lewej krawedzi do pozycji wyliczonej przez serwer.
 * Pozycja siedzi w zmiennej --mark na rodzicu, wiec klatka koncowa moze
 * sie do niej odwolac — nie trzeba jej powtarzac w skrypcie.
 */
.score--anim::after{opacity:0}
.score--in::after{animation:klkMark .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes klkMark{
  from{left:-6px;opacity:0}
  to{left:calc(var(--mark,50%) - 6px);opacity:1}
}

/* --- podpowiedz na wykresie ----------------------------------------- */

/**
 * Pionowa prowadnica i etykieta z cena oraz data odczytu. Obie leza
 * w `.chart__plot`, ktory ma juz `position:relative`.
 *
 * `pointer-events:none` jest tu konieczne: etykieta chodzi za kursorem,
 * wiec gdyby lapala zdarzenia, zaslanialaby wykres sama przed soba
 * i podpowiedz migalaby przy kazdym ruchu myszy.
 */
.chart__guide,.chart__hover{position:absolute;opacity:0;pointer-events:none;
  transition:opacity .15s ease}
.chart__plot.is-hover .chart__guide,
.chart__plot.is-hover .chart__hover{opacity:1}

.chart__guide{top:0;bottom:0;width:1px;background:var(--line-strong);
  transform:translateX(-.5px)}

.chart__hover{transform:translate(-50%,calc(-100% - 12px));z-index:3;
  padding:6px 10px;border:1px solid var(--line-2);border-radius:4px;
  background:var(--panel);color:var(--text);white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
:root[data-theme="light"] .chart__hover{box-shadow:0 6px 18px rgba(26,22,20,.14)}
.chart__hover b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.chart__hover span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* Kropka na linii w miejscu, ktore czyta podpowiedz. */
.chart__hover::after{content:"";position:absolute;left:50%;top:calc(100% + 6px);
  width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 25%,transparent)}

/* --- szkielet w podpowiedziach wyszukiwarki ------------------------- */

/**
 * Trzy paski w miejscu, gdzie za chwile beda wyniki. Rozne szerokosci,
 * bo trzy identyczne prostokaty czytaja sie jak element interfejsu,
 * a nie jak „zaraz tu cos bedzie".
 */
.s-skel{display:flex;flex-direction:column;gap:10px;padding:12px 10px}
.s-skel i{display:block;height:13px;border-radius:3px;
  background:linear-gradient(90deg,var(--raise) 0%,var(--line) 50%,var(--raise) 100%);
  background-size:200% 100%;animation:klkSkel 1.1s linear infinite}
.s-skel i:nth-child(1){width:88%}
.s-skel i:nth-child(2){width:72%}
.s-skel i:nth-child(3){width:80%}
@keyframes klkSkel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ===================================================================== *
 *  WYLACZNIK
 *
 *  Kto prosi system o ograniczenie ruchu, dostaje strone bez ani jednej
 *  animacji — a nie bez tresci. Skrypt sprawdza to samo ustawienie i nie
 *  doklada klas `wjazd` ani `score--anim`; ta regula jest druga linia
 *  obrony, na wypadek gdyby klasa trafila na element inna droga.
 * ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .wjazd,.wjazd--in{opacity:1;transform:none;transition:none;--op:0ms}
  .score--anim::after,.score--in::after{opacity:1;animation:none;
    left:calc(var(--mark,50%) - 6px)}
  .s-skel i{animation:none}
  .chart__guide,.chart__hover{transition:none}
}