body::before {
    content: '';
    position: fixed;
    z-index: 9999;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
    transform: translateZ(0);
    contain: strict;
    background:
        linear-gradient(115deg, rgba(7, 18, 30, .96), rgba(43, 20, 15, .96)),
        repeating-linear-gradient(94deg, #28120e 0, #5c2b1d 9px, #21100d 19px);
}

body.page-arriving::before { opacity: 1; }

body.page-transitions-ready::before {
    animation: page-curtain-in .25s cubic-bezier(.4, 0, .2, 1) both;
}

body.is-page-leaving::before {
    animation: page-curtain-out .25s cubic-bezier(.4, 0, .2, 1) both;
    pointer-events: auto;
}

@keyframes page-curtain-out {
    0% { opacity: 0; }
    42% { opacity: .9; }
    55% { opacity: .92; }
    100% { opacity: 1; }
}

@keyframes page-curtain-in {
    0% { opacity: 1; }
    22% { opacity: .92; }
    35% { opacity: .9; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.page-transitions-ready::before,
    body.is-page-leaving::before { animation: none; opacity: 0; }
}