/* === Login Page Custom Styling === */

/* Mobile background video styling */
@media (max-width: 1024px) {
    .mobile-video-bg {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        object-fit: cover;
        opacity: 0.25;
        z-index: -1;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out;
    }
}

/* Hide mobile video on larger screens */
@media (min-width: 1025px) {
    .mobile-video-bg {
        display: none;
    }
}

/* === Ensure background shows through on small devices === */
@media (max-width: 1024px) {
    .min-h-screen {
        background-color: transparent !important;
    }

    .login-form-container {
        background-color: transparent !important;
        box-shadow: none !important;
        opacity: 0;
        animation: fadeInForm 0.6s ease-in-out forwards;
    }

        /* Slightly darken secondary text on mobile */
        .login-form-container p.text-gray-500 {
            color: #3a3a3a !important; /* darker gray */
        }
}

/* === Fade-in animation === */
@keyframes fadeInForm {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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