/* Product Page Loader Styles */
#product-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--loader-bg);
    background-image: url('../images/product_intro_bgPC.webp');
    background-size: 40vw;
    background-position: right bottom;
    background-repeat: no-repeat;
    transition: opacity 0.8s ease-in-out, visibility 0.8s step-end;
}

@media (max-width: 767px) {
    #product-loader {
        background-image: url('../images/product_intro_bgSP.webp');
        background-size: 70vw;
    }
}

/* Theme Colors (Fixed per page) */
[data-page-theme="1"] {
    --loader-bg: #bfcde0;
}

[data-page-theme="2"] {
    --loader-bg: #bfbfdc;
}

[data-page-theme="3"] {
    --loader-bg: #a4c5cb;
}

[data-page-theme="4"] {
    --loader-bg: #a0c3b8;
}

[data-page-theme="5"] {
    --loader-bg: #e0b896;
}

[data-page-theme="6"] {
    --loader-bg: #ddafaf;
}

[data-page-theme="7"] {
    --loader-bg: #eada96;
}

#product-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Loader Content */
.loader-content {
    position: relative;
    z-index: 2;
    width: 300px;
    /* Base width for the logo */
    max-width: 60vw;
}

@media (min-width: 768px) {
    .loader-content {
        width: 18.93886156vw;
        max-width: none;
    }
}

/* Logo Reveal Container */
.loader-logo-container {
    position: relative;
    width: 100%;
    /* We'll use a mask-like effect with a pseudo-element or a clipping container */
    overflow: hidden;
}

.loader-logo {
    display: block;
    width: 100%;
    height: auto;
}

/* Reveal Overlay */
.logo-reveal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--loader-bg);
    transform: translateY(100%);
    /* Start from bottom (revealing nothing) - actually 100% means it's below. 0% means it covers everything. */
    /* Adjusting: translateY(0%) covers the logo. translateY(-100%) reveals it bottom-to-top. */
    transition: transform 0.1s linear;
}

/* Refined Reveal Logic */
.loader-logo-reveal {
    position: relative;
    width: 100%;
    line-height: 0;
}

.loader-logo-base {
    width: 100%;
    height: auto;
    opacity: 0.1;
    /* Faint base logo */
}

.loader-logo-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* Start empty */
    overflow: hidden;
    transition: height 0.3s ease-out;
}

.loader-logo-fill img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
}