/* Login page motion (Views/Account/Index.cshtml). Loaded after the page's own <style>.
   States are driven by [data-state] on #authBox, set by assets/js/custom/login-ui.js:
   login | locations | society | done | auto. Decorative motion stops under prefers-reduced-motion. */

:root {
    --au-ease: cubic-bezier(.22, .9, .3, 1);
    --au-o: .3s; /* the first-paint loader is still fading for ~0.6s: start entrances under it */
}

@keyframes au-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes au-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes au-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes au-out-left { to { opacity: 0; transform: translateX(-28px); } }
@keyframes au-out-right { to { opacity: 0; transform: translateX(28px); } }
@keyframes au-card-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes au-spin { to { transform: rotate(360deg); } }
@keyframes au-shake { 0%,100% { transform: none; } 18% { transform: translateX(-9px); } 36% { transform: translateX(8px); } 54% { transform: translateX(-6px); } 72% { transform: translateX(4px); } }

/* ── 1. Brand panel (left) ── */
.auth-brand-panel {
    background-size: 180% 180%;
    animation: au-grad 18s ease-in-out infinite alternate;
}
@keyframes au-grad { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

.auth-brand-panel::before { animation: au-drift-a 16s ease-in-out infinite alternate; }
.auth-brand-panel::after { animation: au-drift-b 20s ease-in-out infinite alternate; }
@keyframes au-drift-a { to { transform: translate(-70px, 90px) scale(1.15); } }
@keyframes au-drift-b { to { transform: translate(90px, -60px) scale(1.2); } }

.brand-dots { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.brand-dots i {
    position: absolute;
    bottom: -24px;
    left: var(--l);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    opacity: 0;
    animation: au-float var(--t) linear var(--dl) infinite;
}
.brand-dots i:nth-child(1) { --l: 8%;  --s: 8px;  --t: 15s; --dl: -2s; }
.brand-dots i:nth-child(2) { --l: 22%; --s: 14px; --t: 21s; --dl: -9s; }
.brand-dots i:nth-child(3) { --l: 37%; --s: 6px;  --t: 13s; --dl: -5s; }
.brand-dots i:nth-child(4) { --l: 52%; --s: 10px; --t: 18s; --dl: -12s; }
.brand-dots i:nth-child(5) { --l: 66%; --s: 7px;  --t: 16s; --dl: -1s; }
.brand-dots i:nth-child(6) { --l: 80%; --s: 12px; --t: 23s; --dl: -15s; }
.brand-dots i:nth-child(7) { --l: 92%; --s: 6px;  --t: 14s; --dl: -7s; }
@keyframes au-float {
    0% { opacity: 0; transform: translateY(0); }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-105vh) translateX(26px); }
}

.brand-logo, .brand-back-link, .brand-middle h1, .brand-middle > p, .brand-feature-item, .brand-bottom {
    animation: au-in-left .7s var(--au-ease) both;
}
.brand-logo { animation-delay: calc(var(--au-o) + .00s); }
.brand-back-link { animation-delay: calc(var(--au-o) + .10s); }
.brand-middle h1 { animation-delay: calc(var(--au-o) + .18s); }
.brand-middle > p { animation-delay: calc(var(--au-o) + .28s); }
.brand-feature-item:nth-child(1) { animation-delay: calc(var(--au-o) + .40s); }
.brand-feature-item:nth-child(2) { animation-delay: calc(var(--au-o) + .48s); }
.brand-feature-item:nth-child(3) { animation-delay: calc(var(--au-o) + .56s); }
.brand-feature-item:nth-child(4) { animation-delay: calc(var(--au-o) + .64s); }
.brand-feature-item:nth-child(5) { animation-delay: calc(var(--au-o) + .72s); }
.brand-bottom { animation-name: au-rise; animation-delay: calc(var(--au-o) + .85s); }

.brand-middle h1 span {
    background: linear-gradient(90deg, #ffd54f 0%, #fff3b0 45%, #ffd54f 90%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: au-shine 5s linear infinite;
}
@keyframes au-shine { to { background-position: -200% 0; } }

.brand-feature-icon { transition: transform .25s var(--au-ease), background .25s; animation: au-glow 3.6s ease-in-out infinite; }
.brand-feature-item:nth-child(2) .brand-feature-icon { animation-delay: .5s; }
.brand-feature-item:nth-child(3) .brand-feature-icon { animation-delay: 1s; }
.brand-feature-item:nth-child(4) .brand-feature-icon { animation-delay: 1.5s; }
.brand-feature-item:nth-child(5) .brand-feature-icon { animation-delay: 2s; }
.brand-feature-item:hover .brand-feature-icon { transform: scale(1.12) rotate(-6deg); background: rgba(255,255,255,.2); }
@keyframes au-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,213,79,0); } 50% { box-shadow: 0 0 0 7px rgba(255,213,79,.12); } }

/* ── 2. Form card ── */
.auth-form-box { animation: au-card-in .75s var(--au-ease) calc(var(--au-o) + .05s) both; }

/* fields rise one after another each time the sign-in step is shown */
#dvLogin > * { animation: au-rise .55s var(--au-ease) both; }
#dvLogin > :nth-child(1) { animation-delay: .05s; }
#dvLogin > :nth-child(2) { animation-delay: .11s; }
#dvLogin > :nth-child(3) { animation-delay: .17s; }
#dvLogin > :nth-child(4) { animation-delay: .23s; }
#frmlogin > .form-group.mb-0 { animation: au-rise .55s var(--au-ease) .3s both; }
.auth-extras { animation: au-rise .55s var(--au-ease) .38s both; }

.auth-form-box .form-group:focus-within > .col-form-label { color: #7366ff; }
.auth-form-box .col-form-label { transition: color .2s; }

/* wrong password / failed request */
#frmlogin.shake { animation: au-shake .45s ease; }
.auth-form-box .alert { animation: au-rise .35s var(--au-ease) both; border-radius: 10px; }

/* sign-in button: sheen on hover, press, spinner while the request runs */
.auth-form-box #kt_login_signin_submit { position: relative; overflow: hidden; }
.auth-form-box #kt_login_signin_submit::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
    transform: translateX(-110%);
    pointer-events: none;
}
.auth-form-box #kt_login_signin_submit:hover::after { animation: au-sheen .9s ease; }
@keyframes au-sheen { to { transform: translateX(110%); } }
.auth-form-box #kt_login_signin_submit:active { transform: scale(.98) !important; }
.auth-form-box #kt_login_signin_submit.kt-spinner { cursor: progress; }
.auth-form-box #kt_login_signin_submit.kt-spinner::before {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    margin-right: 10px;
    vertical-align: -3px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: au-spin .7s linear infinite;
}
#authBox[data-state="locations"] #kt_login_signin_submit { animation: au-btn-ring 1.6s ease-out 1s 2; }
@keyframes au-btn-ring { 0% { box-shadow: 0 0 0 0 rgba(115,102,255,.45); } 100% { box-shadow: 0 0 0 14px rgba(115,102,255,0); } }

/* "Create an Account" pill (was inline style + onmouseover/onmouseout handlers) */
.auth-form-box a.auth-create {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8eaf6;
    color: #2e2594;
    border-radius: 10px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    transition: background .2s, transform .2s var(--au-ease);
}
.auth-form-box a.auth-create:hover { background: #c5cae9; transform: translateY(-1px); }
.auth-form-box a.auth-create i { transition: transform .25s var(--au-ease); }
.auth-form-box a.auth-create:hover i { transform: scale(1.15); }

/* ── 3. Society (location) selection ── */
#authBox[data-state="locations"] .auth-extras { display: none; }
#dvLocation { animation: au-in-right .4s var(--au-ease) both; }
#dvLogin.is-leaving { animation: au-out-left .2s ease both; }
#dvLocation.is-leaving { animation: au-out-right .2s ease both; }
#dvLogin.is-leaving > *, #dvLocation.is-leaving > * { animation: none; }

.auth-loc-head { margin-bottom: 16px; }
.auth-loc-head h4 { font-weight: 800; color: #2e2594; font-size: 1.45rem; margin-bottom: 6px; }
.auth-loc-head p { color: #6c757d; font-size: .88rem; margin: 0 0 12px; }
.auth-who-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.auth-who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    background: #f3f4fb;
    border-radius: 999px;
    padding: 4px 14px 4px 4px;
    font-size: .8rem;
    color: #374151;
}
.auth-who .av {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #7366ff;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
}
.auth-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.auth-back { font-size: .8rem; white-space: nowrap; }
.auth-back i { margin-right: 4px; transition: transform .25s var(--au-ease); }
.auth-back:hover i { transform: translateX(-3px); }

.loc-list.enter .loc-row { animation: au-rise .45s var(--au-ease) both; animation-delay: calc(.12s + min(var(--i, 0), 8) * .05s); }
.loc-list .loc-row { transition: background .2s, box-shadow .2s, transform .2s var(--au-ease); }
.loc-list .loc-row:hover { transform: translateX(3px); }
.loc-list .loc-row:active { transform: scale(.985); }
.loc-list .loc-row.selected { box-shadow: inset 3px 0 0 #7366ff; }
.loc-list .loc-row .loc-avatar { transition: background .2s, color .2s; }
.loc-list .loc-row.selected .loc-avatar { animation: au-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
.loc-list .loc-row .loc-check { transform: scale(.3) rotate(-30deg); transition: opacity .15s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.loc-list .loc-row.selected .loc-check { transform: none; }
@keyframes au-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* ── 4. Status card: society pick-up (single location), submitted, auto sign-in ── */
.auth-status {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 330px;
    padding: 10px 0 4px;
}
#authBox[data-state="society"] .auth-status,
#authBox[data-state="done"] .auth-status,
#authBox[data-state="auto"] .auth-status { display: flex; }
#authBox[data-state="society"] #frmlogin,
#authBox[data-state="done"] #frmlogin,
#authBox[data-state="auto"] #frmlogin { display: none !important; }
#frmlogin.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .17s ease, transform .17s ease; }

.auth-orb { position: relative; width: 128px; height: 128px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; animation: au-pop-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes au-pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.auth-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.auth-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.auth-ring .trk { stroke: #e8eaf6; }
.auth-ring .arc { stroke: url(#authGrad); stroke-dasharray: 327; stroke-dashoffset: 245; transform-origin: 60px 60px; animation: au-spin 1.1s linear infinite; }

.auth-pulse { position: absolute; top: 14px; left: 14px; right: 14px; bottom: 14px; border-radius: 50%; border: 2px solid rgba(115,102,255,.4); animation: au-pulse 2s ease-out infinite; }
@keyframes au-pulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

.auth-core {
    position: relative;
    z-index: 1;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: #fff;
    color: #7366ff;
    font-size: 1.9rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(46,37,148,.18);
}
.auth-core i { animation: au-breathe 1.8s ease-in-out infinite; }
@keyframes au-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }

.auth-tick { position: absolute; z-index: 2; width: 40px; height: 40px; top: 44px; left: 44px; opacity: 0; }
.auth-tick path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; }

.auth-sparks i { position: absolute; top: 61px; left: 61px; width: 6px; height: 6px; border-radius: 50%; background: #7366ff; opacity: 0; }
.auth-sparks i:nth-child(1) { --a: 0deg; }
.auth-sparks i:nth-child(2) { --a: 36deg; }
.auth-sparks i:nth-child(3) { --a: 72deg; }
.auth-sparks i:nth-child(4) { --a: 108deg; }
.auth-sparks i:nth-child(5) { --a: 144deg; }
.auth-sparks i:nth-child(6) { --a: 180deg; }
.auth-sparks i:nth-child(7) { --a: 216deg; }
.auth-sparks i:nth-child(8) { --a: 252deg; }
.auth-sparks i:nth-child(9) { --a: 288deg; }
.auth-sparks i:nth-child(10) { --a: 324deg; }
.auth-sparks i:nth-child(3n+2) { background: #ffd54f; }
.auth-sparks i:nth-child(3n) { background: #22a06b; }

/* done: ring completes, core turns green, tick draws, sparks fly out */
.auth-status[data-mode="done"] .auth-ring .arc { stroke: #22a06b; stroke-dashoffset: 0; animation: au-draw .7s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes au-draw { from { stroke-dashoffset: 327; } to { stroke-dashoffset: 0; } }
.auth-status[data-mode="done"] .auth-core { background: linear-gradient(135deg, #1b9a62, #3ccf8e); animation: au-pop .5s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
.auth-status[data-mode="done"] .auth-core i { opacity: 0; animation: none; }
.auth-status[data-mode="done"] .auth-tick { opacity: 1; }
.auth-status[data-mode="done"] .auth-tick path { animation: au-tick .45s ease-out .6s forwards; }
@keyframes au-tick { to { stroke-dashoffset: 0; } }
.auth-status[data-mode="done"] .auth-pulse { border-color: rgba(34,160,107,.55); animation: au-pulse 1s ease-out .55s 1 both; }
.auth-status[data-mode="done"] .auth-sparks i { animation: au-spark .8s ease-out .75s both; transform: rotate(var(--a)) translateY(-52px); }
@keyframes au-spark {
    0% { opacity: 0; transform: rotate(var(--a)) translateY(-52px) scale(.3); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-94px) scale(.9); }
}

.auth-status h4 { font-weight: 800; color: #2e2594; font-size: 1.45rem; margin: 0 0 6px; animation: au-rise .5s var(--au-ease) .12s both; }
.auth-status .auth-status-text { color: #6c757d; font-size: .9rem; margin: 0; max-width: 300px; word-break: break-word; animation: au-rise .5s var(--au-ease) .2s both; }

.auth-progress { position: relative; width: 200px; height: 4px; margin-top: 24px; border-radius: 4px; background: #e8eaf6; overflow: hidden; animation: au-rise .5s var(--au-ease) .3s both; }
.auth-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #2e2594, #9b92ff); animation: au-slide 1.3s ease-in-out infinite; }
@keyframes au-slide { 0% { left: -40%; } 100% { left: 100%; } }
.auth-status[data-mode="done"] .auth-progress span { left: 0; width: 8%; background: linear-gradient(90deg, #1b9a62, #3ccf8e); animation: au-fill 3s cubic-bezier(.1, .6, .2, 1) forwards; }
@keyframes au-fill { to { width: 92%; } }

.auth-status .auth-alt { margin-top: 20px; font-size: .82rem; opacity: 0; visibility: hidden; transition: opacity .4s; }
.auth-status .auth-alt.show { opacity: 1; visibility: visible; }

/* ── Reduced motion: keep the loading indicators, drop the decoration ── */
@media (prefers-reduced-motion: reduce) {
    .auth-brand-panel, .auth-brand-panel::before, .auth-brand-panel::after,
    .brand-dots i, .brand-logo, .brand-back-link, .brand-middle h1, .brand-middle h1 span, .brand-middle > p,
    .brand-feature-item, .brand-feature-icon, .brand-bottom, .auth-form-box,
    #dvLogin > *, #frmlogin > .form-group.mb-0, .auth-extras, #dvLocation, .loc-list.enter .loc-row,
    #authBox[data-state="locations"] #kt_login_signin_submit, .auth-pulse, .auth-core i, .auth-sparks i,
    .auth-orb, .auth-status h4, .auth-status .auth-status-text, .auth-progress { animation: none !important; }
    .brand-middle h1 span { -webkit-text-fill-color: #ffd54f; color: #ffd54f; background: none; }
    .auth-status[data-mode="done"] .auth-ring .arc { animation: none; }
    .auth-status[data-mode="done"] .auth-tick path { animation: none; stroke-dashoffset: 0; }
}