/* ============================================================
   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;

  /* 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;
    --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 var(--cas-hover) var(--von);
}

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

/* 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) {
  .nav__odkaz:hover::after,
  .pata__odkaz:hover::after { transform: scaleX(1); }

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

  .karta { transition: transform var(--cas-maly) var(--von); }
  .karta:hover { transform: translateY(-4px); }

  .foto img { transition: transform var(--cas-maly) var(--von); }
  .foto:hover img { transform: scale(1.04); }

  .projekt__riadok { transition: transform var(--cas-hover) var(--von); }
  .projekt__riadok:hover { transform: translateX(4px); }
}

/* ---------- 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: hýbe sa iba krížik. Odpoveď je telo textu,
   to sa neanimuje. */
.otazka__znak { transition: transform var(--cas-menu) var(--von); }
details[open] > .otazka .otazka__znak { transform: rotate(45deg); }

/* 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; }