@view-transition { navigation: auto; }

:root {
    /* Mírně zrychlíme jeden krok, protože se nyní odehrají dva po sobě */
    --vt-duration: 0.3s; 
}

/* Zabráníme výchozímu chování, kdy se starý a nový prvek míchají barvami přes sebe */
::view-transition-group(root) {
    animation: none;
}

/* 1. FÁZE: Stará stránka odjede nahoru a plynule zmizí */
::view-transition-old(root) {
    animation: fade-out var(--vt-duration) ease-out forwards;
}

/* 2. FÁZE: Nová stránka čeká, dokud stará nezmizí (animation-delay), a pak přijede zespodu */
::view-transition-new(root) {
    animation: fade-in var(--vt-duration) ease-in forwards;
    animation-delay: var(--vt-duration);
    opacity: 0; /* Je skrytá, než přijde její čas */
}

/* Filmové klíčové snímky - ČISTÉ PROLNUTÍ BEZ POHYBU */
@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Respektování uživatelů se zakázanými animacemi v OS */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}