/* =========================================================
   Pohyb: spoločná choreografia (assets/js/pohyb.js)
   ---------------------------------------------------------
   Úvod, profil a prihlásenie. Krivky zo svet.css (--e-out,
   --e-io), len transform, opacity, filter a šírka písma
   v zvýraznení. Pri obmedzenom pohybe sa nič z toho nehýbe
   (style.css vypína animácie, tu vypíname prechody).
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Nadpisy: slovo po slove, potom šírka ----------
     Slová nabehnú zdola z rozmazania (ako otázka na prompteri),
     zvýraznenie sa potom roztiahne z normálnej šírky na 125 %:
     podpis sveta „šírka, nie farba". */
  .pohyb .je-nadpis .slovo { display: inline-block; }
  .pohyb .je-nadpis:not(.is-in) .slovo { opacity: 0; }
  .pohyb .je-nadpis.is-in .slovo {
    animation: pohyb-slovo 640ms var(--e-out) backwards;
    animation-delay: calc(var(--w, 0) * 55ms + 60ms);
  }
  /* Zvýraznenie má šírku 125 % hneď; animovať os šírky by každý
     snímok prepočítalo zalomenie nadpisu a pri scrollovaní sekalo. */

  /* ---------- Postupný nábeh riadkov ---------- */
  .pohyb .je-stagger:not(.is-in) > * { opacity: 0; }
  .pohyb .je-stagger.is-in > * {
    animation: pohyb-nabeh 560ms var(--e-out) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 140ms);
  }

  /* ---------- Páska sa prilepí ----------
     Keď sa sekcia ukáže, páska dopadne z väčšieho náklonu na
     svoje -1,2°. Raz, pri prvom zobrazení. */
  .js [data-reveal].is-in .tape:not(.tape--flat),
  .pohyb .je-paska.is-in .tape {
    animation: pohyb-paska 520ms var(--e-out) backwards 220ms;
  }

  /* ---------- Úvod: monitor sa zapne ----------
     Skriňa nabehne, páska PROGRAM sa prilepí, kontrolka dvakrát
     blikne a zhasne. Jediné „zapnutie" pri načítaní. */
  .js .hero .monitor { animation: pohyb-monitor 900ms var(--e-out) backwards 260ms; }
  .js .hero .monitor__bar .tape { animation: pohyb-paska 560ms var(--e-out) backwards 760ms; }
  .js .hero .monitor__bar .lamp { animation: pohyb-blik 900ms steps(1, end) 1100ms; }
  .js .hero .monitor__foot { animation: pohyb-nabeh 600ms var(--e-out) backwards 900ms; }

  /* ---------- Kontrolky v profile a prihlásení ---------- */
  .lamp.je-blik { animation: pohyb-blik 900ms steps(1, end); }
}

/* Bez filter: blur – rozmazanie každého slova zvlášť je drahé na
   vykreslenie a pri dlhších nadpisoch sekalo. Stačí opacity a posun. */
@keyframes pohyb-slovo {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: none; }
}
@keyframes pohyb-nabeh {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* Bez scale: po zväčšovacej animácii ostávalo písmo pásky mäkké. */
@keyframes pohyb-paska {
  from { opacity: 0; transform: rotate(-5deg) translateY(-4px); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(-1.2deg); }
}
@keyframes pohyb-monitor {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* Kontrolka: dvakrát rozsvietená, potom zhasnutá (vracia sa do
   svojho stavu, žiadna trvalá pulzácia). */
@keyframes pohyb-blik {
  0%, 22%, 44% { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
  11%, 33%, 55%, 100% { background: transparent; border-color: var(--ink-line); color: var(--sand-deep); }
}

/* ---------- Ukazovateľ čítania: VU meter pod hlavičkou ----------
   Segmentovaný pruh sa plní so scrollom (scroll-driven animácia,
   bez JavaScriptu). Prehliadač bez podpory ho jednoducho nemá. */
.vu-citanie { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .vu-citanie {
      display: block;
      position: absolute; left: 0; right: 0; bottom: -1px;
      height: 3px;
      pointer-events: none;
    }
    .vu-citanie i {
      display: block; height: 100%;
      background: repeating-linear-gradient(90deg, var(--yellow) 0 6px, transparent 6px 8px);
      transform-origin: left;
      transform: scaleX(0);
      animation: pohyb-citanie linear both;
      animation-timeline: scroll(root block);
    }
    /* Monitor v hero pri odchode mierne odpláva hore, text zostáva. */
    .js .hero__inner > .monitor {
      animation: pohyb-monitor 900ms var(--e-out) backwards 260ms, pohyb-drift linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
  }
}
@keyframes pohyb-citanie { to { transform: scaleX(1); } }
/* Posun ide cez `translate`, aby sa nebil s naklonením monitora (transform). */
@keyframes pohyb-drift { to { translate: 0 -56px; } }

/* ---------- Žltý pás (.pas) ---------- */
.pas {
  overflow: hidden;
  background: var(--yellow);
  color: var(--ink);
  padding-block: 0.8rem;
}
.pas__stopa { display: flex; width: max-content; }
.pas__stopa.bezi { animation: pohyb-pas var(--pas-dlzka, 40s) linear infinite; }
.pas:hover .pas__stopa, .pas:focus-within .pas__stopa { animation-play-state: paused; }
.pas__skupina {
  display: flex; align-items: center; flex: none;
  gap: 1.5rem; padding-right: 1.5rem;
  margin: 0; padding-left: 0;
  list-style: none;
  font: 800 0.95rem/1 var(--font-body);
  font-stretch: 82%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pas__skupina > li { display: flex; align-items: center; gap: 1.5rem; }
.pas__skupina > li::after {
  content: ""; width: 0.42rem; height: 0.42rem; flex: none;
  border-radius: 1px; background: var(--ink); transform: rotate(45deg);
}
.pas__skupina a, .pas__skupina span { color: inherit; text-decoration: none; }
.pas__skupina a {
  padding: 0.25rem 0.3rem; border-radius: 2px;
  transition: background-color 140ms var(--e-out), color 140ms var(--e-out);
}
.pas__skupina a:hover { background: var(--ink); color: var(--yellow); }
.pas__skupina a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pas__skupina b { font-family: var(--font-seg); font-weight: 700; font-size: 0.9em; letter-spacing: 0.04em; margin-right: 0.15em; }
@keyframes pohyb-pas { to { transform: translateX(calc(-1 * var(--pas-posun, 50%))); } }

@media (prefers-reduced-motion: reduce) {
  .pohyb h2.je-nadpis em, .pohyb h3.je-nadpis em { transition: none; }
  .pas__stopa.bezi { animation: none; }
  .pas { overflow-x: auto; }
}

/* =========================================================
   Hovery: pult reaguje pod rukou
   ---------------------------------------------------------
   Len pre myš (hover: hover, pointer: fine), krátke prechody
   (do 260 ms) na transform, opacity, farbe a šírke písma.
   Šírka písma je podpis sveta: čo je pod kurzorom, roztiahne sa.
   ========================================================= */

/* Klávesy: pri prejdení sa nadvihnú o pixel a pera je hlbšia,
   pri stlačení klesnú. Ikona v klávese sa pohne. */
.btn {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
              box-shadow 220ms var(--e-out), transform 180ms var(--e-out);
}
.btn svg { transition: transform 240ms var(--e-out); }
.btn:active { transform: translateY(1px) scale(0.985); }

/* Podčiarknutie odkazov v navigácii: žltá linka nabehne zľava
   a pri odchode odíde doprava. */
.header__nav a, .footer__links a, .auth-back span, .starter__write, .pf-back span {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 2px;
  transition: color 200ms ease, background-size 260ms var(--e-out);
  padding-bottom: 2px;
}
.auth-back svg, .pf-back svg { transition: transform 240ms var(--e-out); }

/* Logo: P sa pri prejdení nakloní ako páska. */
.logo__mark { transition: transform 260ms var(--e-out); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--ghost:hover, .btn--google:hover, .btn--linkedin:hover {
    transform: translateY(-1px);
  }
  .btn--primary:hover { box-shadow: inset 0 -3px 0 rgba(20, 18, 16, .22), 0 10px 18px -12px rgba(0, 0, 0, .8); }
  .btn--onair:hover { box-shadow: inset 0 -3px 0 rgba(20, 18, 16, .22), 0 16px 24px -14px rgba(0, 0, 0, .85); }
  .btn--primary:hover svg, .btn--onair:hover svg { transform: rotate(-8deg) translateY(-1px); }
  .btn:active, .btn--primary:active, .btn--onair:active { transform: translateY(1px) scale(0.985); }

  .header__nav a:hover, .footer__links a:hover, .auth-back:hover span, .starter__write:hover, .pf-back:hover span {
    background-position: 0 100%;
    background-size: 100% 2px;
    text-decoration: none;
  }
  .auth-back:hover svg, .pf-back:hover svg { transform: translateX(-3px); }

  .logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }

  /* Páska na paneli sa pri prejdení odlepí o kúsok. */
  .monitor:hover .monitor__bar .tape,
  .roast__pult:hover .roast__tape,
  .ph-blok:hover h2:not(.sr-only) {
    transform: rotate(-3.2deg) translateY(-1px);
  }
}
.monitor__bar .tape, .roast__tape { transition: transform 260ms var(--e-out); }

/* ---------- Úvod: riadky, ktoré reagujú ---------- */
.starter__opt > span { transition: transform 260ms var(--e-out), color 180ms ease; }
.upload__list li { transition: color 200ms ease; }
.upload__list li::before { transition: transform 260ms var(--e-out), border-radius 260ms var(--e-out); transform-origin: left center; }
.upload__list strong { transition: color 200ms ease; }
.mimo__text { transition: background-size 400ms var(--e-out), color 200ms ease; }
.mimo__odpoved { transition: color 200ms ease, transform 260ms var(--e-out); }
.titulky dd b { display: inline-block; transition: transform 260ms var(--e-out), color 200ms ease; }
.titulky dt { transition: color 200ms ease; }
.roast__pult, .docdemo, .agent-panel, .monitor, .starter__stage { transition: border-color 220ms ease; }
.voices__names button span { transition: color 180ms ease; display: inline-block; }

@media (hover: hover) and (pointer: fine) {
  .starter__opt:not([aria-checked="true"]):hover > span { transform: translateX(0.3rem); }
  .starter__opt:not([aria-checked="true"]):hover > span::before { background: var(--paper-dim); }

  .upload__list li:hover { color: var(--paper-dim); }
  .upload__list li:hover::before { transform: scaleX(2.6); border-radius: 1px; }
  .upload__list li:hover strong { color: var(--yellow); }

  /* Odmietnutá žiadosť: prečiarknutie zhrubne, odpoveď sa rozsvieti. */
  .mimo__riadok:hover .mimo__text { background-size: 100% 6px; }
  .mimo__riadok:hover .mimo__odpoved { color: var(--paper); transform: translateX(0.25rem); }

  .titulky__row:hover dd b { transform: translateX(0.35rem); }
  .titulky__row:hover dt { color: var(--paper); }

  .roast__pult:hover, .docdemo:hover, .agent-panel:hover, .monitor:hover, .starter__stage:hover { border-color: var(--sand-deep); }

  .voices__names button:not([aria-selected="true"]):hover span { color: var(--paper); }
}

/* Magnet a naklonenie (pohyb.js): plynulý návrat cez JS lerp,
   tu len pomôcky. */
/* will-change len počas naklonenia (pohyb.js), inak by text v monitore
   mohol ostať rozmazaný v predrasterizovanej vrstve. */
[data-tilt].je-naklon { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .logo__mark, .monitor__bar .tape, .roast__tape, .starter__opt > span,
  .upload__list li::before, .upload__list strong, .mimo__odpoved, .titulky dd b,
  .voices__names button span, .auth-back svg, .pf-back svg {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }
  .btn:hover, .btn:active, .btn:hover svg { transform: none; }
}

/* =========================================================
   Výnimočné chvíle na úvode (20. 10.)
   Prešli filtrom skillu find-animation-opportunities: každá je
   raz za návštevu (rozpočet na radosť), alebo spätná väzba.
   ========================================================= */

/* „Jeden rozhovor." už neblikal ako lampa: spolu s nábehom šírky
   a kontrolkou monitora to boli tri efekty naraz na jednom mieste
   a blikanie pôsobilo ako chyba obrazovky. */



/* ---------- Koniec vysielania: titulky ako vo filme ----------
   Riadky vyjedú zdola cez masku (clip-path), meno sa potom
   roztiahne do plnej šírky. Raz, keď sa titulky ukážu. */
@media (prefers-reduced-motion: no-preference) {
  .pohyb .titulky.je-stagger.is-in > * {
    animation: pohyb-titulok 900ms var(--e-out) backwards;
    animation-delay: calc(var(--i, 0) * 260ms + 120ms);
  }
}
@keyframes pohyb-titulok {
  from { opacity: 0; transform: translateY(2.4rem); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

/* ---------- Pás tém na dotyk: zastavený ťukom (pohyb.js) ----------
   Stojí a témy dostanú atramentovú linku: teraz sa dajú vybrať. */
.topics.je-stop .topics__track { animation-play-state: paused; }
.topics.je-stop .topics__group button { box-shadow: inset 0 -2px 0 var(--ink); }

/* ---------- Pás tém: pohyb a hover (pohyb.js) ----------
   So skriptom pás neťahá CSS animácia, ale slučka v pohyb.js
   (len transform). Téma pod kurzorom: atramentová dlaždica nabehne
   z menšej mierky, text zožltne, ostatné témy ustúpia. */
.topics.je-js .topics__track { animation: none; will-change: transform; }
.topics.je-plynuly:hover .topics__track,
.topics.je-plynuly:focus-within .topics__track,
.topics.je-plynuly.je-stop .topics__track { animation-play-state: running; }

.topics__group button {
  position: relative; isolation: isolate;
  background: none;
  transition: color 200ms var(--e-out), opacity 260ms ease, transform 160ms var(--e-out);
}
.topics__group button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 3px;
  background: var(--ink);
  opacity: 0;
  transform: scale(0.82, 0.6);
  transition: opacity 180ms ease, transform 260ms var(--e-out);
}
.topics__group i { transition: opacity 260ms ease, transform 260ms var(--e-out); }
.topics__group button:active { transform: scale(0.96); }
.topics__group button:focus-visible::before { opacity: 1; transform: none; }
.topics__group button:focus-visible { color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .topics__group button:hover { background: none; color: var(--yellow); }
  .topics__group button:hover::before { opacity: 1; transform: none; }
  .topics__track:has(button:hover) button:not(:hover) { opacity: 0.45; }
  .topics__track:has(button:hover) i { opacity: 0.3; transform: rotate(45deg) scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .topics__group button, .topics__group button::before, .topics__group i { transition: color 120ms ease, opacity 120ms ease; }
  .topics__group button:active { transform: none; }
}