/* --- LOADING WRAPPER --- */
.loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0b0c10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    padding-bottom: 12vh; /* Membantu menaikkan kandungan ke atas sikit */
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

/* --- CONTAINER MESIN CLIPPER --- */
.clipper-container {
    width: 130px;
    height: 130px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Paksi putaran di bahagian bawah (tapak tapak tangan) */
    transform-origin: 50% 80%; 
    /* Animasi mesin beralun ke kiri dan kanan seolah-olah sedang "fading" */
    animation: clipper-sweep 3s ease-in-out infinite;
}

@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: #ffffff; /* 1 Warna Monokrom */
    overflow: visible;
}

/* 
    Bilah Bergerak (Moving Blade): 
    Bergetar ke kiri dan kanan dengan sangat pantas 
    meniru motor magnetik clipper sebenar.
*/
.vibrating-blade {
    animation: vibrate 0.05s linear infinite;
}

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

/* --- ZARAH RAMBUT JATUH (HAIR PARTICLES) --- */
.hair {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Potongan rambut jatuh dengan jarak masa (delay) yang berbeza */
.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; } /* Muncul dekat dengan mata pisau */
    100% { transform: translateY(35px) rotate(90deg); opacity: 0; } /* Jatuh dan pudar */
}

/* --- TEKS LOADING BAWAH --- */
.loading-text {
    margin-top: 25px;
    font-size: 11px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    margin-left: 8px;
}