/* Animations and View Transitions */

/* Slide Horizontal Animation */
@keyframes slide-horizontal-new {
    0% {
        transform: translateX(100%)
    }
}

@keyframes slide-horizontal-old {
    80% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateX(-100%)
    }
}

/* Slide Vertical Animation */
@keyframes slide-vertical-new {
    0% {
        transform: translateY(-100%)
    }
}

@keyframes slide-vertical-old {
    80% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(100%)
    }
}

/* Out-In Animation */
@keyframes out-in-new {
    0% {
        opacity: 0
    }
}

@keyframes out-in-old {
    to {
        opacity: 0
    }
}

/* View Transitions */
:root:active-view-transition {
    view-transition-name: none
}

::view-transition {
    pointer-events: none
}

:root:active-view-transition::view-transition-new(page-group),
:root:active-view-transition::view-transition-old(page-group) {
    animation-duration: .6s;
    cursor: wait;
    pointer-events: all
}

:root:active-view-transition-type(SlideHorizontal)::view-transition-old(page-group) {
    animation: slide-horizontal-old .6s cubic-bezier(.83, 0, .17, 1) forwards;
    mix-blend-mode: normal
}

:root:active-view-transition-type(SlideHorizontal)::view-transition-new(page-group) {
    animation: slide-horizontal-new .6s cubic-bezier(.83, 0, .17, 1) backwards;
    mix-blend-mode: normal
}

:root:active-view-transition-type(SlideVertical)::view-transition-old(page-group) {
    animation: slide-vertical-old .6s cubic-bezier(.83, 0, .17, 1) forwards;
    mix-blend-mode: normal
}

:root:active-view-transition-type(SlideVertical)::view-transition-new(page-group) {
    animation: slide-vertical-new .6s cubic-bezier(.83, 0, .17, 1) backwards;
    mix-blend-mode: normal
}

:root:active-view-transition-type(OutIn)::view-transition-old(page-group) {
    animation: out-in-old .35s cubic-bezier(.22, 1, .36, 1) forwards
}

:root:active-view-transition-type(OutIn)::view-transition-new(page-group) {
    animation: out-in-new .35s cubic-bezier(.64, 0, .78, 0) .35s backwards
}

@media(prefers-reduced-motion:reduce) {

    ::view-transition-group(*),
    ::view-transition-new(*),
    ::view-transition-old(*) {
        animation: none !important
    }
}