/* https://developer.chrome.com/docs/web-platform/view-transitions/cross-document */
@view-transition {
    navigation: auto;
}

@keyframes shrink {
    to {
        scale: 0.8;
        opacity: 0.5;
    }
}
@keyframes grow {
    from {
        scale: 0.8;
        opacity: 0.5;
    }
}
@keyframes slide-in {
    from {
        translate: 100vw 0;
    }
}
@keyframes slide-out {
    to {
        translate: 100vw 0;
    }
}
@keyframes scale-up {
    from {
        scale: 0;
    }
}
@keyframes scale-down {
    to {
        scale: 0;
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
}
@keyframes fade-out {
    to {
        opacity: 0;
    }
}

::view-transition {
    background: black;
}

:root {
    view-transition-name: none;
}
body {
    view-transition-name: page;
}

::view-transition-old(page) {
    animation-name: shrink;
    transform-origin: 100% 50%;
}

::view-transition-new(page) {
    animation-name: slide-in;
}