/*
 * hero-slideshow.css — automatický prelínavý slideshow s Ken Burns efektem
 * (pomalé přibližování) v úvodní sekci domovské stránky (index.html i
 * en-index.html), čistě přes CSS animace. Žádný JavaScript — funguje i po
 * odstranění JS z exportu, stejně jako pruh s logy partnerů dole na
 * stránce (ten používá stejný princip).
 *
 * ŘEŠENÍ MEZERY MEZI SNÍMKY — DRUHÁ OPRAVA:
 * První oprava (trvalá spodní fotka .hero-slide-1, opacity:1 napořád)
 * vyřešila "problesknutí modrého pozadí sekce" tím, že vždy něco svítí
 * pod animovanými fotkami. NEŘEŠILA ale samostatný problém MEZI
 * animovanými fotkami navzájem (2→3, 3→4, 4→5): jejich intervaly se jen
 * DOTÝKALY (fotka N doklesla na opacity 0 přesně v okamžiku, kdy fotka
 * N+1 začínala z opacity 0) — takže na okamžik kolem tohoto bodu nebyla
 * plně vidět ani jedna z nich a prosvitla skrz ně trvalá spodní fotka.
 * Vypadalo to jako krátké "problesknutí" zpátky na první fotku uprostřed
 * přechodu — přesně tenhle dojem ("jako by se to na vteřinu zaseklo").
 *
 * OPRAVA: fotka N+1 teď začíná nabíhat (opacity 0→1) PŘESNĚ v okamžiku,
 * kdy fotka N začíná mizet (opacity 1→0) — jejich intervaly jsou TEĎ
 * STEJNÉ (ne jen na sebe navazující), takže součet jejich opacity je
 * v každém okamžiku běhen přechodu roven 1 (jedna lineárně klesá, druhá
 * lineárně stoupá) — skutečné plynulé prolnutí, nikdy nic neprosvítá.
 * Přechody 1→2 (ze samotné první fotky do druhé) a 5→1 (z páté zpátky na
 * první) žádnou zvláštní úpravu nepotřebovaly už v první opravě — první
 * fotka je vždy přítomná, takže "to druhé" v přechodu je pořád ona sama.
 *
 * KEN BURNS EFEKT (pomalé přibližování):
 *   - Fotky 2–5 se během svého viditelného okna plynule zvětšují z měřítka
 *     1.0 na 1.08. Zbytek cyklu (kdy jsou neviditelné) zůstávají zvětšené,
 *     což nevadí — nikdo to nevidí — a při dalším kole se měřítko tiše
 *     vrátí na 1.0 přesně v okamžiku, kdy fotka opět začíná být průhledná.
 *   - První (trvalá) fotka má VLASTNÍ animaci měřítka (hero-kenburns-base)
 *     s "alternate" směrem — plynule pulzuje mezi 1.0 a 1.08 tam a
 *     zpátky, pořád dokola, bez jakéhokoliv skoku.
 *   - Zvětšený obrázek by jinak přesahoval mimo hero sekci — funguje to
 *     jen díky tomu, že rodičovská <section id="uvod"> už má v Home.jsx
 *     nastavené "overflow-hidden" (ořízne přesah).
 *
 * Jak to funguje — sled fotek:
 *   - Všech 5 fotek je naskládaných přes sebe (position: absolute, stejné
 *     rozměry). Pořadí ve HTML určuje, která je "nahoře" — pozdější
 *     sourozenec překryje dřívější, takže 1. fotka (první v HTML) je
 *     automaticky úplně dole a fotky 2–5 se prelínají nad ní.
 *   - Nová fotka nastupuje každých 5 s (to je "rozestup" S). Každá
 *     animovaná fotka (2–5) ale sama o sobě svítí o něco déle: 0,5 s
 *     nájezd + 4,5 s viditelná + 0,5 s zeslábnutí = 5,5 s — poslední
 *     půlsekunda jejího zeslábnutí se totiž PŘEKRÝVÁ s první půlsekundou
 *     nájezdu další fotky (to je ta oprava výše).
 *
 * POKUD ZMĚNÍŠ POČET FOTEK NEBO RYCHLOST STŘÍDÁNÍ, MUSÍŠ přepočítat:
 *   1) F = doba nájezdu/zeslábnutí (teď 0,5 s), H = doba, kdy je fotka
 *      sama plně viditelná (teď 4,5 s)
 *   2) S = ROZESTUP mezi nástupy sousedních fotek = F + H (teď 5 s) —
 *      TOHLE je to "kolik sekund mezi fotkami", ne 2F+H!
 *   3) CELKOVOU DÉLKU CYKLU T = (počet fotek) × S (teď 5 × 5 = 25 s)
 *      → uprav "animation-duration" (číslo v "animation: hero-fade Ts")
 *        u .hero-slide (kromě .hero-slide-1, ta žádné prolínání nemá)
 *   4) ZPOŽDĚNÍ KAŽDÉ ANIMOVANÉ FOTKY (fotka 2 a dál) =
 *      (pořadí mezi animovanými fotkami, od 0) × S
 *      → .hero-slide-2 { delay 0s }, .hero-slide-3 { delay Ss },
 *        .hero-slide-4 { delay 2×Ss }, .hero-slide-5 { delay 3×Ss } atd.
 *   5) PROCENTA V @keyframes hero-fade SE POČÍTAJÍ VŮČI CELÉMU CYKLU T:
 *      - konec nájezdu        = (F / T) × 100 %
 *      - konec viditelné fáze = (S / T) × 100 %       ← ZDE začíná zeslábnutí,
 *                                                        NE (S−F)/T jako dřív!
 *      - konec zeslábnutí     = ((S + F) / T) × 100 %
 *      Pro 5 fotek po 5 s (F=0,5s, S=5s, T=25s) to vychází: 2 % / 20 % / 22 %.
 *      DŮLEŽITÉ: "konec viditelné fáze" (kdy fotka N začíná mizet) MUSÍ
 *      padnout na STEJNÝ čas, kdy další fotka (N+1) začíná nabíhat —
 *      tedy na násobek S. Když se ty dva časy rozejdou (ať už dřív, nebo
 *      později), vrátí se přesně tahle chyba (problesknutí podkladu).
 */

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  opacity: 0;
  animation: hero-fade 25s infinite;
}

/* trvalý podklad — vlastní pomalý Ken Burns pulz, žádné prolínání (viz
   vysvětlení výše) */
.hero-slide-1 {
  opacity: 1;
  animation: hero-kenburns-base 10s ease-in-out infinite alternate;
}

.hero-slide-2 { animation-delay: 0s; }
.hero-slide-3 { animation-delay: 5s; }
.hero-slide-4 { animation-delay: 10s; }
.hero-slide-5 { animation-delay: 15s; }

/* fotky 2–5: 0,5 s nájezd, 4,5 s viditelná (+ Ken Burns přiblížení),
   0,5 s zeslábnutí — zeslábnutí JEDNÉ fotky (20 %–22 %) se překrývá
   s nájezdem NÁSLEDUJÍCÍ (0 %–2 % jejího vlastního, o 5s posunutého
   času) — proto žádná mezera */
@keyframes hero-fade {
  0%      { opacity: 0; transform: scale(1); }
  2%      { opacity: 1; }
  20%     { opacity: 1; }
  22%     { opacity: 0; transform: scale(1.08); }
  100%    { opacity: 0; transform: scale(1.08); }
}

/* Ken Burns pulz pro trvalou první fotku — plynule tam a zpátky, nikdy se
   neresetuje (proto "alternate"), takže žádný viditelný skok */
@keyframes hero-kenburns-base {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* uživatelé, co si v systému vypnuli animace — zastav slideshow i Ken
   Burns a nech viditelnou jen první fotku v klidu */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
    opacity: 0;
    transform: none;
  }
  .hero-slide-1 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}