/* 
   Persona 3 Style Page Transitions 
   Slick, angled geometric sweeps in teal, white, and dark blue.
*/

.p3-transition-overlay {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 99999;
    pointer-events: none;
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

html.transitions-enabled .p3-transition-overlay.is-entering,
html.transitions-enabled .p3-transition-overlay.is-leaving {
    display: flex;
}

.p3-panel {
    position: absolute;
    top: -50%;
    height: 200%;
    width: 150%;
    /* Angle the panels heavily */
    transform: skewX(-25deg) translateX(-100%);
    transform-origin: left center;
}

/* Panel Colors */
.p3-panel-1 {
    background-color: var(--text-accent);
    z-index: 1;
}

.p3-panel-2 {
    background-color: var(--text-main);
    z-index: 2;
}

.p3-panel-3 {
    background-color: var(--nav-bg);
    z-index: 3;
}

/* OUTRO ANIMATION (Leaving the page) */
/* Panels sweep in from the left to completely cover the screen */
.is-leaving .p3-panel-1 {
    animation: p3-sweep-in 0.35s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    animation-delay: 0s;
}
.is-leaving .p3-panel-2 {
    animation: p3-sweep-in 0.35s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    animation-delay: 0.05s;
}
.is-leaving .p3-panel-3 {
    animation: p3-sweep-in 0.35s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    animation-delay: 0.1s;
}

/* INTRO ANIMATION (Entering a new page) */
/* Panels start covering the screen, then sweep out to the right */
.is-entering .p3-panel {
    transform: skewX(-25deg) translateX(0%);
}
.is-entering .p3-panel-1 {
    animation: p3-sweep-out 0.35s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    animation-delay: 0.1s;
}
.is-entering .p3-panel-2 {
    animation: p3-sweep-out 0.35s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    animation-delay: 0.05s;
}
.is-entering .p3-panel-3 {
    animation: p3-sweep-out 0.35s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    animation-delay: 0s;
}

/* Keyframes */
@keyframes p3-sweep-in {
    0% { transform: skewX(-25deg) translateX(-100%); }
    100% { transform: skewX(-25deg) translateX(0%); }
}

@keyframes p3-sweep-out {
    0% { transform: skewX(-25deg) translateX(0%); }
    100% { transform: skewX(-25deg) translateX(100%); }
}