/* Prezentace: Kolik vody přiteče do Děčína. Světlý deck ve stylu grafů (systémové písmo, bílé karty, modrá a oranžová z grafů),
   plocha 1920 × 1080 (16:9) škálovaná na šířku i výšku okna, okolí má barvu stránky (MacBook Air 16:10 i projektor 16:9).
   Geometrie: nadpis má na každém slajdu pruh na dva řádky (164 px), bílé karty začínají všude na stejné rovině 272 px,
   v řádku mají stejnou výšku (grid align-items: stretch), uvnitř 28 px, roh 22 px a jeden stín. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --stranka: #f5f5f7; --karta: #ffffff; --text: #1d1d1f; --text2: #6e6e73; --text3: #86868b;
  --linka: #e5e5ea; --linka2: #d2d2d7;
  --modra: #167c9c; --modra-svetla: #9fcad8; --oranz: #cb6c31; --seda: #8e8e93;
  --spa1: #f2c437; --spa2: #ef6c00; --spa3: #c62828;
  --r: 22px; --r2: 14px; --pilulka: 999px;
  --stin: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
  --pismo: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --ven: cubic-bezier(0.16, 1, 0.3, 1);            /* silný ease-out pro vstupy */
  --kresli: cubic-bezier(0.3, 0.6, 0.2, 1);         /* odkrývání grafů zleva */
  --mezera: 44px;                                  /* odsazení obsahu pod pruhem nadpisu, všude stejné */
  --nadpis: 164px;                                 /* pruh nadpisu: dva řádky 76 px × 1,08 */
  --odsazeni: 28px;                                /* vnitřní odsazení karet */
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--stranka); }
body { font-family: var(--pismo); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 30px; line-height: 1.45; }
::selection { background: rgba(22, 124, 156, 0.22); }
:focus-visible { outline: 3px solid var(--modra); outline-offset: 4px; border-radius: var(--r2); }
img { max-width: 100%; }
[hidden] { display: none !important; }
b, strong { font-weight: 700; }

.jeviste { position: fixed; inset: 0; background: var(--stranka); }
.plocha { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }

/* slajd: prolnutí a posun 14 px, 400 ms ease-out; odcházející jen zhasne */
.slajd {
  position: absolute; inset: 0; box-sizing: border-box; padding: 64px 80px 56px; overflow: hidden;
  background: var(--stranka); color: var(--text); opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 400ms var(--ven), transform 400ms var(--ven), visibility 0s linear 400ms;
}
.slajd.aktivni { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms var(--ven), transform 400ms var(--ven); z-index: 2; }
.slajd.odchazi { transform: none; transition: opacity 260ms var(--ven), visibility 0s linear 260ms; }

.slajd h1 { font-weight: 700; font-size: 76px; line-height: 1.08; letter-spacing: -0.02em; margin: 0; max-width: 1540px; min-height: var(--nadpis); text-wrap: balance; }
.text { margin: 0; font-size: 30px; line-height: 1.45; text-wrap: pretty; }
.text.silny { font-weight: 600; }
.stitek, .pod-cislo, .odpoved, figcaption, .ctyri p, .varovani p, .trojcisli li > span, .overeni span, .repo > span, .pata, .citat { text-wrap: pretty; }
/* 2 · nadpis ve dvou krocích: druhá část má místo rezervované (inline, bez posunu) a nastoupí prolnutím */
.slajd h1 .dopln[data-krok] { transform: none; transition: opacity 600ms var(--ven); }
.stitek { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--text2); }
/* jediná patička v decku: licence map na slajdu 9 */
.pata { position: absolute; left: 80px; right: 80px; bottom: 26px; margin: 0; font-size: 17px; line-height: 1.3; color: var(--text3); }

/* velká čísla: číslo tučně, jednotka tlumeně */
.cislo { margin: 0; font-weight: 800; font-size: 200px; line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.cislo small { font-size: 0.4em; font-weight: 600; color: var(--text2); margin-left: 0.12em; letter-spacing: -0.01em; }
.cislo.modra { color: var(--modra); }
.cislo.mensi { font-size: 110px; line-height: 0.95; }
.cislo.mensi small { font-size: 0.4em; }
.pod-cislo { margin: 16px 0 8px; font-weight: 600; font-size: 32px; color: var(--text2); }

/* karty: jedna bílá, jeden roh, jeden stín, jedno odsazení */
.karta, .graf { background: var(--karta); border-radius: var(--r); box-shadow: var(--stin); box-sizing: border-box; padding: var(--odsazeni); }

/* řádek karta + sloupec: obě strany stejně vysoké */
.radek { display: grid; grid-template-columns: 1180px minmax(0, 1fr); gap: 56px; align-items: stretch; margin-top: var(--mezera); }
.sloupec { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.blok { display: flex; flex-direction: column; gap: 8px; }

/* grafy z PNG v bílé kartě: horních 6,5 % (nadpis grafu) je oříznuto, nadpis má slajd nebo štítek */
.graf { min-width: 0; }
.graf .orez { position: relative; overflow: hidden; aspect-ratio: 1800 / 895; border-radius: 6px; }
.graf .orez img { display: block; width: 100%; height: auto; margin-top: -6.5%; }
.graf .stitek { margin: 0 0 14px; }
.graf.siroky { width: 1240px; margin: var(--mezera) 0 0; }
.odpoved { margin: 24px 0 0; max-width: 1400px; font-size: 32px; line-height: 1.4; text-wrap: pretty; }

/* odkrývání grafů zleva: při vstupu do slajdu (třída kresli na slajdu), nebo až s krokem u grafů s data-krok */
.slajd.kresli .graf:not(.vlna):not(.tretina):not([data-krok]) .orez img { animation: odkryj 1000ms var(--kresli) 150ms both; }
.slajd.kresli .graf.tretina .orez img { animation: odkryj-tretina 1000ms var(--kresli) 150ms; }
@keyframes odkryj { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes odkryj-tretina { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 29% 0 0); } }
.graf[data-krok] .orez img { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--kresli) 120ms; }
.graf[data-krok].je .orez img { clip-path: inset(0 0 0 0); }
.hned .graf[data-krok] .orez img { transition: none; }
/* vlna: čáry se vykreslí zleva doprava pomalu (slajd 7), spouští deck.js */
.graf.vlna .orez img { clip-path: inset(0 100% 0 0); }
.graf.vlna.kresli .orez img { clip-path: inset(0 0 0 0); transition: clip-path 3200ms linear; }
.graf.vlna.hned .orez img { transition: none; }
/* třetina: třetí sloupec grafu 2b až na klepnutí */
.graf.tretina .orez img { clip-path: inset(0 29% 0 0); transition: clip-path 800ms var(--ven); }
.graf.tretina.je .orez img { clip-path: inset(0 0 0 0); }

/* kroky uvnitř slajdu */
[data-krok] { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--ven), transform 480ms var(--ven); }
[data-krok].je { opacity: 1; transform: none; }
.hned [data-krok] { transition: none; }

/* vstup prvků slajdu po 70 ms (třídu vstup a zpoždění přiděluje deck.js jen při pohybu dopředu) */
.vstup { opacity: 0; animation: vstup 600ms var(--ven) var(--zpozdeni, 0ms) both; }
@keyframes vstup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 1 · video: krok 0 poster a věta v pilulce, krok 1 video běží, krok 2 (třída je-karta z deck.js) se rám videa zmenší z celé plochy
   do karty vpravo: měřítko 0,55 dává celé pixely (1056 × 594), karta 784–1840 × 272–866, pravý okraj jako ostatní karty;
   roh 40 px před měřítkem = 22 px, stín jako karty (před měřítkem 1/0,55); vlevo nadpis a 18 h na čisté ploše.
   will-change jen po dobu přechodu (deck.js), ať se obraz v kartě vykreslí ostře; žádný filtr ani průhlednost na obsahu. */
.video { padding: 0; }
.video-ram {
  position: absolute; inset: 0; overflow: hidden; transform-origin: 0 0; border-radius: 0; background: var(--stranka); cursor: pointer;
  transition: transform 500ms var(--ven), border-radius 500ms var(--ven), box-shadow 500ms var(--ven);
}
.video-ram video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.video.je-karta .video-ram { transform: translate(784px, 272px) scale(0.55); border-radius: 40px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 54px rgba(0, 0, 0, 0.06); }
.video.hned .video-ram { transition: none; }
/* ukazatel stahování videa: malá tlumená pilulka v levém dolním rohu, zmizí prolnutím, jakmile je video stažené (deck.js) */
.video-nacita {
  position: absolute; left: 40px; bottom: 40px; z-index: 3; margin: 0; padding: 10px 22px 12px; border-radius: var(--pilulka); pointer-events: none;
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
  font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--text2); font-variant-numeric: tabular-nums; transition: opacity 300ms var(--ven);
}
.video-nacita.hotovo { opacity: 0; }
/* popisek pod kartou videa: zarovnaný na levý okraj karty (784), 16 px pod její spodní hranou (866) */
.video-popis { position: absolute; left: 784px; top: 882px; margin: 0; font-size: 22px; line-height: 1.3; color: var(--text3); white-space: nowrap; }
.jen-tisk, .tisk-popis { display: none; }
/* věta během přehrávání: skleněná pilulka dole uprostřed, nad lištou přehrávače ve videu (dolních 180 px); s kartou zmizí */
.veta {
  position: absolute; left: 50%; bottom: 200px; margin: 0; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  padding: 18px 40px 20px; border-radius: var(--pilulka); background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 36px rgba(0, 0, 0, 0.14);
  font-weight: 600; font-size: 36px; line-height: 1.25; letter-spacing: -0.01em; color: var(--text2);
  opacity: 0; transition: opacity 600ms var(--ven), transform 600ms var(--ven);
}
.veta b { font-weight: 700; color: var(--text); }
.aktivni .veta { opacity: 1; transition-delay: 500ms; }
.video.je-karta .veta { opacity: 0; transform: translateX(-50%) translateY(12px); transition: opacity 250ms var(--ven), transform 250ms var(--ven); }
/* nadpis v pruhu nadpisu jako na ostatních slajdech, 18 h vlevo od karty; nastupují 200 ms po startu zmenšení videa */
.uvod { position: absolute; inset: 0; box-sizing: border-box; padding: 64px 80px 56px; pointer-events: none; }
.uvod.je { transition-delay: 200ms; }
/* horní hrana číslic 18 na rovině karet 272 px (Inter: verzálky 0,727 em, řádek 0,9 em, číslice začínají 23 px pod horní hranou řádku) */
.obri-blok { position: absolute; left: 80px; top: 272px; width: 640px; }
.obri { margin: -22px 0 0; font-weight: 800; font-size: 260px; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.obri small { font-size: 0.4em; font-weight: 600; color: var(--modra); margin-left: 0.1em; letter-spacing: -0.02em; }
.pod-obri { margin: 18px 0 0; font-weight: 600; font-size: 32px; line-height: 1.3; color: var(--text2); text-wrap: balance; }
.video .reka-mini { opacity: 0; transition: opacity 400ms var(--ven) 200ms; }
.video.je-karta .reka-mini { opacity: 1; }
.foto { margin: 0; }
.foto img { display: block; width: 880px; height: 560px; object-fit: cover; object-position: 50% 60%; border-radius: var(--r); box-shadow: var(--stin); }
.foto figcaption { margin: 16px 6px 0; font-size: 28px; line-height: 1.35; color: var(--text2); }

/* 2 · mapa hlavních stanic: tenké řeky, popisek stanice s dobou doběhu do Děčína; karta mapy 656 px = graf 486 + 44 + trojčíslí 126 */
.mapa-radek { grid-template-columns: 800px minmax(0, 1fr); gap: 56px; }
.mapa-reky { margin: 0; }
.mapa-reky svg { display: block; width: 744px; height: 600px; overflow: visible; }
.mapa-reky figcaption { margin: 14px 6px 0; font-size: 28px; line-height: 1.35; color: var(--text2); max-width: 940px; }
.mapa-sloupec { gap: 44px; }
#mapa .tok { fill: none; stroke: var(--modra); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#mapa .pritok { stroke: var(--modra-svetla); stroke-width: 3.5; }
#mapa .stanice circle { fill: var(--karta); stroke: var(--modra); stroke-width: 4.5; }
#mapa .stanice.cil circle { fill: var(--modra); }
#mapa .stanice text { font-family: var(--pismo); font-size: 44px; fill: var(--text); font-weight: 500; paint-order: stroke; stroke: var(--karta); stroke-width: 9px; stroke-linejoin: round; }
#mapa .stanice text tspan.cas { fill: var(--text2); font-weight: 500; font-size: 36px; }
#mapa .stanice.cil text { font-weight: 700; }
#mapa .reka-nazev { font-family: var(--pismo); font-weight: 600; font-size: 40px; fill: var(--modra); paint-order: stroke; stroke: var(--karta); stroke-width: 8px; stroke-linejoin: round; }
/* tah řek 0,9 s, přítoky 0,7 s po 0,2 s, stanice po 45 ms od 0,38 s (deck.js): všechny popisky vidět do 1,2 s od příchodu */
#mapa .stanice, #mapa .reka-nazev { opacity: 0; transition: opacity 400ms var(--ven); }
#mapa .tok { transition: stroke-dashoffset 900ms cubic-bezier(0.4, 0, 0.3, 1); }
#mapa .pritok { transition-duration: 700ms; transition-delay: 200ms; }
#mapa.hotovo .stanice, #mapa.hotovo .reka-nazev { opacity: 1; }
#mapa.hned * { transition: none !important; }
.trojcisli { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.trojcisli li { display: flex; flex-direction: column; padding: 0 30px; border-left: 1px solid var(--linka2); min-width: 0; }
.trojcisli li:first-child { padding-left: 0; border-left: 0; }
.trojcisli li:last-child { padding-right: 0; }
.trojcisli b { font-weight: 800; font-size: 84px; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trojcisli b small { font-size: 0.45em; font-weight: 600; color: var(--text2); margin-left: 0.1em; }
.trojcisli li > span { margin-top: 10px; font-size: 28px; line-height: 1.3; color: var(--text2); }

/* 3 · vstupy: mřížka 14 veličin × 7 časů, hladina tmavě modře, průtok světle modře; vpravo karta s číslem a graf, obě strany stejně vysoké */
.vstupy-radek { grid-template-columns: 820px minmax(0, 1fr); gap: 56px; }
.vstupy-karta { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.skupina { display: grid; grid-template-columns: 150px minmax(0, 1fr) repeat(7, 36px); column-gap: 12px; row-gap: 8px; align-items: center; }
.skupina .rail { grid-column: 1; grid-row: 1; margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--text2); }
.skupina .rail.hladina { color: var(--modra); }
.skupina .nazev { grid-column: 2; margin: 0; font-size: 26px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* popisky časů nesou klíč k mřížce (zpoždění 0–24 h hladiny, 0–36 h průtoku): 23 px, ne pod 22 */
.skupina .cas-popis { grid-column: 2; margin: 0; font-size: 23px; line-height: 1.2; color: var(--text2); text-align: right; }
.skupina .cas { margin: 0; font-size: 23px; line-height: 1.2; color: var(--text2); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bunka { width: 30px; height: 30px; border-radius: 7px; background: var(--modra-svetla); justify-self: center; }
.bunka.hl { background: var(--modra); }
.slajd.kresli .bunka { opacity: 0; animation: bunka 360ms var(--ven) calc(160ms + var(--i) * 6ms) forwards; }
@keyframes bunka { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
.vstupy-sloupec { gap: 24px; }
.vstupy-cislo { flex: 1; }
.vstupy-cislo .cislo { margin-top: 8px; color: var(--modra); }

/* 4 · cesta k modelu: graf přes slajd, skupiny sloupců odkrývají bílé kryty */
.graf.cely-slajd { width: 1480px; margin: var(--mezera) 0 0; }
.kryt { position: absolute; left: 0; right: 0; background: var(--karta); }
.kryt[data-krok] { opacity: 1; transform: none; transition: opacity 600ms var(--ven); }
.kryt[data-krok].je { opacity: 0; }

/* 5 · součet: SVG vyplní kartu od kraje ke kraji (vnitřek 1108 × 696 px = viewBox), vpravo číslo na horní hraně karty, dole citát ze zadání */
.soucet-radek { grid-template-columns: 1164px minmax(0, 1fr); }
#soucet { display: block; width: 1108px; height: 696px; overflow: visible; }
#soucet text { font-family: var(--pismo); font-size: 28px; fill: var(--text2); }
#soucet .hodnota { font-weight: 700; font-size: 40px; letter-spacing: -0.02em; fill: var(--text); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--karta); stroke-width: 8px; stroke-linejoin: round; }
#soucet .kategorie { fill: var(--text); font-size: 26px; }
#soucet .kategorie.silna { font-weight: 700; }
#soucet .mriz { stroke: var(--linka); stroke-width: 2; }
#soucet .osa { stroke: var(--linka2); stroke-width: 2; }
#soucet .spa { stroke-width: 3; stroke-dasharray: 12 9; stroke-linecap: round; }
#soucet .spa.spa1 { stroke: var(--spa1); }
#soucet .spa.spa2 { stroke: var(--spa2); }
#soucet .spa.spa3 { stroke: var(--spa3); }
#soucet .spa-stitek text { font-size: 28px; font-weight: 600; fill: #fff; }
#soucet .spa-stitek.spa1 rect { fill: var(--spa1); }
#soucet .spa-stitek.spa1 text { fill: var(--text); }
#soucet .spa-stitek.spa2 rect { fill: var(--spa2); }
#soucet .spa-stitek.spa3 rect { fill: var(--spa3); }
#soucet .sloupec { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 700ms var(--ven); }
#soucet .sloupec.shora { transform-origin: 50% 0; }
#soucet .sloupec.je, #soucet .sloupec.zaklad { transform: scaleY(1); }
#soucet .zaklad { transition-delay: 150ms; }
#soucet .hodnota[data-krok] { transform: translateY(12px); }
#soucet .hodnota[data-krok].je { transform: none; }
.soucet-sloupec { gap: 0; }
.soucet-sloupec .cislo { margin: -10px 0 0; font-size: 130px; line-height: 0.9; transition: color 400ms var(--ven); }
.soucet-sloupec .cislo.varuje { color: var(--spa3); }
.soucet-sloupec .stitek { margin-top: 12px; white-space: nowrap; letter-spacing: -0.01em; }
.scitani { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.scitani li { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0 6px; border-top: 1px solid var(--linka); font-size: 28px; line-height: 1.2; }
.scitani li:first-child { border-top: 0; }
.scitani b { font-weight: 700; font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.varovani { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.varovani p { margin: 0; font-size: 28px; line-height: 1.35; }
.odznak { display: inline-block; align-self: flex-start; padding: 9px 20px 11px; border-radius: var(--pilulka); font-weight: 600; font-size: 28px; line-height: 1; }
.odznak.spa1 { background: var(--spa1); color: var(--text); }
.odznak.spa2 { background: var(--spa2); color: #fff; }
.odznak.spa3 { background: var(--spa3); color: #fff; }
.citat { margin: auto 0 0; padding-top: 24px; font-size: 30px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.citat span { font-weight: 500; color: var(--text3); margin-left: 8px; white-space: nowrap; }
.citat span::before { content: "· "; }

/* 6 · ověření */
.overeni { list-style: none; margin: 0; padding: 0; counter-reset: krok; display: flex; flex-direction: column; }
.overeni li { counter-increment: krok; display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 12px 0 14px; border-top: 1px solid var(--linka); }
.overeni li:first-child { border-top: 0; padding-top: 0; }
.overeni li::before { content: counter(krok); grid-row: 1 / span 2; font-weight: 800; font-size: 60px; line-height: 0.95; letter-spacing: -0.03em; color: var(--modra); font-variant-numeric: tabular-nums; }
.overeni b { font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: -0.015em; }
.overeni span { font-size: 28px; line-height: 1.35; color: var(--text2); margin-top: 4px; }
#s-overeni .sloupec .text { font-size: 28px; }

/* 7 · Boris, −55 % a 2013: vlevo graf Borise a řádek 2013, vpravo karta se dvěma čísly a malý graf, obě karty na stejné rovině */
.boris-radek { grid-template-columns: 860px minmax(0, 1fr); gap: 56px; }
.boris-radek .sloupec { gap: 24px; }
.boris-radek .graf.vlna { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dve-cisla { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.dve-cisla .cislo { font-size: 110px; }
.dve-cisla .cislo small { font-size: 0.4em; }
.dve-cisla .pod-cislo { margin: 12px 0 0; font-size: 22px; line-height: 1.3; font-weight: 500; text-wrap: pretty; }
.radek-2013 { font-size: 26px; line-height: 1.35; color: var(--text2); text-wrap: pretty; }
.radek-2013 b { color: var(--text); }

/* 8 · mapa rozlivu přes slajd, klikací (živá mapa v nové kartě), dole věta, adresa a QR webu */
/* snímek končí na 1720 px; výška 576 px, ať se pod něj vejde QR 150 px */
.snimek-mapy { display: block; position: relative; margin: var(--mezera) 0 0; width: 1640px; height: 576px; border-radius: var(--r); overflow: hidden; box-shadow: var(--stin); background: var(--karta); color: inherit; text-decoration: none; }
.snimek-mapy img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pilulka {
  position: absolute; right: 24px; bottom: 24px; padding: 11px 22px 13px; border-radius: var(--pilulka);
  background: rgba(255, 255, 255, 0.92); color: var(--text); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
  box-shadow: var(--stin); backdrop-filter: blur(14px); transition: background-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .snimek:hover .pilulka { background: var(--modra); color: #fff; } }
/* tlačítko uprostřed snímku: sklo, ikona mapy, odkazem je celý snímek; hover zvětší o 3 %, stisk lehce zmenší */
.tlacitko-mapa {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 64px; box-sizing: border-box; padding: 0 30px 0 24px;
  display: inline-flex; align-items: center; gap: 14px; border-radius: var(--pilulka); white-space: nowrap;
  background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 36px rgba(0, 0, 0, 0.2);
  color: var(--text); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -0.01em;
  transition: transform 220ms var(--ven), background-color 160ms ease;
}
.tlacitko-mapa svg { width: 28px; height: 28px; display: block; flex: none; }
@media (hover: hover) and (pointer: fine) { .snimek-mapy:hover .tlacitko-mapa { transform: translate(-50%, -50%) scale(1.03); background: rgba(255, 255, 255, 0.82); } }
.snimek-mapy:active .tlacitko-mapa { transform: translate(-50%, -50%) scale(0.98); transition-duration: 100ms; }
.web-radek { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: center; margin-top: 20px; width: 1640px; }
.web-radek .text { font-size: 28px; line-height: 1.4; color: var(--text2); max-width: 1100px; }
.repo.web { flex-direction: row; text-align: left; }
.repo.web svg { width: 150px; height: 150px; }
.repo.web b { display: block; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .repo.web:hover b { color: var(--modra); } }

/* Z10 · snímek aplikace bez ořezu (16:9), klikací */
.snimek { display: block; position: relative; margin: var(--mezera) 0 0; width: 1120px; border-radius: var(--r); overflow: hidden; box-shadow: var(--stin); background: var(--karta); color: inherit; text-decoration: none; }
.snimek img { display: block; width: 100%; height: auto; }

/* 9 · závěr: tři karty vedle sebe, pak závěrečná věta a QR */
.ctyri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: var(--mezera) 0 0; }
.ctyri > div { padding: var(--odsazeni); background: var(--karta); border-radius: var(--r); box-shadow: var(--stin); box-sizing: border-box; min-width: 0; }
.ctyri.tri { grid-template-columns: repeat(3, 1fr); }
.ctyri b { display: block; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: var(--modra); }
.ctyri p { margin: 14px 0 0; font-size: 32px; line-height: 1.4; text-wrap: pretty; }
.zaver { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: start; }
.zaver-veta { margin: 0; font-weight: 700; font-size: 60px; line-height: 1.1; letter-spacing: -0.02em; max-width: 1180px; text-wrap: balance; }
.dekujeme { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.dekujeme p { margin: 0; font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -0.02em; }
.repo { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--text2); font-size: 28px; line-height: 1.3; text-align: right; flex-direction: row-reverse; }
.repo svg { width: 150px; height: 150px; display: block; border-radius: var(--r2); box-shadow: var(--stin); }
@media (hover: hover) and (pointer: fine) { .repo:hover { color: var(--modra); } }

/* Z7 · rozliv */
.rozliv-radek { grid-template-columns: minmax(0, 1fr) 880px; gap: 72px; }
.rozliv-radek .text { max-width: 820px; }
.rozliv-radek .trojcisli { margin-top: 44px; flex-direction: column; gap: 22px; }
.rozliv-radek .trojcisli li { padding: 0; border-left: 0; flex-direction: row; align-items: baseline; gap: 22px; }
.rozliv-radek .trojcisli b { font-size: 76px; min-width: 250px; }
.rozliv-radek .trojcisli li > span { margin-top: 0; }

/* ukazatel průběhu: linie řeky je součást mřížky slajdu, ne plovoucí prvek: pravý okraj na pravém okraji obsahu (1840), horní okraj na horní
   hraně nadpisu (64), spodní okraj popisku „Praha“ na 232 = 40 px nad rovinou karet 272; sloupec vpravo 160 px (nadpis končí nejdál na 1620).
   Box 56 × 168 px, viewBox 350 × 1106 (deck.js, xMaxYMin meet: výška určuje měřítko 0,152, obsah 53 px široký sedí na pravém okraji).
   Tečka Praha → Děčín putuje po linii (deck.js, rAF, 700 ms),
   kolem ní měkké halo pulzuje 2,4 s (jen na aktivním slajdu); na slajdu 1 se linie nakreslí tahem (stroke-dashoffset, deck.js). */
.reka-mini { position: absolute; right: 80px; top: 64px; width: 56px; height: 168px; overflow: visible; pointer-events: none; }
.reka-mini path { fill: none; stroke: var(--modra); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.reka-mini path.kresli { transition: stroke-dashoffset 1200ms cubic-bezier(0.4, 0, 0.3, 1); }
.reka-mini .tecka circle { fill: var(--modra); stroke: var(--stranka); stroke-width: 15; }
.reka-mini .tecka .halo { stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.slajd.aktivni .reka-mini .tecka .halo { animation: pulz 2400ms var(--ven) infinite; }
@keyframes pulz { 0% { transform: scale(1); opacity: 0.35; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
.reka-mini text { font-family: var(--pismo); font-weight: 600; font-size: 150px; fill: var(--text2); }

/* poznámky řečníka se stopkami (od prvního posunu; od 6:30 oranžové, od 7:00 červené) */
.poznamky {
  position: absolute; right: 0; top: 0; bottom: 0; width: 640px; box-sizing: border-box; padding: 44px 44px 36px; z-index: 6;
  background: var(--karta); color: var(--text); box-shadow: -1px 0 0 var(--linka), -20px 0 60px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 20px;
}
.poznamky[hidden] { display: none; }
.poznamky-hlava { margin: 0; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; color: var(--modra); }
.poznamky-hlava #hud-cas { flex: none; font-variant-numeric: tabular-nums; color: var(--text2); }
.poznamky-hlava #hud-cas.pozor { color: var(--spa2); }
.poznamky-hlava #hud-cas.pres { color: var(--spa3); }
.poznamky-text { flex: 1; overflow: auto; font-size: 28px; line-height: 1.45; color: var(--text); scrollbar-width: thin; scrollbar-color: var(--linka2) transparent; }
.poznamky-text p { margin: 0 0 18px; }
.poznamky-text p.krok { color: var(--modra); font-weight: 600; }
.poznamky-text p.zdroj { color: var(--text3); font-size: 24px; }
.poznamky-klavesy { margin: 0; font-size: 22px; line-height: 1.4; color: var(--text3); }

.cerna { position: absolute; inset: 0; background: #000; z-index: 9; }
.cerna[hidden] { display: none; }

/* omezený pohyb: všechno hned, bez posunů */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  .slajd, .vstup, [data-krok] { transform: none !important; }
  .reka-mini .tecka .halo { animation: none !important; opacity: 0 !important; }
}

/* tisk: každý slajd jedna stránka 16:9, bez animací, všechno odkryté, bez poznámek */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { overflow: visible; height: auto; background: #fff; }
  .jeviste { position: static; }
  .plocha { position: static; transform: none !important; width: 1920px; height: auto; }
  .slajd { position: relative; width: 1920px; height: 1080px; opacity: 1 !important; visibility: visible !important; transform: none !important; break-after: page; page-break-after: always; }
  .slajd:last-of-type { break-after: auto; page-break-after: auto; }
  [data-krok], .vstup, .bunka { opacity: 1 !important; transform: none !important; animation: none !important; }
  .graf .orez img { clip-path: none !important; transition: none !important; animation: none !important; }
  #soucet .sloupec { transform: none !important; }
  #mapa .tok { stroke-dashoffset: 0 !important; }
  #mapa .stanice, #mapa .reka-nazev { opacity: 1 !important; }
  .reka-mini path { stroke-dashoffset: 0 !important; }
  .video .video-ram { transform: translate(784px, 272px) scale(0.55); border-radius: 40px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 54px rgba(0, 0, 0, 0.06); }
  .video-ram video { display: none; }
  .video-nacita { display: none !important; }
  .jen-tisk { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .video .reka-mini { opacity: 1 !important; }
  .poznamky, .cerna, .pilulka, .tlacitko-mapa { display: none !important; }
  .video .veta { display: none; }
  .tisk-popis { display: block; }
  .kryt { opacity: 0 !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* slajd 8: krok 1 ukáže schéma výpočtu rozlivu přes snímek mapy */
.snimek-mapy .schema { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #fff; padding: 12px 24px; box-sizing: border-box; opacity: 0; transition: opacity 420ms ease-out; }
.snimek-mapy .schema.je { opacity: 1; }
.snimek-mapy:has(.schema.je) .tlacitko-mapa { opacity: 0; pointer-events: none; }
@media print {
  .snimek-mapy .schema, .snimek-mapy .schema.je { opacity: 1; inset: auto 28px 28px auto; width: 46%; height: 64%; padding: 8px 12px; border-radius: 14px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }
}

/* Dotažení animací: jednotná křivka --ven, nic nového se neobjevuje skokem.
   Přechod zpět: přicházející slajd přijede shora (třídu zpet dává deck.js jen na okamžik před aktivací, pak ji odebere). */
.slajd.zpet:not(.aktivni) { transform: translateY(-14px); transition: none; }
/* „hned“ (vstup zpět, tisk): kroky i jejich potomci bez přechodu, i tam, kde má prvek vlastní přechod (dopln, kryt, schéma, sloupce součtu) */
.slajd.hned [data-krok], .slajd.hned [data-odkryj], .slajd.hned [data-krok] *, .slajd.hned [data-odkryj] * { transition: none !important; }
/* kaskáda potomků bloku, který nastupuje krokem (úvod, trojčíslí, varování, závěr, dvě čísla): blok nastoupí, potomci po 70 ms, nejvýš 8;
   při kroku zpět mizí všichni spolu a rychleji */
[data-krok][data-kaskada] > * { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ven), transform 420ms var(--ven); transition-delay: calc(var(--start, 0ms) + var(--n, 0) * 70ms); }
[data-krok][data-kaskada].je > * { opacity: 1; transform: none; }
[data-krok][data-kaskada]:not(.je) > * { transition-delay: 0ms; transition-duration: 300ms; }
[data-kaskada] > :nth-child(2) { --n: 1; }
[data-kaskada] > :nth-child(3) { --n: 2; }
[data-kaskada] > :nth-child(4) { --n: 3; }
[data-kaskada] > :nth-child(5) { --n: 4; }
[data-kaskada] > :nth-child(6) { --n: 5; }
[data-kaskada] > :nth-child(7) { --n: 6; }
[data-kaskada] > :nth-child(n + 8) { --n: 7; }
.uvod[data-kaskada] { --start: 200ms; }
/* 8 · schéma rozlivu: čisté prolnutí bez posunu (kryje celý snímek), tlačítko mapy pod ním zhasne prolnutím, ne skokem */
.snimek-mapy .schema, .snimek-mapy .schema.je { transform: none; transition: opacity 420ms var(--ven); }
.tlacitko-mapa { transition: transform 220ms var(--ven), background-color 160ms ease, opacity 240ms var(--ven); }
/* 5 · sloupce součtu rostou a zároveň se prolnou */
#soucet .sloupec { transition: transform 700ms var(--ven), opacity 320ms var(--ven); }
@media (prefers-reduced-motion: reduce) {
  .slajd.zpet, [data-kaskada] > * { transform: none !important; }
}
@media print {
  [data-kaskada] > * { opacity: 1 !important; transform: none !important; }
}