/* Page transitions v2 — stripe parallax exit / reverse enter */

.p4p-page-transition__stripes {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.p4p-page-transition.is-active .p4p-page-transition__stripes,
body.is-exiting .p4p-page-transition__stripes,
body.is-entering .p4p-page-transition__stripes {
    opacity: 1;
}

.p4p-page-transition__stripe {
    flex: 1;
    height: 100%;
    background: linear-gradient(180deg, #0a0810 0%, #12101a 45%, #08060e 100%);
    transform: translateY(100%);
    will-change: transform;
}

body.is-exiting .p4p-page-transition.is-active .p4p-page-transition__stripe {
    animation: p4pStripeExit 0.72s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: calc(var(--stripe-i, 0) * 0.032s);
}

body.is-entering .p4p-page-transition.is-active .p4p-page-transition__stripe {
    animation: p4pStripeEnter 0.78s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: calc((13 - var(--stripe-i, 0)) * 0.028s);
}

@keyframes p4pStripeExit {
    from { transform: translateY(0); }
    to { transform: translateY(-108%); }
}

@keyframes p4pStripeEnter {
    from { transform: translateY(108%); }
    to { transform: translateY(0); }
}

body.is-exiting .p4p-page-transition__content,
body.is-entering .p4p-page-transition__content {
    opacity: 0;
    transition: opacity 0.25s;
}

html.p4p-reduced-motion .p4p-page-transition__stripe {
    animation: none !important;
    transform: none !important;
}