/* ============================================================
   POHYB — dozorujem.sk
   Držané v samostatnom súbore zámerne (vzor sstr.tech): keď
   treba pohyb utlmiť, je jasné kde.

   ZÁMER: web má pôsobiť ako presný, pokojný človek, ktorý si
   všetko zapisuje. Preto sa NIČ nehýbe samo od seba okrem troch
   miest, kde pohyb niečo hovorí. Zvyšok pohybu je odozva na
   dotyk — „počul som ťa".

   PRAVIDLÁ, KTORÉ TU PLATIA BEZ VÝNIMKY:
   - animuje sa iba transform a opacity
   - žiadny backdrop-filter, filter: blur, box-shadow, clip-path
   - žiadny will-change (nie je potrebný a robí vrstvy v pamäti GPU)
   - žiadny scroll listener, ktorý mení štýly
   - telo textu sa neanimuje nikdy
   - prvá obrazovka sa neanimuje (je to LCP prvok)

   ČO SME SKÚSILI A NEPOUŽILI (nech to nikto neskúša znova):
   - odhalenie nadpisu každej sekcie — po piatich sekciách to
     čítaš ako „stránka sa stále načítava" (NN/g, Scroll Animations)
   - fade obsahu <details> pri rozbalení — je to telo textu; nechal
     som len otočenie krížika, čo je transform
   - animácia mriežky galérie — 80 fotiek = 80 vrstiev v pamäti GPU,
     to je presne ten zdroj sekania na lacnom telefóne
   ============================================================ */

:root {
  /* trvania rastú s veľkosťou prvku */
  --cas-hover:  120ms;
  --cas-stlac:  140ms;
  --cas-maly:   200ms;
  --cas-menu:   240ms;
  --cas-odhal:  320ms;
  --cas-okno:   360ms;
  --cas-odchod: 180ms;
  /* Rozbalenie a zbalenie — galérie v Referenciách aj odpovede v otázkach (Igor 11.9.2026:
     „rovnakou rýchlosťou ako pri fotkách"). Jedna hodnota pre obe, číta ju aj app.js. */
  --cas-rozbal: 380ms;
  --krivka-rozbal: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* vstavané CSS krivky sú na rozhranie slabé */
  --von:  cubic-bezier(0.23, 1, 0.32, 1);
  --dnu:  cubic-bezier(0.3, 0, 1, 1);

  --posun:   20px;
  --kaskada: 70ms;
}

/* reduce = OBMEDZIŤ, nie ZRUŠIŤ (WCAG C39).
   Trvania na 1ms, nie 0 — pri 0 sa nespustí transitionend
   a JS, ktorý naň čaká, sa zasekne. Priehľadnosť a farbu
   necháme, aby človek nestratil spätnú väzbu. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cas-hover: 1ms; --cas-stlac: 1ms; --cas-maly: 1ms;
    --cas-menu: 1ms;  --cas-odhal: 1ms; --cas-okno: 1ms;
    --cas-odchod: 1ms; --cas-rozbal: 1ms;
    --posun: 0px; --kaskada: 0ms;
  }
}

/* ---------- 1. ODOZVA NA DOTYK ----------
   Toto jedno pravidlo urobí s pocitom webu viac než celá
   scroll animácia. Stlačenie musí byť vidieť. */
.tlacidlo {
  transition: background-color var(--cas-hover) ease,
              color var(--cas-hover) ease,
              border-color var(--cas-hover) ease,
              transform var(--cas-stlac) var(--von);
}
.tlacidlo:active { transform: scale(0.97); }

.nav__odkaz::after,
.pata__odkaz::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease-out;
}

/* Odkaz von (registre) — malá šípka sa posunie. Hovorí:
   „toto ťa vezme preč z tejto stránky." */
.odkaz-von svg { transition: transform 220ms ease-out; }

/* Prejdenie myšou len tam, kde myš naozaj je.
   Na dotyku sa :hover zasekne a pôsobí to ako chyba. */
@media (hover: hover) and (pointer: fine) {
  /* UPOKOJENÉ 10.9.2026 (Igor: „animácie prechodu myšou sú stále veľmi trhané, možno príliš rýchle").
     Pod myšou sa už nič neposúva ani nezväčšuje — len mení farbu, a to mäkkou krivkou.
     - karty „Štyri veci…" sa nadvihovali, hoci sa na ne nedá kliknúť, a zdedili oneskorenie
       odhaľovania (0–210 ms), takže štvrtá karta sa pohla až po 0,2 s,
     - fotky sa zväčšovali — pri prechode cez mriežku sa ustavične prekresľovali,
     - šípka v riadku referencie pri každom riadku poskočila.
     Kurzor (ruka, lupa) a podfarbenie hovoria „dá sa kliknúť" dostatočne. */
  .nav__odkaz:hover::after,
  .pata__odkaz:hover::after { transform: scaleX(1); }

  .odkaz-von:hover svg { transform: translateX(3px); }
}

/* ---------- 2. TRI ODHALENIA, KAŽDÉ SO ZDÔVODNENÍM ----------
   (a) štyri veci, ktoré na stavbe robí — vedie oko po poradí
   (b) štyri kroky, ako to prebieha — kaskáda JE tá informácia:
       ukazuje, že je to postupnosť, nie zoznam
   (c) štyri čísla na overenie — prídu ako jeden dôkaz

   Nikde inde sa pri rolovaní nič neodhaľuje. Dráha 20 px,
   nikdy nie 60: pri dlhej dráhe a krátkom čase vidí oko skoky.

   Základný stav je VIDITEĽNÝ. Skryje to až JS. Bez JS (a pre
   Google) je celý obsah na obrazovke hneď. */
.odhal { opacity: 1; transform: none; }
html.js .odhal:not(.je-vidno) {
  opacity: 0;
  transform: translateY(var(--posun));
}
.odhal {
  transition: opacity var(--cas-odhal) var(--von),
              transform var(--cas-odhal) var(--von);
}
/* kaskáda 4 x 70 ms = 210 ms na skupinu, hlboko pod 500 ms */
.odhal:nth-child(2) { transition-delay: calc(var(--kaskada) * 1); }
.odhal:nth-child(3) { transition-delay: calc(var(--kaskada) * 2); }
.odhal:nth-child(4) { transition-delay: calc(var(--kaskada) * 3); }

/* ---------- 3. VECI, KTORÉ ČLOVEK SÁM OTVORÍ ---------- */

/* Menu na mobile. Odchod je rýchlejší než príchod —
   človek už rozhodol, netreba mu to prehrávať. */
.menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--cas-odchod) var(--dnu),
              transform var(--cas-odchod) var(--dnu),
              visibility 0s linear var(--cas-odchod);
  visibility: hidden;
}
.menu.je-otvorene {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--cas-menu) var(--von),
              transform var(--cas-menu) var(--von),
              visibility 0s;
}

/* Otázky: odpoveď sa plynulo rozbalí a zbalí (app.js, sekcia 8 — Igor 10.9.2026:
   „nech to pôsobí hladko"). Krížik sa otáča s rovnakou mäkkou krivkou; pri zbaľovaní
   dostane <details> triedu .zatvara, aby sa krížik vrátil hneď a nie až po dobehnutí. */
.otazka__znak { transition: transform var(--cas-rozbal) var(--krivka-rozbal); }
details[open] > .otazka .otazka__znak { transform: rotate(45deg); }
details.zatvara > .otazka .otazka__znak { transform: none; }

/* Fotka na celú obrazovku. Nikdy scale(0) — vyzeralo by to,
   že prvok prišiel odnikiaľ. */
.lupa { opacity: 0; transition: opacity var(--cas-okno) var(--von); }
.lupa[open] { opacity: 1; }
.lupa__obsah {
  transform: scale(0.96);
  transition: transform var(--cas-okno) var(--von);
}
.lupa[open] .lupa__obsah { transform: none; }

/* Lišta s telefónom na mobile. Vysunie sa, až keď zmizne
   telefón z prvej obrazovky — dovtedy by prekrývala to isté
   číslo dvakrát. Prepína ju IntersectionObserver, nie scroll. */
.lista-telefon {
  transform: translateY(110%);
  transition: transform var(--cas-menu) var(--von);
}
.lista-telefon.je-vidno { transform: none; }