/* FULLSCREEN LOADER CONTAINER */
#loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    display: flex;
    flex-direction: column;
    /* Stack model on top of loader */
    align-items: center;
    justify-content: center;
    gap: 60px;
    /* Space between model and cube */
    perspective: 1200px;
    z-index: 9999;
    transition: opacity 0.8s ease-out;
}

/* 3D Model in Loader - Large & Beautiful */
#loader-model {
    width: 100px;
    height: 100px;
    /* max-width: 80vw; */
    /* border-radius: 20px;
    box-shadow: 0 20px 60px rgba(157, 14, 208, 0.3); */
    background: transparent;
}

/* Hide any poster/placeholder cube completely */
#loader-model::part(default-poster),
#loader-model::part(default-progress-bar) {
    display: none !important;
}

/* Animated Purple Cube Loader */
.loader {
    --s: 35px;
    /* Bigger cube for better visibility */
    --g: 8px;

    height: calc(1.353*var(--s) + var(--g));
    aspect-ratio: 3;
    background:
        linear-gradient(#9d0ed0 0 0) left/33% 100% no-repeat,
        conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
            #fff 135deg, #666 0 270deg, #aaa 0);
    background-blend-mode: multiply;
    --_m:
        linear-gradient(to bottom right,
            #0000 calc(0.25*var(--s)), #000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)), #0000 0),
        conic-gradient(from -90deg at right var(--g) bottom var(--g), #000 90deg, #0000 0);
    -webkit-mask: var(--_m);
    mask: var(--_m);
    background-size: calc(100%/3) 100%;
    -webkit-mask-size: calc(100%/3) 100%;
    mask-size: calc(100%/3) 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    animation: l7 steps(3) 1.5s infinite;
}

@keyframes l7 {
    to {
        background-position: 150% 0%;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #loader-model {
        width: 220px;
        height: 220px;
    }

    .loader {
        --s: 28px;
    }

    #loader-container {
        gap: 40px;
    }
}

@media (max-width: 480px) {
    #loader-model {
        width: 180px;
        height: 180px;
    }

    .loader {
        --s: 25px;
    }

    #loader-container {
        gap: 30px;
    }
}