.login-page .auth-brand {
    animation: loginReveal 420ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
}

.login-page .auth-card {
    animation: loginReveal 480ms cubic-bezier(0.22, 1, 0.36, 1) 110ms both;
    transition: border-color 220ms ease, box-shadow 220ms ease;
}

.login-page .auth-card:focus-within {
    border-color: rgba(var(--brand-primary-rgb), 0.24);
    box-shadow:
        0 22px 52px rgba(30, 64, 175, 0.11),
        0 0 0 1px rgba(var(--brand-primary-rgb), 0.05),
        0 0 48px rgba(var(--brand-primary-rgb), 0.07);
}

.login-page .auth-header,
.login-page .login-error-message:not(.is-hidden),
.login-page .auth-form .form-group,
.login-page .login-submit,
.login-page .auth-footer {
    animation: loginReveal 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-page .auth-header {
    animation-delay: 190ms;
}

.login-page .login-error-message:not(.is-hidden) {
    animation-delay: 230ms;
}

.login-page .auth-form .form-group:nth-of-type(1) {
    animation-delay: 250ms;
}

.login-page .auth-form .form-group:nth-of-type(2) {
    animation-delay: 300ms;
}

.login-page .login-submit {
    animation-delay: 350ms;
}

.login-page .auth-footer {
    animation-delay: 400ms;
}

.login-page .auth-trust {
    animation: loginReveal 380ms cubic-bezier(0.22, 1, 0.36, 1) 460ms both;
}

.login-error-message.is-hidden {
    display: none;
}

.login-field {
    position: relative;
}

.login-field label {
    transition: color 180ms ease;
}

.login-field:focus-within label {
    color: var(--brand-primary);
}

.login-input-shell,
.login-page .password-wrapper {
    position: relative;
}

.login-page .login-input-shell input {
    min-height: 48px;
    padding-right: 2.9rem;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.login-page .password-wrapper input {
    padding-right: 5.35rem;
}

.login-field-status {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    display: inline-flex;
    width: 1.3rem;
    height: 1.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--brand-primary);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.72);
    transition: opacity 160ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-field-status svg {
    width: 0.82rem;
    height: 0.82rem;
}

.login-field-status--password {
    right: 3.4rem;
}

.login-field.is-complete:not(.is-error) .login-field-status {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.login-field.is-error input {
    border-color: rgba(220, 38, 38, 0.72) !important;
    background: rgba(254, 242, 242, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08) !important;
}

.login-field.is-error label {
    color: #b42318;
}

.login-field.is-shaking .login-input-shell,
.login-field.is-shaking .password-wrapper {
    animation: loginFieldShake 300ms ease-out;
}

.login-page .password-toggle {
    right: 0.22rem;
    border-radius: 10px;
    transition: color 180ms ease, background-color 180ms ease;
}

.login-page .password-toggle:hover {
    background: rgba(var(--brand-primary-rgb), 0.07);
}

.login-page .password-toggle:focus-visible {
    outline: 2px solid rgba(var(--brand-primary-rgb), 0.48);
    outline-offset: 1px;
}

.login-page .password-toggle svg {
    position: absolute;
    transition: opacity 180ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-page .password-toggle .eye-open {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.login-page .password-toggle .eye-closed {
    opacity: 0;
    transform: scale(0.72) rotate(-8deg);
}

.login-page .password-toggle[aria-pressed="true"] .eye-open {
    opacity: 0;
    transform: scale(0.72) rotate(8deg);
}

.login-page .password-toggle[aria-pressed="true"] .eye-closed {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.login-field-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.45rem 0 0;
    color: #9a6700;
    font-size: 0.78rem;
    line-height: 1.4;
}

.login-field-hint[hidden] {
    display: none;
}

.login-submit {
    position: relative;
    display: grid;
    min-height: 48px;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.2);
    transition:
        transform 160ms ease,
        box-shadow 200ms ease,
        filter 200ms ease,
        background 140ms ease;
}

.login-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(var(--brand-primary-rgb), 0.28);
    filter: saturate(1.06);
}

.login-submit:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 7px 16px rgba(var(--brand-primary-rgb), 0.2);
}

.login-submit > span {
    grid-area: 1 / 1;
    transition: opacity 150ms ease, transform 180ms ease;
}

.login-submit-spinner {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.72);
}

.login-submit-success {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    opacity: 0;
    transform: scale(0.82);
}

.login-submit-success svg {
    width: 1.15rem;
    height: 1.15rem;
}

.login-submit.is-submitting {
    cursor: wait;
}

.login-submit.is-submitting .login-submit-label,
.login-submit.is-success .login-submit-label {
    opacity: 0;
    transform: translateY(-5px);
}

.login-submit.is-submitting .login-submit-spinner {
    opacity: 1;
    transform: scale(1);
    animation: loginSpin 720ms linear infinite;
}

.login-submit.is-success,
.login-submit.is-success:disabled,
.login-submit.is-success:disabled:hover {
    background: linear-gradient(135deg, #16a36a, #1eb980);
    color: #fff;
    cursor: default;
    font-weight: 600;
    box-shadow: 0 12px 26px rgba(22, 163, 106, 0.25);
}

.login-submit.is-success .login-submit-spinner {
    opacity: 0;
}

.login-submit.is-success .login-submit-success {
    opacity: 1;
    transform: scale(1);
    animation: loginSuccessPop 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-submit:disabled {
    opacity: 1;
}

@keyframes loginReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loginFieldShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

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

@keyframes loginSuccessPop {
    from { opacity: 0; transform: scale(0.76); }
    to { opacity: 1; transform: scale(1); }
}

.login-page .auth-browse-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 4px;
}

@media (max-width: 480px) {
    .login-page .auth-card {
        width: 100%;
    }

    .login-page .password-toggle,
    .login-submit,
    .login-page .auth-browse-link {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page .auth-brand,
    .login-page .auth-card,
    .login-page .auth-header,
    .login-page .login-error-message,
    .login-page .auth-form .form-group,
    .login-page .login-submit,
    .login-page .auth-footer,
    .login-page .auth-trust,
    .login-field.is-shaking .login-input-shell,
    .login-field.is-shaking .password-wrapper,
    .login-submit.is-submitting .login-submit-spinner,
    .login-submit.is-success .login-submit-success {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .login-page .auth-card,
    .login-page input,
    .login-page .password-toggle,
    .login-page .password-toggle svg,
    .login-field-status,
    .login-submit,
    .login-submit > span {
        transition: none;
    }
}