#fluidCursor{
    /* Fluid Cursor HSL Colors - tune these live in browser dev tools! */
    --fluid-cursor-hue-base: 0.74;
    --fluid-cursor-hue-variation: 0.03;
    --fluid-cursor-saturation: 0.82;
    --fluid-cursor-lightness: 0.41;
    --fluid-cursor-tone-gamma: 1.35;
    --fluid-cursor-alpha-multiplier: 3.0;
    --fluid-cursor-velocity-dissipation: 0.911;
    --fluid-cursor-dye-dissipation: 0.9570;
}

.progress-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: #0f1010;   */
    /* Note: instead of removing the feature - faster to set transparent */
    background: transparent;  
    z-index: 2;  /* Above video overlay (1), below container (3) */
    will-change: transform;
    opacity: 0;  /* Hidden initially - shown when loader starts */
    visibility: hidden;
    pointer-events: none;
    display: none;  /* Completely hidden until loader starts */
}

/* Transition overlay for in/out animations */
.transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* # LOADER INTEGRATION */
    z-index: 10003;  /* Above everything including loader content (was 3) */
    pointer-events: none;  /* Don't block interactions when visible */
    opacity: 0;  /* Hidden initially - shown when loader starts */
    visibility: hidden;
    display: none;  /* Completely hidden until loader starts */
}

#loaderBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(11, 4, 28, 0.88); */
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(15px);
    z-index: 2;
}

.explosion-white-overlay {
    /* NOTE: position: absolute (not fixed) - keep this if reverting white explode effect */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vw;
    height: 200vw;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.4) 60%, rgba(11, 8, 28, 0.8) 85%, rgba(11, 8, 28, 1) 100%);
    border-radius: 50%;
    z-index: 5;  /* Behind canvas (10) so fragments are visible */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
    filter: blur(80px);  /* High blur for big bang glow effect */
}

.transition-out-text {
    /* NOTE: position: absolute (not fixed) - keep this if reverting white explode effect */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--loader-text-color);  /* White for visibility over backgrounds */
    text-align: center;
    white-space: nowrap;
    z-index: 10004;  /* Above transition slide and cube */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-size: 1.2em;
    /* Use Inter font with opentype features */
    font-family: InterVariable, 'Inter', sans-serif;
    font-variation-settings: 'wght' 500, 'opsz' 14;
    font-feature-settings: "ss01" 1, "calt" 1, "dlig" 1, "liga" 1;
    transition: color 0.3s ease;
    
}




.transition-out-text.text-on-white {
    color: #1a1a1a;  /* Dark color for visibility on white background */

    font-family: InterVariable, 'Inter', sans-serif;
    font-variation-settings: 'wght' 400, 'opsz' 14;
    font-feature-settings: "ss01" 1, "calt" 1, "dlig" 1, "liga" 1;
}

/* Mobile: viewport-based text sizing */
@media (max-width: 767px) {
    .transition-out-text {
        /* Larger on mobile for visibility */
        /* white-space: normal;  Allow line breaks if needed */
        font-size: 1.3em;


        font-family: InterVariable, 'Inter', sans-serif;
        font-variation-settings: 'wght' 400, 'opsz' 14;
        font-feature-settings: "ss01" 1, "calt" 1, "dlig" 1, "liga" 1;
    }
}



.container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;  /* Above progress background (2), below text elements */
    opacity: 0;  /* Hidden initially - shown when loader starts */
    visibility: hidden;
    pointer-events: none;
    display: none;  /* Completely hidden until loader starts */
}

#canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    z-index: 10;  /* Above progress background */
}


.progress-text {

    position: fixed;
    transform: translate(-50%, -50%);
    /* top: 4vh;
    left: 4vw; */
    left: 50%;
    top: 15%;
    color: var(--loader-text-color);
    
    z-index: 10002;  /* Above everything including loader */
    pointer-events: none;  /* Don't interfere with interactions */
    opacity: 0;  /* Initially hidden - shown after magenta transition */
    visibility: hidden;
    white-space: nowrap;
    text-align: center;
    /* text size relative to general font size */
    font-size: 1.2em;
    /* Use Inter font with opentype features */
    font-family: InterVariable, 'Inter', sans-serif;
    font-variation-settings: 'wght' 400, 'opsz' 14;
    font-feature-settings: "ss01" 1, "calt" 1, "dlig" 1, "liga" 1;
}

.cta-text {
    /* center of screen */
    bottom: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* NOTE: position: absolute (not fixed) - keep this if reverting white explode effect */
    position: absolute;
    color: var(--loader-text-color);
    /* Use Inter font with opentype features */
    font-family: InterVariable, 'Inter', sans-serif;
    font-variation-settings: 'opsz' 14;
    font-feature-settings: "ss01" 1, "calt" 1, "dlig" 1, "liga" 1;
    font-weight: 700;
    font-size: 6vw;
    z-index: 3;  /* Above everything including loader */
    pointer-events: none;  /* Don't interfere with interactions */
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;  /* Minimize vertical gap between items */
    gap: 0.05em;  /* Minimal gap between text items */
    
    /* Initially hidden - will be shown programmatically after cube growth */
    opacity: 0;
    visibility: hidden;
}

.cta-spin {
    display: block;
    white-space: nowrap;
}

.cta-shake {
    display: none;  /* Hidden on desktop by default */
}

@keyframes fadeInSpinMe {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile: viewport-based text sizing */
@media (max-width: 767px) {
    /* html, body {
        font-size: 5vw;
    } */
    .progress-text {
        /* font-size: 5vw;   */
        /* Responsive to viewport width */
        top: 20%;
        font-family: InterVariable, 'Inter', sans-serif;
        font-variation-settings: 'wght' 400, 'opsz' 14;
        font-feature-settings: "ss01" 1, "calt" 1, "dlig" 1, "liga" 1;
    }
    
    .cta-text {
        /* Larger on mobile for visibility */
        font-size: 11vw;  
        bottom: 26%;
        /* Allow line breaks */
        white-space: normal;  
        flex-direction: column;
        justify-content: flex-start;  /* Minimize vertical gap between items */
        gap: 0.05em;  /* Minimal gap between text items */
        font-family: InterVariable, 'Inter', sans-serif;
        font-variation-settings: 'wght' 700, 'opsz' 14;
        font-feature-settings: "ss01" 1, "calt" 1, "dlig" 1, "liga" 1;
    }
}