/* ========================================================================= */
/* assets/css/login.css - Specific styles for the Login Page                 */
/* ========================================================================= */

/* 1. Base Typography & Mobile Viewport Fixes */
body { 
    font-family: 'Inter', sans-serif; 
    -webkit-tap-highlight-color: transparent;
}

/* Ensure the page perfectly fits mobile screens without bouncing */
.min-h-screen-safe {
    min-height: 100vh; /* Fallback */
    min-height: 100dvh; /* Modern mobile viewport height */
}

/* 2. Form Input Autofill Overrides (Prevents Chrome's ugly yellow/blue autofill backgrounds) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #f8fafc inset !important; /* Matches slate-50 */
    -webkit-text-fill-color: #0f172a !important; /* Matches slate-900 */
    transition: background-color 5000s ease-in-out 0s;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover, 
.dark input:-webkit-autofill:focus, 
.dark input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important; /* Matches dark slate-900/50 */
    -webkit-text-fill-color: #ffffff !important;
}

/* 3. Smooth Fade-In Entry Animation */
.fade-in { 
    animation: loginFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
    opacity: 0; 
    transform: translateY(20px); 
}

@keyframes loginFadeIn { 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* 4. Ambient Background Blob Animations */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob { 
    animation: blob 10s infinite cubic-bezier(0.4, 0, 0.2, 1); 
}

.animation-delay-2000 { 
    animation-delay: 2s; 
}

.animation-delay-4000 { 
    animation-delay: 4s; 
}

/* 5. Glassmorphism Polyfill for iOS Safari */
.backdrop-blur-2xl {
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}