/* =========================================================
   Úvod: podpisové chvíle relácie (assets/js/uvod-scena.js)
   ---------------------------------------------------------
   Každá je raz za návštevu alebo pri prepnutí citátu, len
   transform, opacity, clip-path, farba a os šírky písma.
   Krivky zo svet.css (--e-out, --e-io).
   ========================================================= */

/* ---------- 1. Hero: nadpis sa roztočí na osi šírky ----------
   Do štartu je nadpis skrytý. Poistka: keby skript nebežal,
   ukáže sa sám po 1,2 s. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.hero-start) .hero h1 { opacity: 0; animation: hero-poistka 0s linear 1.2s forwards; }
}
@keyframes hero-poistka { to { opacity: 1; } }
.hero h1.je-sirka .hw {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1.je-sirka .hw {
    animation: hero-sirka 1100ms var(--e-io) backwards;
    animation-delay: calc(var(--w, 0) * 85ms + 120ms);
  }
}
@keyframes hero-sirka {
  0% { font-stretch: 62%; opacity: 0; transform: translateY(0.18em); }
  35% { opacity: 1; transform: none; }
  100% { font-stretch: 110%; opacity: 1; transform: none; }
}

/* ---------- 2. Zvuková vlna pod citátmi ----------
   64 tyčiek. Pri novom citáte sa prehrajú zľava doprava:
   vyskočia nad svoju výšku a usadia sa rozsvietené. Kým
   neprešli, sú zhasnuté v ryhe pultu. */
.voices__vlna {
  display: flex; align-items: center; gap: 3px;
  height: 2.6rem;
  margin-top: 1.4rem;
  max-width: 34rem;
}
.voices__vlna i {
  flex: 1 1 0;
  height: 100%;
  border-radius: 2px;
  background: var(--ink-line);
  transform: scaleY(0.08);
  transform-origin: center;
}
.voices__vlna.hra i {
  background: var(--yellow);
  transform: scaleY(var(--h, 0.3));
}
@media (prefers-reduced-motion: no-preference) {
  .voices__vlna.hra i {
    animation: vlna-hra 520ms var(--e-out) backwards;
    animation-delay: calc(var(--i, 0) * 22ms);
  }
  /* Kým je citát zastavený (kurzor nad ním), vlna stojí s ním. */
  .voices.je-pauza .voices__vlna i { animation-play-state: paused; }
}
@keyframes vlna-hra {
  0% { transform: scaleY(0.08); background: var(--ink-line); }
  45% { transform: scaleY(calc(var(--h, 0.3) * 1.35 + 0.1)); background: var(--yellow-light); }
  100% { transform: scaleY(var(--h, 0.3)); background: var(--yellow); }
}

/* ---------- 3. Mimo programu: pečiatka ----------
   Keď zoznam odmietnutí nabehne a prečiarknutia sa dotiahnu,
   dopadne naň pečiatka (červená zóna = odmietnutie). Zoznam
   pod dopadom o pixel cukne. */
.mimo__zoznam { position: relative; }
.mimo__peciatka {
  position: absolute; z-index: 1;
  right: 0; top: -1.6rem;
  padding: 0.45rem 0.75rem 0.4rem;
  border: 3px solid var(--clay);
  border-radius: 6px;
  color: var(--clay-text);
  font: 800 clamp(1rem, 0.85rem + 0.6vw, 1.35rem)/1 var(--font-body);
  font-stretch: 92%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Malý náklon: pri -7° bolo zúžené písmo rozmazané. */
  transform: rotate(-2.5deg);
  pointer-events: none;
  mix-blend-mode: normal;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
}
@media (max-width: 639px) { .mimo__peciatka { top: -1.2rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js .mimo__zoznam:not(.is-in) .mimo__peciatka { opacity: 0; }
  .js .mimo__zoznam.is-in .mimo__peciatka { animation: peciatka 460ms var(--e-out) backwards 1150ms; }
  /* Reveal (settle) musí zostať, inak by zoznam ostal neviditeľný. */
  .js .mimo__zoznam[data-reveal].is-in {
    animation: settle 0.55s var(--ease) forwards, peciatka-dopad 260ms var(--e-out) 1330ms;
    animation-delay: var(--delay, 0ms), 1330ms;
  }
}
/* Dopad bez zväčšenia: Chrome po animácii so scale nechal písmo
   rasterizované v inej mierke a pečiatka ostala rozmazaná. Len
   posun, náklon a priehľadnosť. */
@keyframes peciatka {
  0% { opacity: 0; transform: translateY(-0.9rem) rotate(-7deg); }
  55% { opacity: 1; transform: translateY(0.12rem) rotate(-2deg); }
  100% { opacity: 1; transform: rotate(-2.5deg); }
}
@keyframes peciatka-dopad {
  0%, 100% { translate: 0 0; }
  35% { translate: 0 2px; }
}

/* ---------- 4. Pult hovoru: autotest diód ----------
   Keď sa pult ukáže prvý raz, diódy tém a klávesy tónu sa
   rozsvietia jedna po druhej a zhasnú, ako pri zapnutí. */
@media (prefers-reduced-motion: no-preference) {
  .js .agent-panel.is-in .call-topics span::before {
    animation: dioda-test 520ms steps(1, end) backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 820ms);
  }
  .js .agent-panel.is-in .call-mode__seg span {
    animation: kluc-test 520ms steps(1, end) backwards;
    animation-delay: calc((var(--i, 0) - 4) * 110ms + 1350ms);
  }
}
@keyframes dioda-test {
  0% { background: var(--ink-line); }
  20%, 70% { background: var(--yellow); }
  71%, 100% { background: var(--ink-line); }
}
@keyframes kluc-test {
  0% { border-color: var(--sand-deep); }
  20%, 70% { border-color: var(--yellow); color: var(--paper); }
  71%, 100% { border-color: var(--sand-deep); }
}

/* ---------- 5. Napíš do štúdia: panel sa naplní ako VU meter ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .studio-post[data-reveal].is-in {
    animation: studio-plnenie 900ms var(--e-out) both;
    animation-delay: var(--delay, 0ms);
  }
  .js .studio-post[data-reveal].is-in > * { animation: pohyb-nabeh 520ms var(--e-out) backwards; }
  .js .studio-post[data-reveal].is-in > :nth-child(1) { animation-delay: 520ms; }
  .js .studio-post[data-reveal].is-in > :nth-child(2) { animation-delay: 600ms; }
  .js .studio-post[data-reveal].is-in > :nth-child(3) { animation-delay: 680ms; }
}
@keyframes studio-plnenie {
  from { opacity: 1; clip-path: inset(100% 0 0 0 round 20px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 20px); }
}

/* =========================================================
   Nábehy v štýle štúdia (20. 10.)
   ---------------------------------------------------------
   Namiesto všeobecného „vyjde zdola" má každý druh vecí svoj
   nástup podľa toho, čím v štúdiu je:
     - prístroje (pult roastu, prompter, dokument, pult hovoru)
       sa ZAPNÚ ako obrazovka: najprv svietiaca čiara, tá sa
       roztiahne do šírky, potom do výšky, obsah naskočí po nej,
     - úvodné odseky sekcií vyjdú zo štrbiny promptera,
     - zoznamy sa VYTLAČIA riadok po riadku zhora,
     - žltý pás tém sa odvinie ako páska.
   Raz pri prvom zobrazení, transform/opacity/clip-path.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Prístroje: zapnutie obrazovky ----------
     Zapnutie ako CRT má len pult hovoru, je to vrchol stránky
     (ON AIR). Štyrikrát za sebou pôsobilo ako šablóna a obsah
     čakal pol sekundy. Ostatné prístroje sa len usadia. */
  .js .agent-panel[data-reveal].is-in {
    animation: zapni-obraz 760ms both;
    animation-delay: var(--delay, 0ms);
    transform-origin: 50% 50%;
  }
  .js .agent-panel[data-reveal].is-in > * {
    animation: pohyb-nabeh 460ms var(--e-out) backwards;
    animation-delay: calc(var(--delay, 0ms) + 560ms);
  }
  .js .roast__pult[data-reveal].is-in,
  .js .docdemo[data-reveal].is-in {
    animation: pohyb-monitor 700ms var(--e-out) both;
    animation-delay: var(--delay, 0ms);
  }
  .js #starter.is-in .starter__stage { animation: pohyb-monitor 700ms var(--e-out) both 120ms; }

  /* ---------- Úvodné odseky: zo štrbiny promptera ---------- */
  .js .section__head[data-reveal].is-in > p,
  .js .nove-v2__head[data-reveal].is-in > p {
    animation: zo-strbiny 720ms var(--e-out) backwards;
    animation-delay: 380ms;
  }

  /* ---------- Zoznamy: tlač riadok po riadku ---------- */
  .pohyb .upload__list.je-stagger.is-in > *,
  .pohyb .nove-v2__list.je-stagger.is-in > *,
  .pohyb .mimo__zoznam.je-stagger.is-in > .mimo__riadok {
    animation: tlac-riadok 520ms var(--e-out) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 160ms);
  }

  /* ---------- Pás tém: odvinie sa ako páska ---------- */
  .js .topics { animation: odvin-pasku 1000ms var(--e-io) backwards 650ms; }
}

/* Zapnutie obrazovky: čiara sa rozsvieti, roztiahne do šírky,
   potom sa otvorí do výšky. Bez žiary, len tvar a priehľadnosť. */
/* Čiara svieti farbou papiera (ako luminofor), pri otvorení
   stmavne do farby panela. Žiadny tieň ani žiara. */
@keyframes zapni-obraz {
  0% { opacity: 0; transform: scale(0.4, 0.006); background-color: var(--paper); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  10% { opacity: 1; transform: scale(0.4, 0.006); background-color: var(--paper); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  42% { opacity: 1; transform: scale(1, 0.006); background-color: var(--paper); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes zo-strbiny {
  from { opacity: 0; transform: translateY(1.1em); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes tlac-riadok {
  from { opacity: 0.25; clip-path: inset(0 0 100% 0); transform: translateY(-4px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes odvin-pasku {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* =========================================================
   Opravy z prechodu webom (20. 10.)
   ========================================================= */

/* Podčiarknutie „do štúdia": po rozdelení na slová (inline-block)
   sa text-decoration z <em> do slov nededí a ostala čiara len pod
   medzerou („the_studio"). Čiara ide priamo na slová. */
.studio-post h3.je-nadpis em { text-decoration: none; }
.studio-post h3.je-nadpis em .slovo {
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
}

/* Zložené slovo sa nelomí cez riadok („sugar-/coating"). */
.nezalom { white-space: nowrap; }

/* Upozornenie pod pultom hovoru: zarovnané s obsahom panela,
   nie úzky stĺpec v strede. */
body .agent-panel p.notice.notice--short { max-width: none; margin-left: 0; margin-right: 0; }

/* Plávajúca klávesa „Začni hovor" ustúpi, kým človek roluje dole
   a číta, a vráti sa, keď zastaví alebo roluje hore. Nezakrýva text. */
.agent-lock { transition: border-color .3s ease, box-shadow .35s var(--ease), transform 280ms var(--e-out), opacity 200ms ease, background-color .3s ease; }
.agent-lock.je-ustup { transform: translateY(calc(100% + 2.5rem)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .agent-lock.je-ustup { transform: none; }
}

/* ---------- Pult hovoru: priebeh relácie ----------
   Ľavá polovica pultu bola prázdna. Teraz tam je rozpis relácie
   ako tlačený program: páska, štyri riadky s číslom. */
.priebeh { margin-top: 2rem; max-width: 30rem; }
.priebeh__zoznam { list-style: none; margin: 0.9rem 0 0; padding: 0; border-top: 1px solid var(--ink-line); }
.priebeh__zoznam li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.6rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.98rem; line-height: 1.5; color: var(--paper-dim);
}
.priebeh__zoznam b {
  font: 800 0.74rem/1.9 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.14em; color: var(--sand-deep);
}
.priebeh__zoznam li:first-child b { color: var(--yellow); }
@media (prefers-reduced-motion: no-preference) {
  .pohyb .priebeh__zoznam.je-stagger.is-in > * {
    animation: tlac-riadok 520ms var(--e-out) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 700ms);
  }
}

/* ---------- Dokumenty: nadpis na šesť riadkov bol priveľa ---------- */
@media (min-width: 1024px) {
  #dokumenty .wrap { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  #dokumenty .section__head h2 { font-size: clamp(2rem, 1.2rem + 1.9vw, 2.8rem); }
}


/* Na úzkom displeji by rozpis odsunul ON AIR pod ohyb; tam ho
   vynecháme, hlavná vec je dostať sa k hovoru. */
@media (max-width: 899px) { .priebeh { display: none; } }