/* ============================================================
   MXUBER RIDER AUTH — entrance animations + micro-interactions
   Wired in via @import at the top of auth.css (so it loads on
   /cab/login, /cab/verify-otp, /cab/register with zero blade
   changes). Every selector is scoped under .mx-cabauth.

   Language: 200-500ms entrances, cubic-bezier(0.16,1,0.3,1),
   black #0A0A0A rings, no blue, no gradients.

   Why `backwards` instead of `both` on children:
   `both`/`forwards` keeps filling transform AFTER the entrance,
   which permanently overrides :hover/:active transforms on the
   same element. `backwards` covers only the delay window, so
   hover lift / press / shake keep working afterwards.
   ============================================================ */

/* ------------------------------------------------------------
   0. KEYFRAMES
   ------------------------------------------------------------ */

@keyframes mx-panel-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mx-fade-in {
    from { opacity: 0; }
}

@keyframes mx-fade-up {
    from { opacity: 0; transform: translateY(12px); }
}

@keyframes mx-fade-down {
    from { opacity: 0; transform: translateY(-4px); }
}

@keyframes mx-cell-in {
    from { opacity: 0; transform: scale(0.8); }
}

@keyframes mx-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* ------------------------------------------------------------
   1. PANEL ENTRANCE (all three pages)
   ------------------------------------------------------------ */

.mx-cabauth {
    animation: mx-panel-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ------------------------------------------------------------
   2-6. STAGGERED CONTENT CASCADE
   logo 100ms -> title 150ms -> subtitle 200ms -> fields 250ms+
   -> submit 350ms -> demo chip 400ms -> divider 450ms -> switch
   link 500ms. Everything rides the same ease curve.
   ------------------------------------------------------------ */

/* logo */
.mx-cabauth__logo {
    animation: mx-fade-in 0.3s ease 0.1s backwards;
}

/* title + subtitle */
.mx-cabauth__title {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.mx-cabauth__sub {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

/* form fields */
.mx-cabauth .mx-cabauth__label {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.mx-cabauth .mx-cabauth__inputrow {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

/* register-style stacked boxes stagger in at 25ms steps */
.mx-cabauth form > .form-box {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.mx-cabauth form > .form-box:nth-of-type(2) { animation-delay: 0.275s; }
.mx-cabauth form > .form-box:nth-of-type(3) { animation-delay: 0.3s; }
.mx-cabauth form > .form-box:nth-of-type(4) { animation-delay: 0.325s; }
.mx-cabauth form > .form-box:nth-of-type(5) { animation-delay: 0.35s; }

/* submit CTA (login / register / verify all carry .otp-btn) */
.mx-cabauth .otp-btn {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s backwards;
}

/* demo chip + divider + account switch row */
.mx-cabauth__demo {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

.mx-cabauth__divider {
    animation: mx-fade-in 0.3s ease 0.45s backwards;
}

.mx-cabauth__signup {
    animation: mx-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
}

/* ------------------------------------------------------------
   7. OTP CELLS — scale in with a 30ms stagger (verify page)
   ------------------------------------------------------------ */

.mx-cabauth .otp-field {
    animation: mx-cell-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.mx-cabauth .otp__field__1 { animation-delay: 0.25s; }
.mx-cabauth .otp__field__2 { animation-delay: 0.28s; }
.mx-cabauth .otp__field__3 { animation-delay: 0.31s; }
.mx-cabauth .otp__field__4 { animation-delay: 0.34s; }
.mx-cabauth .otp__field__5 { animation-delay: 0.37s; }
.mx-cabauth .otp__field__6 { animation-delay: 0.4s; }

/* demo OTP hint chip lands just after the last cell */
.mx-cabauth__otp-hint {
    animation: mx-fade-in 0.3s ease 0.43s backwards;
}

/* ------------------------------------------------------------
   8. FOCUS RING — 2px black + 3px offset on every interactive
   element. (auth.css reconciles its input rules to match, so
   there is never a double ring.)
   ------------------------------------------------------------ */

.mx-cabauth :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #0A0A0A;
    outline-offset: 3px;
}

/* select2 renders a focusable div, not a real control */
.mx-cabauth .select2-container--default .select2-selection--single:focus-visible {
    outline: 2px solid #0A0A0A;
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   9. ERROR FEEDBACK — shake + label entrance
   jQuery-validate flips .error on inputs, which starts the
   shake with zero JS. The util class stays available for
   manual use. Never shake an element that also carries an
   entrance animation above — removing .error would replay the
   entrance; the inputs themselves carry none.
   ------------------------------------------------------------ */

.mx-cabauth .error-shake,
.mx-cabauth .form-control.error,
.mx-cabauth .form-select.error,
.mx-cabauth .otp-field.error {
    animation: mx-shake 0.3s ease;
}

/* validation labels slide in under their field */
.mx-cabauth label.error,
.mx-cabauth .text-danger {
    animation: mx-fade-down 0.2s ease;
}

/* server-side OTP rejection: cells shake once on reload */
.mx-cabauth form:has(.text-danger) .otp-inputs {
    animation: mx-shake 0.3s ease;
}

/* ------------------------------------------------------------
   10. REDUCED MOTION — kill every animation + transition
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .mx-cabauth,
    .mx-cabauth *,
    .mx-cabauth *::before,
    .mx-cabauth *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}