/* A short welcome animation, never a loading screen. */
/* The sign-in card already contains the animated brand mark. */
main:has(#auth:not([hidden])) > header > img {display:none}
main:has(#auth:not([hidden])) > header .welcome-header-actions {margin-left:auto}
#auth{position:relative;isolation:isolate;max-width:480px;padding:24px 30px 28px;border:1px solid #dbe3f7;border-radius:28px;background:linear-gradient(180deg,#eef2ff 0,#f8f9ff 210px,#fff 340px);box-shadow:0 24px 65px #20377712}
#auth::before{content:'';position:absolute;left:28px;right:28px;top:0;height:4px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,#086dff,#563be7 65%,#ff713d)}
#auth #back{font-size:12px;color:#52658a;padding:8px 0;min-height:36px}
.auth-brand{position:relative;display:grid;place-items:center;height:116px;margin:8px 0 14px;isolation:isolate;pointer-events:none}
.auth-brand::before{content:'';position:absolute;width:210px;height:94px;background:radial-gradient(ellipse,#5277f42b,transparent 70%);border-radius:50%;z-index:-1}
.auth-brand-logo{display:grid;place-items:center;position:relative;padding:20px 24px;border:1px solid #e0e8ff;border-radius:22px;background:#fff;box-shadow:0 12px 28px #324ab716;transform:rotate(-3deg)}
.auth-brand-logo img{display:block;width:156px;max-width:100%;height:auto}
.auth-brand-dot{position:absolute;border-radius:50%;width:9px;height:9px;background:#ff713d;right:19%;top:12%}
.auth-brand-dot.second{width:6px;height:6px;background:#2166ed;left:17%;top:auto;bottom:12%}
#auth>.eyebrow{text-align:center;font-size:11px;letter-spacing:.3px;margin:0 0 8px;color:#4564c5}
#auth h1{text-align:center;font-size:clamp(20px,5vw,25px);line-height:1.5;margin:0 0 22px;color:#17264d;letter-spacing:-.3px}
#auth h1:focus{outline:none}
#auth label{font-size:13px;line-height:1.6;color:#344563;margin:16px 0}
#auth input{background:#fafbff;border-color:#d7dff0;border-radius:13px;padding:13px 14px;min-height:48px;color:#17264d;transition:border-color .18s,box-shadow .18s}
#auth input:focus{background:#fff;border-color:#4265ed;box-shadow:0 0 0 3px #4265ed12}
#auth .primary{min-height:50px;border-radius:14px;box-shadow:0 8px 18px #3658e225;background:linear-gradient(105deg,#235fea,#5936e5);transition:box-shadow .18s,filter .18s}
#auth .primary:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 10px 24px #3658e235}
#auth #register{display:block;width:100%;text-align:center;margin-top:16px;padding:15px 0 0;border-top:1px solid #edf0f7;font-size:12px;line-height:1.8}
#auth #staff-note{text-align:center;font-size:12px;line-height:1.8;margin:18px 0 0}
#auth #message:empty{display:none}
#auth #message:not(:empty){padding:12px;background:#fff2ee;border:1px solid #ffd8c9;border-radius:12px;font-size:13px}
#auth:not([hidden]){animation:auth-card-enter .45s ease-out both}
#auth:not([hidden]) .auth-brand-logo{animation:auth-logo-enter 1.05s cubic-bezier(.16,1,.3,1) both}
#auth:not([hidden]) .auth-brand::before{animation:auth-halo 1.2s ease-out both}
#auth:not([hidden]) .auth-brand-dot{animation:auth-dot-enter 1s ease-out both}
#auth:not([hidden]) .auth-brand-dot.second{animation-delay:.1s}
@keyframes auth-card-enter{from{opacity:.45;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes auth-logo-enter{0%{opacity:0;transform:translateY(16px) scale(.85) rotate(-8deg)}65%{opacity:1;transform:translateY(-3px) scale(1.025) rotate(1deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(-3deg)}}
@keyframes auth-halo{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
@keyframes auth-dot-enter{from{opacity:0;transform:translateY(12px) scale(.4)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:650px){#auth{padding:18px 22px 24px;border-radius:24px}.auth-brand{height:98px;margin:6px 0 12px}.auth-brand-logo{padding:17px 22px}.auth-brand-logo img{width:140px}#auth h1{margin-bottom:18px}#auth label{margin:14px 0}}
@media(prefers-reduced-motion:reduce){#auth:not([hidden]),#auth:not([hidden]) .auth-brand-logo,#auth:not([hidden]) .auth-brand::before,#auth:not([hidden]) .auth-brand-dot{animation:none}#auth input,#auth .primary{transition:none}}