/* 
 * Gamevers Page Transition Styles
 * Shutter effect with centered logo
 */

/* Root state for initial loading - Disable scrolling while screen is closed */
html.gv-transition-loading {
    overflow: hidden !important;
}

#gv-page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999 !important;
    pointer-events: none;
    display: none;
    flex-direction: column;
    visibility: hidden;
}

/* Show transition during loading or when active */
html.gv-transition-loading #gv-page-transition,
#gv-page-transition.active {
    display: flex;
    visibility: visible;
    pointer-events: all;
}

/* Shutter Panels */
.gv-transition-shutter {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50.5%;
    background: #0a0a0a;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

.gv-transition-shutter.top {
    top: 0;
    transform: translateY(-100%);
}

.gv-transition-shutter.bottom {
    bottom: 0;
    transform: translateY(100%);
}

/* 
 * CRITICAL FIX: Disable transition when html.gv-transition-loading is present.
 * This ensures the shutters are closed INSTANTLY on new page load without 
 * creating a second "closing" animation.
 */
html.gv-transition-loading #gv-page-transition .gv-transition-shutter {
    transition: none !important;
}

/* CLOSED states (Instant on new load, Animated via .active class) */
html.gv-transition-loading #gv-page-transition .gv-transition-shutter.top,
#gv-page-transition.active .gv-transition-shutter.top {
    transform: translateY(0);
}

html.gv-transition-loading #gv-page-transition .gv-transition-shutter.bottom,
#gv-page-transition.active .gv-transition-shutter.bottom {
    transform: translateY(0);
}

/* Logo Container with Vertical Moving Gradient Effect */
.gv-transition-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 8em;
    height: 8em;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Vertical Gradient Background - Seamless Loop Pattern */
    background: linear-gradient(to bottom,
        #22d3ee, #a64dff, #ff37a0,
        #22d3ee, #a64dff, #ff37a0);
    background-size: 100% 320%;
    
    /* Logo Mask Logic */
    -webkit-mask-image: url('https://gamevers.store/wp-content/uploads/2026/03/Gamevers-G-logo.svg');
    mask-image: url('https://gamevers.store/wp-content/uploads/2026/03/Gamevers-G-logo.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Animation - Vertical Yo-Yo movement (Up and Down) */
    animation: gvLogoGradient 1s ease-in-out infinite alternate;
}

/* Disable logo animation transition on initial load */
html.gv-transition-loading #gv-page-transition .gv-transition-logo {
    transition: none !important;
}

/* Hide original image, mask on container handles visuals */
.gv-transition-logo img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
}

/* Logo Gradient Animation Keyframes (Vertical Yo-Yo) */
@keyframes gvLogoGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

/* Show logo when loading or active */
html.gv-transition-loading #gv-page-transition .gv-transition-logo,
#gv-page-transition.active .gv-transition-logo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}