/* ==========================================================================
   PAGE TRANSITION EFFECTS (SoluCa_HP参考)
   ========================================================================== */

/* Page transition overlay components */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 10000;
    transition: opacity 0.6s ease-out;
}

.page-transition-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

body.loading {
    overflow: hidden;
}

body.page-loaded {
    overflow: visible;
}

/* Whiteout transition overlay */
.whiteout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    z-index: 20000;
    transition: opacity 0.6s ease-out;
}

.whiteout-overlay.active {
    opacity: 1;
}