/* =========================================================
   FILE: casino_loader.css
   PURPOSE: High-Speed Mechanical Mask Loader
   STATUS: LUXURY PACING · STIPPLED NOISE · CINEMATIC DISSOLVE
========================================================= */

/* 1. THE CURTAIN (Cinematic Dissolve) */
#casino-loader {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Soft 0.8s cinematic fade out */
    transition: opacity 0.8s ease-out; 
    will-change: opacity;
}

#casino-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.skip-loader #casino-loader { 
    display: none !important; 
}

/* 2. THE CLIPPED WINDOW */
.loader-mask {
    /* 🚀 AUTO-SCALER: Max 22px on Desktop, strictly downscales on mobile to prevent chopping */
    font-size: clamp(14px, 4.5vw, 22px); 
    height: 1.4em; /* Slightly taller to accommodate the vertical stretch */
    line-height: 1.4em;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 20px; 
    text-align: center;
    
    /* 🔥 YOUR LEAD FONT IS BACK */
    font-family: 'Orbitron', 'Michroma', sans-serif; 
    
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* 3. THE MECHANICAL FILM STRIP */
.loader-track {
    display: flex;
    flex-direction: column;
    transform: translateY(100%); 
    /* The heavy, frictionless mechanical settle */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* MICRO-TYPOGRAPHY POLISH */
.roll-item {
    height: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* The Vertical Stretch & Breathing Space */
    transform: scaleY(1.15); 
    letter-spacing: 4px; 
}

/* 4. THE TITANIUM GRADIENT (For Phrases 1 & 2) */
.silver-gradient {
    background: linear-gradient(
        to bottom, 
        #ffffff 0%,      
        #e0e0e0 20%,     
        #a0a0a0 50%,     
        #505050 85%,     
        #1a1a1a 100%     
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.9));
}

/* 5. HEAVY 3D METALLIC VOLUME WITH STIPPLED NOISE (For the Logo) */
.logo-gradient {
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(
            to bottom, 
            #ffffff 0%,      
            #f59e0b 20%,     
            #d97706 45%,     
            #50230a 75%,     
            #000000 100%     
        );
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0px 5px 3px rgba(0,0,0,0.95));
}

/* =========================================================
   6. PERIPHERAL LABELS (The Hard State Machine)
========================================================= */

.peripheral-labels {
    position: absolute;
    inset: 0;
    z-index: 1; 
    pointer-events: none;
    display: flex;
    justify-content: center; 
    align-items: center; 
    
    /* The Dynamic Gap Variable */
    gap: var(--dynamic-gap, 100vw); 
    
    color: #a6a9ae;
    font-family: 'Inter', sans-serif; 
    font-size: 11px; 
    font-weight: 600;
    letter-spacing: 3px;
}

/* 🔥 THE TRANSITION LOCK: Only animates when JS explicitly turns this on */
.peripheral-labels.animate-gap {
    transition: gap 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.label-group {
    display: flex;
    gap: 4vw; 
}

/* 📱 MOBILE OVERRIDE */
@media (max-width: 768px), (orientation: portrait) {
    .peripheral-labels {
        align-items: flex-end; 
        padding-bottom: 7vh; 
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px !important; 
        width: 100%;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .label-group {
        gap: 15px; 
        justify-content: center;
        flex-wrap: wrap; 
    }
    
    .peripheral-labels span {
        font-size: 12px; 
        letter-spacing: 1.5px; 
    }
}