@view-transition {
    navigation: auto;
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
    animation: 0.5s ease-in both fade-out-with-white;
}

::view-transition-new(root) {
    animation: 0.5s ease-in both fade-in-with-white;
}

@keyframes move-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes move-down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fade-out-with-white {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-in-with-white {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}