@view-transition {
    navigation: auto;
}
::view-transition-group(root) {
    animation-duration: .5s;
}
::view-transition-group(footer) {
    animation: .5s ease-out both;
}
::view-transition-old(footer) {
    animation-name: footer-out;
}
::view-transition-new(footer) {
    opacity: 0;
    transform: translateY(100%) scale(.75);
    animation-name: footer-in;
    animation-delay: 1s;
}
#brx-footer {
    view-transition-name: footer;
}

@keyframes footer-out {
    0% {
        opacity: 1;
        transform: translateY(0%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(100%) scale(.75);
    }
}
@keyframes footer-in {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(.75);
    }
    100% {
        opacity: 1;
        transform: translateY(0%) scale(1);
    }
}