/* =========================
   View Transitions
========================= */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 200ms ease out both fade-out;
}

::view-transition-new(root) {
    animation: 250ms ease in both fade-in;
}

@keyframes fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}