/* =========================================
   LAPISAN LOADER (FROSTED GLASS)
   ========================================= */
.loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    padding-bottom: 5vh;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

/* --- CONTAINER MESIN CLIPPER --- */
.clipper-container {
    width: 130px;
    height: 130px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: 50% 80%; 
    animation: clipper-sweep 3s ease-in-out infinite;
    /* Use dynamic color variable, fallback to blue */
    filter: drop-shadow(0 0 6px var(--loader-color-shadow, rgba(0, 122, 255, 0.4)));
}

@keyframes clipper-sweep {
    0%, 100% { transform: rotate(-12deg) translateY(0); }
    50%      { transform: rotate(12deg) translateY(-8px); }
}

/* --- SVG CLIPPER TEPAT --- */
.perfect-clipper {
    width: 100%;
    height: 100%;
    color: var(--loader-color, #007aff); 
    overflow: visible;
}

/* Bilah Bergerak */
.vibrating-blade {
    animation: vibrate 0.05s linear infinite;
}

@keyframes vibrate {
    0%, 100% { transform: translateX(-1px); }
    50%      { transform: translateX(1px); }
}

/* --- ZARAH RAMBUT JATUH --- */
.hair {
    stroke: var(--loader-color-shadow, rgba(0, 122, 255, 0.5)); 
    stroke-width: 1.5;
    stroke-linecap: round;
}

.hair-1 { animation: fall 1.5s cubic-bezier(0.4, 0, 1, 1) infinite 0s; }
.hair-2 { animation: fall 1.5s cubic-bezier(0.4, 0, 1, 1) infinite 0.5s; }
.hair-3 { animation: fall 1.5s cubic-bezier(0.4, 0, 1, 1) infinite 1s; }

@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; } 
    100% { transform: translateY(35px) rotate(90deg); opacity: 0; } 
}

/* --- TEKS LOADING BAWAH (ANIMASI) --- */
.loading-text {
    margin-top: 25px;
    font-size: 11px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: var(--loader-color, #007aff); 
    font-weight: 600;
    margin-left: 8px;
    animation: text-pulse 2s ease-in-out infinite;
}

@keyframes text-pulse {
    0%, 100% { 
        opacity: 0.5; 
        text-shadow: 0 0 4px var(--loader-color-shadow-light, rgba(0, 122, 255, 0.1)); 
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 12px var(--loader-color-shadow, rgba(0, 122, 255, 0.4)); 
    }
}