html.page-transition-ready body {
    animation: page-enter .42s cubic-bezier(.22, 1, .36, 1) both
}

html.page-transition-ready body:after {
    content: '';
    position: fixed;
    z-index: 200;
    inset: -15% -25%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(180, 92, 255, .08) 38%, #b45cff 49%, #e0b0ff 51%, rgba(180, 92, 255, .08) 62%, transparent 100%);
    transform: translateX(120%) skewX(-12deg);
    animation: whip-enter .62s cubic-bezier(.76, 0, .24, 1) both;
    filter: blur(1px);
    box-shadow: 0 0 70px rgba(180, 92, 255, .7)
}

html.page-transition-ready.page-transition-leaving body {
    animation: page-leave .28s ease both;
    pointer-events: none
}

html.page-transition-ready.page-transition-leaving body:after {
    animation: whip-leave .28s cubic-bezier(.76, 0, .24, 1) both
}

@keyframes page-enter {
    from {
        opacity: .45
    }

    to {
        opacity: 1
    }
}

@keyframes page-leave {
    from {
        opacity: 1
    }

    to {
        opacity: .72
    }
}

@keyframes whip-enter {
    from {
        transform: translateX(120%) skewX(-12deg)
    }

    to {
        transform: translateX(-120%) skewX(-12deg)
    }
}

@keyframes whip-leave {
    from {
        transform: translateX(-120%) skewX(-12deg)
    }

    to {
        transform: translateX(120%) skewX(-12deg)
    }
}

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

    html.page-transition-ready body,
    html.page-transition-ready body:after,
    html.page-transition-ready.page-transition-leaving body,
    html.page-transition-ready.page-transition-leaving body:after {
        animation: none
    }
}