/* =========================================
   Entrance Animations & AI Tech Feel
   ========================================= */

/* 1. Background Blur -> Clear (0ms -> 300ms) */
.col-md-7 img {
    /* Initial State */
    filter: blur(8px);
    opacity: 0.8;
    transform: scale(1.02); /* Slight zoom for depth */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.col-md-7 img.loaded {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

/* 2. Login Form Light Appearance (300ms delay handled by JS or CSS delay) */
.col-md-5 {
    /* Initial State */
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.col-md-5.loaded {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 3. Input Field Focus Effect (Tech Feel) */
.form-control {
    transition: all 0.3s ease;
    border: 1px solid #e7e7e7; /* Default border */
}

.form-control:focus {
    border-color: #57bf95;
    box-shadow: 0 0 0 3px rgba(87, 191, 149, 0.15); /* Soft Glow */
    transform: scale(1.01); /* Subtle expand */
}

/* 4. Login Button Tech Hover */
.btn-success {
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(87, 191, 149, 0.3);
}

/* Optional: Subtle Loading State for Button */
.btn-success.loading {
    pointer-events: none;
    opacity: 0.8;
}