/* Page Transition Overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5000;
}

.page-transition-band {
    position: absolute;
    top: 0;
    width: calc(25% + 2px);
    height: 100%;
    background-color: var(--blue-flash);
    box-shadow: 20px 20px 20px var(--blue-dark-ten);
    transform: translateY(100%);
    will-change: transform;
}

.page-transition-band:nth-child(1) {
    left: 0;
    z-index: 5010;
}

.page-transition-band:nth-child(2) {
    left: 25%;
    z-index: 5009;
}

.page-transition-band:nth-child(3) {
    left: 50%;
    z-index: 5008;
}

.page-transition-band:nth-child(4) {
    left: 75%;
    z-index: 5007;
}

/* When active, allow pointer events to block interaction during transition */
.page-transition-overlay.active {
    pointer-events: all;
}