/* =====================================================================
   Auth (login page)
   Uses ONLY UBold "retro" theme tokens (Bootstrap CSS variables), so it
   stays correct in light/dark and if the palette changes.

   Trimmed 2026-08-13: this file used to also carry the styling for the
   old first-login "sync users" modal (the .al-* block). That modal was
   replaced by the /Admin/UserSync page, and the login page itself was
   rebuilt around the .ax-* styles that live inline in Login.cshtml.
   Verified in-browser that only the five rules below still match
   anything on the page — 82 of the 87 rules were inert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Motion tokens + reduced-motion guard
   --------------------------------------------------------------------- */
:root {
    --al-ease: cubic-bezier(.22, 1, .36, 1);
    --al-fast: .18s;
    --al-base: .28s;
    --al-slow: .45s;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   2. Password reveal toggle
   --------------------------------------------------------------------- */
#togglePassword {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    transition: color var(--al-fast) var(--al-ease), background-color var(--al-fast) var(--al-ease);
}

/* ---------------------------------------------------------------------
   3. Step swap (credentials <-> OTP)
   --------------------------------------------------------------------- */
#step-credentials:not(.d-none),
#step-otp:not(.d-none) {
    animation: alStepIn var(--al-base) var(--al-ease) both;
}

@keyframes alStepIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

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

#otpCode {
    transition: box-shadow var(--al-fast) var(--al-ease);
}