/* Prevent white flash (FOUC) on page load */
/* Apply dark background immediately if system prefers dark or dark class is present */
@media (prefers-color-scheme: dark) {
    html:not(.light) {
        background-color: #000000 !important;
    }
    
    html:not(.light) body {
        background-color: #000000 !important;
    }
}

/* Fallback: if dark class is present, ensure dark background */
html.dark {
    background-color: #000000 !important;
}

html.dark body {
    background-color: #000000 !important;
}

/* Common Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

.animate-fade-in {
    animation: fadeIn 0.25s ease-out;
}

.animate-slide-down {
    animation: slideDown 0.25s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out;
}

/* Floating Label Styles */
.floating-label {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.floating-label.active {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
    pointer-events: none;
}

/* Autofill Colors - Match Design System */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #111827 !important;
    background-color: white !important;
    caret-color: #111827 !important;
}

.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 #2c2c2e inset !important;
    -webkit-text-fill-color: #f3f4f6 !important;
    background-color: #2c2c2e !important;
    caret-color: #f3f4f6 !important;
}

/* Chrome Autofill Detection Animation */
@keyframes onAutoFillStart {
    from { opacity: 0; }
    to { opacity: 0; }
}

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    animation-duration: 0.001s;
}

/* Hide Label When Input is Focused (Dropdown Visible) - CSS Fallback */
@supports selector(:has(*)) {
    .relative:has(input:focus) .floating-label:not(.active) {
        opacity: 0;
    }
}