/* Společný základ třetího kola alternativ (E1, E2, E3; 260930). Navazuje na spolecne.css (barvy, písma,
   přepínač) a drží jen to, co mají všechny tři verze stejné: okno s fotkou bez zaoblení, větu, která se
   při čtení rozsvítí, masku nadpisu, barvu hrotu pera nad tmavou plochou a fotky řízené scrollem.
   Rozvržení, plochy a choreografii má každá verze vlastní. */

/* Okno: pravoúhlý výřez s fotkou. Fotka je o kus větší než okno, aby v něm mohla jet pomaleji než stránka. */
.okno { position: relative; overflow: hidden; margin: 0; background: var(--plocha); isolation: isolate; }
.okno img { width: 100%; height: 100%; object-fit: cover; }

/* Kresba jedním tahem: rámeček má poměr stran dat kresby; tahy leží jen v části výšky (rozhovor 20 až 80 %,
   workshop 20 až 88 %), proto rámeček přesahuje přes sousedy a nesmí jim brát kliky. */
.kresba { aspect-ratio: 2400 / 1792; margin: 0; pointer-events: none; }

/* Věta, která se při čtení rozsvítí (--svetlo 0 až 1.1 nastavuje skript podle polohy v okně).
   Barva jde přes pozadí oříznuté na písmo, takže se text nerozsekává a cíle gest zůstávají celé.
   Barvy: --sv-a rozsvícená, --sv-b nerozsvícená (plocha si je přepíše). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .anim .svetlo { --svetlo: 0; background-image: linear-gradient(90deg, var(--sv-a, var(--inkoust)) calc(var(--svetlo) * 100% - 10%), var(--sv-b, #B4B5B2) calc(var(--svetlo) * 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}

/* Nadpis kapitoly se odkryje maskou zdola nahoru, když vjede do okna (třídu dává skript). Maska nemění
   rozměry ani polohu, takže gesto pera na nadpisu sedí. */
.anim .odhal { clip-path: inset(-20% -6% 120% -6%); transition: clip-path 900ms var(--otevreni, cubic-bezier(0.72, 0, 0.18, 1)); }
.anim .odhal.odkryty { clip-path: inset(-20% -6% -20% -6%); }

/* Hrot pera: nad tmavou nebo modrou plochou (a tmavou fotkou) přechází do světlé linky, jinak by modrý hrot
   při kreslení zmizel. Podíl tmy pod perem (0 až 1) zapisuje skript do --pero-tma; #2743C8 je --linka
   ze spolecne.css (odkaz na var(--linka) by tu odkazoval sám na sebe). */
.pero-hrot { --linka: color-mix(in srgb, var(--linka-svetla, #DCE3FF) calc(var(--pero-tma, 0) * 100%), #2743C8); }

/* Fotky řízené scrollem (jen kde to prohlížeč umí; jinak statické a celé vidět): okno se při vjezdu
   otevře a fotka v něm jede pomaleji než stránka. Jen pro okna mimo připnuté rámy. */
@supports (animation-timeline: view()) {
  .anim .otviraci { animation: e-otevri both cubic-bezier(0.5, 0, 0.2, 1); animation-timeline: view(); animation-range: entry 0% cover 38%; }
  .anim .paralaxa img { scale: 1.14; animation: e-paralaxa both cubic-bezier(0.4, 0.15, 0.6, 0.85); animation-timeline: view(); animation-range: cover; }
}
@keyframes e-otevri { from { clip-path: inset(13% 17% 13% 17%); } to { clip-path: inset(0 0 0 0); } }
@keyframes e-paralaxa { from { translate: 0 -6%; } to { translate: 0 6%; } }