/**
 * Cross-document View Transition.
 */

@view-transition {
    navigation: auto;
}

::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) {
    inset: 0;
    position: fixed;
}

::view-transition-group(root) {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-fill-mode: both;
    backface-visibility: hidden;
    transform-origin: center top;
}

::view-transition-old(root) {
    animation-duration: 1s;
    animation-name: okd-vt-slide-out;
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
    z-index: 1;
}

::view-transition-new(root) {
    animation-duration: 1s;
    animation-name: okd-vt-slide-in;
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
    z-index: 999;
}

@keyframes okd-vt-slide-out {
    from {
        filter: brightness(1);
        transform: translateY(0);
    }

    to {
        filter: brightness(50%);
        transform: translateY(-35%);
    }
}

@keyframes okd-vt-slide-in {
    from {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}