/* =========================================
       CLOTHSY - CRED-STYLE 3D SPLASH THEME
       ========================================= */
    :root {
        --bg-color: #f0f3f8; 
        --text-main: #1e293b;
        --shadow-light: #ffffff;
        --shadow-dark: #d1d9e6;
        --accent-blue: #4f46e5;
    }

    body {
        background-color: var(--bg-color);
        font-family: 'Plus Jakarta Sans', sans-serif;
        margin: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    /* Decorative 3D Background Elements for Depth */
    .bg-circle-1, .bg-circle-2 {
        position: absolute;
        border-radius: 50%;
        background: var(--bg-color);
        /* Inset shadows create carved-out background bowls */
        box-shadow: inset 10px 10px 30px var(--shadow-dark), inset -10px -10px 30px var(--shadow-light);
        z-index: 1;
    }
    .bg-circle-1 {
        width: 350px;
        height: 350px;
        top: -100px;
        right: -100px;
    }
    .bg-circle-2 {
        width: 450px;
        height: 450px;
        bottom: -150px;
        left: -150px;
    }

    .splash-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 2; /* Sits above the background circles */
    }

    /* 3D Extruded Logo Block */
    .logo-box {
        width: 130px;
        height: 130px;
        background: var(--bg-color);
        border-radius: 35px; /* Premium squircle shape */
        box-shadow: 15px 15px 35px var(--shadow-dark), -15px -15px 35px var(--shadow-light);
        border: 2px solid rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        padding: 20px;
        animation: float 4s ease-in-out infinite;
    }

    .logo-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Typography */
    .brand-name {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--text-main);
        letter-spacing: -1px;
        margin-bottom: 5px;
    }
    
    .tagline {
        font-size: 0.9rem;
        font-weight: 700;
        color: #64748b;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 40px;
    }

    /* =========================================
       3D NEUMORPHIC WASHING MACHINE LOADER
       ========================================= */
    .washing-machine {
        width: 70px;
        height: 85px;
        background: var(--bg-color);
        border-radius: 14px;
        position: relative;
        /* 3D Floating Machine Body */
        box-shadow: 6px 6px 15px var(--shadow-dark), -6px -6px 15px var(--shadow-light);
        border: 2px solid rgba(255, 255, 255, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        animation: shake 2s ease-in-out infinite;
    }

    /* Machine Top Panel (Recessed Groove) */
    .washing-machine::before {
        content: '';
        position: absolute;
        top: 8px;
        width: 24px;
        height: 4px;
        background: var(--bg-color);
        border-radius: 2px;
        left: 10px;
        /* Carved into the machine */
        box-shadow: inset 1px 1px 3px var(--shadow-dark), inset -1px -1px 3px var(--shadow-light);
    }
  
    /* Machine Power Button (Glowing LED) */
    .washing-machine::after {
        content: '';
        position: absolute;
        top: 6px;
        right: 10px;
        width: 6px;
        height: 6px;
        background: #ff5252;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(255, 82, 82, 0.6); /* Red glow */
    }

    /* The Glass Door (Recessed Drum) */
    .drum {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        margin-top: 12px; /* Pushed down below control panel */
        background: var(--bg-color);
        /* Inset shadow carves the drum deep into the machine */
        box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
        border: 2px solid rgba(255,255,255,0.3);
    }

    /* The Spinning Clothes (Colorful Blobs) */
    .clothes {
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: 
          radial-gradient(circle at 30% 30%, #ff5252 6px, transparent 7px),
          radial-gradient(circle at 70% 70%, #43a047 7px, transparent 8px),
          radial-gradient(circle at 30% 70%, #ffb74d 6px, transparent 7px),
          radial-gradient(circle at 80% 30%, #1e88e5 6px, transparent 7px);
        animation: spin 1s linear infinite;
    }

    /* =========================
       ANIMATIONS
       ========================= */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Subtle shake to simulate machine vibrating */
    @keyframes shake {
        0%, 100% { transform: translateY(0); }
        25% { transform: translateY(-1px) rotate(1deg); }
        75% { transform: translateY(1px) rotate(-1deg); }
    }

    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
    }