:root {
    --animation-time: 240ms;
}

.nav-transition {
    view-transition-name: nav-transition
}

.footer-transition {
    view-transition-name: footer-transition
}

@media (prefers-reduced-motion: no-preference) {

    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(footer-transition):only-child {
        animation: var(--animation-time) ease both slide-out;
    }

    ::view-transition-new(footer-transition):only-child {
        animation: var(--animation-time) ease both slide-in;
    }

    ::view-transition-group(footer-transition) {
        animation: var(--animation-time) ease-in-out both;
    }

    ::view-transition-old(nav-transition):only-child {
        animation: var(--animation-time) ease both slide-out;
    }

    ::view-transition-new(nav-transition):only-child {
        animation: var(--animation-time) ease both slide-in;
    }

    ::view-transition-group(nav-transition) {
        animation: var(--animation-time) ease-in-out both;
    }

    ::view-transition-old(root) {
        animation: var(--animation-time) ease both slide-out;
    }

    ::view-transition-new(root) {
        animation: var(--animation-time) ease both slide-in;
    }

    @keyframes slide-out {
        to {
            opacity: 0;
            transform: translateX(-16px);
        }
    }

    @keyframes slide-in {
        from {
            opacity: 0;
            transform: translateX(16px);
        }
    }

}