@view-transition {
    navigation: auto;
}

:root {
    --expo-out: linear( 0 0%, 0.1684 2.66%, 0.3165 5.49%, 0.446 8.52%, 0.5581 11.78%, 0.6535 15.29%, 0.7341 19.11%, 0.8011 23.3%, 0.8557 27.93%, 0.8962 32.68%, 0.9283 38.01%, 0.9529 44.08%, 0.9711 51.14%, 0.9833 59.06%, 0.9915 68.74%, 1 100% );
}

html::view-transition-group(root) {
    animation-timing-function: var(--expo-out);
}

html::view-transition-old(root) {
    animation: skew-exit 0.8s var(--expo-out) forwards;
    z-index: 1;
}

html::view-transition-new(root) {
    animation: skew-enter 0.8s var(--expo-out) forwards;
    z-index: 2;
}

@keyframes skew-enter {
    0% {
        transform: translateX(100%) skewX(-15deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes skew-exit {
    0% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }

    70% {
        opacity: 0.5;
    }

    100% {
        transform: translateX(-30%) skewX(8deg);
        opacity: 0;
    }
}