/* 
----------------------------- Login ------------------------------- 
*/
.login-wrapper {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-primary);
}


/* 
----------------------------- Login Animation: Cyber-Organic Flux ------------------------------- 
*/

/* 1. Interactive Mouse Glow (Flashlight) */
.login-mouse-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(var(--accent-primary-rgb), 0.15),
            transparent 80%);
    z-index: 1;
    pointer-events: none;
}

/* 2. Liquid Blobs (Cyber-Organic) */
.login-blobs {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    filter: blur(80px);
    z-index: 0;
}

.blob {
    position: absolute;
    background: var(--accent-primary);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0.4;
    animation: moveBlob 25s infinite alternate ease-in-out;
}

.blob-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.blob-2 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -100px;
    background: var(--accent-secondary);
    animation-delay: -5s;
}

.blob-3 {
    width: 300px;
    height: 300px;
    top: 20%;
    right: 10%;
    animation-delay: -10s;
}

/* 3. Grain/Noise Texture */
.login-grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 4. Fine Technical Lines (Secondary Mesh) */
.login-bg-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        linear-gradient(rgba(var(--accent-primary-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    opacity: 0.5;
}

@keyframes moveBlob {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(100px, 50px) scale(1.2) rotate(120deg);
    }

    66% {
        transform: translate(-50px, 150px) scale(0.8) rotate(240deg);
    }

    100% {
        transform: translate(0, 0) scale(1) rotate(360deg);
    }
}

/* Card Subtle Glass Reaction */
.login-card {
    z-index: 3;
    width: 100%;
    max-width: 520px;
    backdrop-filter: blur(20px);
    background-color: var(--bg-translucent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    padding: var(--spacing-lg);
    transition: all 0.3s ease;
}

.login-card:hover {
    transform: translateY(0px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--text-secondary);
}

/* 5. Container & Branding */
.login-content-container {
    position: relative;
    z-index: 10;
    /* Above all animation layers */
    width: 100%;
    max-width: 520px;
    /* Match card width */
    padding: var(--spacing-md);
    margin: 0 auto;
}

.login-branding {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.login-logo-img {
    height: 140px;
    /* Slightly larger for the wider layout */
    width: auto;
    margin-bottom: var(--spacing-sm);
    filter: drop-shadow(0 0 15px rgba(var(--accent-primary-rgb), 0.4));
}