/* =========================================
   CINEMATIC & CUTE LOADER STYLES
   ========================================= */

/* Import Fonts (for standalone use) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Dosis:wght@700&display=swap');

/* Lock scroll on body */
body.loading-active {
    overflow: hidden !important;
}

#cine-loader-reimagined {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Dark background */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Elegant fade-out transition */
    transition: opacity 0.8s ease, visibility 0.8s;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Video Wrapper - Larger & Glowing */
.video-wrapper {
    width: 1000px; /* Bigger video */
/*    max-width: 80vw;*/
    margin-bottom: 40px;
    position: relative;
    border-radius: 12px; /* Subtle rounded corners */
    /* Soft gold glow effect */
    box-shadow: 0 0 40px rgba(231, 182, 92, 0.2);
}

#loader-video {
    width: 100%;
    height: auto;
    border-radius: 12px; /* Match the container's rounding */
    display: block; /* Removes any bottom space */
}

/* Progress Section */
.progress-info {
    width: 300px;
    max-width: 80vw;
}

.status-message {
    font-family: 'Caveat', cursive; /* Cute handwritten font */
    font-size: 1.6rem;
    color: #e7b65c; /* Gold color */
    margin-bottom: 15px;
    height: 30px; /* Reserve space to prevent layout shifting */
    animation: pulseText 2s infinite alternate;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1); /* Dark track for the bar */
    border-radius: 20px;
    overflow: hidden;
}

.progress-bar-fill {
    width: 0%; /* Starts empty */
    height: 100%;
    background: #e7b65c; /* Solid gold fill */
    border-radius: 20px;
    transition: width 0.2s linear; /* Smooth fill animation */
    /* Add a subtle glow to the fill */
    box-shadow: 0 0 10px rgba(231, 182, 92, 0.7);
}

.percentage-text {
    font-family: 'Dosis', sans-serif; /* Friendly rounded font */
    font-size: 1rem;
    font-weight: 700;
    color: #888; /* Muted gray for contrast */
    margin-top: 10px;
    letter-spacing: 1px;
}

/* --- ANIMATIONS --- */
@keyframes pulseText {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

/* --- EXIT ANIMATION --- */
#cine-loader-reimagined.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}