@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: page-transition-out .22s ease both;
    }

    ::view-transition-new(root) {
        animation: page-transition-in .3s ease both;
    }
}

@keyframes page-transition-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes page-transition-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}