/* ETTIS_AUTH_MODERN: polish layer on top of auth.css. Remove its <link> to revert. */
:root {
    --em-accent: #B45309;
    --em-accent-2: #D97706;
    --em-accent-3: #F59E0B;
    --em-ok: #10B981;
}

@keyframes em-rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes em-shake  { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(3px); }
                       30%,50%,70% { transform: translateX(-6px); } 40%,60% { transform: translateX(6px); } }
@keyframes em-sheen  { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes em-pulse  { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
@keyframes em-slide  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Staggered entrance of form content (not the card, so 3D tilt keeps working) */
.auth-form-body > * { animation: em-rise .55s cubic-bezier(.2,.8,.2,1) backwards; }
.auth-form-body > *:nth-child(1) { animation-delay: .05s; }
.auth-form-body > *:nth-child(2) { animation-delay: .12s; }
.auth-form-body > *:nth-child(3) { animation-delay: .19s; }
.auth-form-body > *:nth-child(4) { animation-delay: .26s; }
.auth-form-body > *:nth-child(5) { animation-delay: .33s; }
.auth-form-body > *:nth-child(6) { animation-delay: .40s; }

/* Greeting chip */
.em-greeting {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    color: var(--em-accent);
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.25);
    padding: .3rem .75rem; border-radius: 999px;
    margin: .25rem 0 .6rem;
}
.em-greeting__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--em-ok); animation: em-pulse 2.2s infinite; }

/* Inputs: focus glow */
.auth-float-input { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.auth-float-input:focus {
    border-color: var(--em-accent) !important;
    box-shadow: 0 0 0 4px rgba(180,83,9,.16) !important;
    outline: none;
}
.auth-float-input:focus ~ .auth-float-icon { color: var(--em-accent); transition: color .2s ease; }

/* Sign-in button: gradient, lift, light sweep, sliding arrow */
.auth-btn-submit {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--em-accent) 0%, var(--em-accent-2) 55%, var(--em-accent-3) 100%) !important;
    border: 0 !important; color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(180,83,9,.75);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-btn-submit::after {
    content: ''; position: absolute; top: 0; left: 0; width: 35%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transform: translateX(-120%) skewX(-20deg); pointer-events: none;
}
.auth-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(180,83,9,.85); filter: saturate(1.08); }
.auth-btn-submit:hover::after { animation: em-sheen .9s ease; }
.auth-btn-submit:active { transform: translateY(0); box-shadow: 0 6px 16px -8px rgba(180,83,9,.7); }
.auth-btn-submit .bi-arrow-right { display: inline-block; transition: transform .2s ease; }
.auth-btn-submit:hover .bi-arrow-right { transform: translateX(4px); }
.auth-btn-submit:focus-visible { outline: 3px solid rgba(245,158,11,.55); outline-offset: 3px; }

/* Caps Lock warning */
.em-caps {
    display: none; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600; color: var(--em-accent);
    background: rgba(245,158,11,.12); border-radius: .5rem;
    padding: .35rem .65rem; margin-top: .45rem;
    animation: em-slide .2s ease;
}
.em-caps.is-on { display: inline-flex; }

/* Alerts slide in */
.auth-alert { animation: em-slide .3s ease; }

/* Wrong-password shake */
.auth-form.em-shake { animation: em-shake .5s cubic-bezier(.36,.07,.19,.97); }

/* Trust strip */
.em-trust {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: .4rem 1.1rem; margin-top: 1.1rem;
    font-size: .75rem; font-weight: 500; opacity: .72;
}
.em-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.em-trust .bi { color: var(--em-ok); }

/* Links: animated underline */
.auth-link { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px;
             background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; text-decoration: none; }
.auth-link:hover { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
    .auth-form-body > *, .auth-alert, .auth-form.em-shake, .em-caps, .em-greeting__dot,
    .auth-btn-submit:hover::after { animation: none !important; }
    .auth-btn-submit:hover { transform: none; }
}