/* Pohyb jen tam, kde něco ukazuje nebo odpovídá na akci: úvod titulky jako start (jednou za návštěvu),
   dokreslení trasy na mapě, reakce tlačítek, menu, galerie a partnerů, lightbox, mobilní menu a krátké prolnutí
   mezi stránkami. Fotky se nikdy nepřibližují ani neposouvají (uřízly by hlavy). Obsah funguje i bez JavaScriptu
   a bez animací; s omezením pohybu v systému se všechno ukáže hned. */
.race-map__link { position: relative; display: block; max-width: 960px; }
.race-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.race-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.race-route__edge { stroke: #fff; stroke-width: 7px; }
.race-route__line { stroke: #0b1c2a; stroke-width: 3.5px; }
.race-route__rider { stroke: var(--sun); stroke-width: 10px; stroke-dasharray: .002 1; opacity: 0; }
.ut-lb__img { width: 100%; height: 100%; }
.ut-lb__flight { position: fixed; z-index: 10001; pointer-events: none; object-fit: fill; border-radius: 0; max-width: none; margin: 0; transform-origin: top left; }
.home-main > .home-preview-note { width: calc(100% - 80px); max-width: 1248px; margin: 20px auto; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .ut-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
  ::view-transition-group(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }

  /* Úvod jako start: fotka se prolne, bílý banner se rozvine shora dolů jako startovní plachta a rozsvítí se jeho
     tyrkysový rám, pak naběhnou nápisy a nakonec text s tlačítky. Třídu ut-uvod dává js/tema.js, dokud titulka
     v této návštěvě neproběhla (js/home.js si to poznamená). */
  .ut-uvod .home-hero__image { animation: ut-fade 600ms ease-out both; }
  .ut-uvod .home-banner { animation: ut-unfurl 650ms cubic-bezier(.2, .7, .2, 1) 150ms both, ut-frame-on 450ms ease-out 750ms both; }
  .ut-uvod .home-banner > * { animation: ut-rise 500ms cubic-bezier(.2, .7, .2, 1) 450ms both; }
  .ut-uvod .home-banner > :nth-child(2) { animation-delay: 530ms; }
  .ut-uvod .home-banner > :nth-child(3) { animation-delay: 610ms; }
  .ut-uvod .home-hero__text { animation: ut-fade 600ms ease-out 850ms both; }

  /* Reakce na akce: plynulé barvy, tlačítka se při stisku zamáčknou. */
  .home-button, .ut-nav__toggle, .ut-nav-reg, .ut-theme, .ut-scroll-top, .ut-lb button, .ut-lb__download, .gallery-jumps a {
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
  }
  .home-button:active, .ut-nav__toggle:active, .ut-nav-reg:active, .ut-theme:active, .ut-scroll-top:active,
  .ut-lb button:active, .ut-lb__download:active, .gallery-jumps a:active { transform: translateY(1px) scale(.97); }
  .ut-menu__link { transition: color 150ms ease, background-size 220ms cubic-bezier(.2, .7, .2, 1); }
  .entry-content a, .home-footer a { transition: color 150ms ease, text-decoration-thickness 150ms ease; }
  .ut-tile__link::after, .ut-page-partneri .is-layout-grid figure { transition: opacity 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
  .ut-theme.is-toggled svg { animation: ut-spin-in 320ms cubic-bezier(.2, .7, .2, 1); }
  .archive-details[open] > :not(summary) { animation: ut-rise 300ms ease-out both; }

  .ut-nav.is-open { animation: ut-menu-in 220ms ease-out both; }
  .race-route[data-motion="waiting"] { opacity: 0; }
  .race-route[data-motion="draw"] .race-route__edge,
  .race-route[data-motion="draw"] .race-route__line { stroke-dasharray: 1; animation: ut-route-draw 3200ms linear both; }
  .race-route[data-motion="draw"] .race-route__rider { animation: ut-route-rider 3200ms linear both; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .ut-header { view-transition-name: none; }
}
@keyframes ut-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ut-unfurl { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes ut-frame-on { from { border-color: var(--paper); } to { border-color: var(--teal); } }
@keyframes ut-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ut-spin-in { from { opacity: 0; transform: rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ut-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ut-route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ut-route-rider { 0% { stroke-dashoffset: 0; opacity: 1; } 94% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }