/* A.M GORI Login - Load, success, and decline animations */
/* Uses design tokens from style.css */

/* Page load: container starts hidden, animates in */
.login-container--initial {
    opacity: 0;
    transform: translateY(-30px);
}

.login-container--ready {
    animation: loginCardIn 0.4s ease-out forwards;
}

.login-logo--ready {
    animation: loginLogoIn 0.35s ease-out 0.15s forwards;
    opacity: 0;
    transform: scale(0.95);
}

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

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

/* Card shake on decline */
.login-container--shake {
    animation: loginShake 0.5s ease-in-out;
}

@keyframes loginShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(8px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
}

/* Button states */
.login-btn {
    position: relative;
    overflow: hidden;
}

.login-btn .login-btn-text,
.login-btn .login-btn-spinner,
.login-btn .login-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.login-btn .login-btn-spinner,
.login-btn .login-btn-icon {
    display: none;
}

.login-btn--loading .login-btn-text {
    opacity: 0;
}

.login-btn--loading .login-btn-spinner {
    display: inline-flex;
    position: absolute;
    inset: 0;
}

.login-btn--success .login-btn-text,
.login-btn--success .login-btn-spinner {
    opacity: 0;
}

.login-btn--success .login-btn-icon {
    display: inline-flex;
    position: absolute;
    inset: 0;
}

.login-btn--declined .login-btn-text,
.login-btn--declined .login-btn-spinner {
    opacity: 0;
}

.login-btn--declined .login-btn-icon {
    display: inline-flex;
    position: absolute;
    inset: 0;
}

.login-btn--loading {
    cursor: wait;
    pointer-events: none;
}

.login-btn--success {
    background: var(--careplus-green, #00552F) !important;
    box-shadow: 0 4px 12px rgba(10, 61, 44, 0.35) !important;
}

.login-btn--declined {
    background: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
}

/* Spinner */
.login-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: loginSpin 0.8s linear infinite;
}

@keyframes loginSpin {
    to { transform: rotate(360deg); }
}