/* Locus: приветствие при загрузке и оформление экрана входа (макет https://claude.ai/artifact/FUPvwzbergVfcFaYhmTaqM).
   Разметка заставки — в index.html, поведение — welcome.js. Экран входа строит team.js, здесь только его вид. */
:root{--wl-brand-bg:#141414;--wl-brand-fg:#f1f1ec;--wl-brand-muted:#9c9c95}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wl-brand-bg:#242525}}
:root[data-theme="dark"]{--wl-brand-bg:#242525}

/* ---------- заставка ---------- */
#locus-splash{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--canvas);color:var(--fg);transition:opacity .45s ease,visibility .45s}
#locus-splash.gone{opacity:0;visibility:hidden;pointer-events:none}
html:not(.wl-on) #locus-splash{display:none}
.wl-lockup{display:flex;align-items:center;gap:14px}
.wl-mark{width:86px;height:86px;overflow:visible}
.wl-mark .bar-v{transform-origin:16.5px 6px;transform:scaleY(0)}
.wl-mark .bar-h{transform-origin:10px 51.5px;transform:scaleX(0)}
.wl-mark .dot{transform-origin:44px 22px;transform:scale(0);fill:var(--hl)}
.wl-word{height:46px;width:auto;clip-path:inset(0 100% 0 0)}
.wl-hint{font-size:13px;color:var(--muted2);opacity:0;transform:translateY(6px);min-height:1.5em}
.wl-line{width:120px;height:3px;border-radius:3px;background:var(--line);overflow:hidden;opacity:0}
.wl-line i{display:block;height:100%;width:40%;background:var(--fg);border-radius:3px}

.wl-full .wl-mark .bar-v{animation:wl-grow-v .38s cubic-bezier(.6,0,.2,1) forwards}
.wl-full .wl-mark .bar-h{animation:wl-grow-h .34s cubic-bezier(.6,0,.2,1) .32s forwards}
.wl-full .wl-mark .dot{animation:wl-pop .5s cubic-bezier(.3,1.6,.5,1) .62s forwards}
.wl-full .wl-word{animation:wl-reveal .55s cubic-bezier(.6,0,.2,1) .9s forwards}
.wl-full .wl-hint{animation:wl-rise .4s ease 1.25s forwards}
.wl-full .wl-line{animation:wl-rise .3s ease 1.6s forwards}
.wl-full .wl-line i{animation:wl-slide 1s ease-in-out 1.6s infinite}
.wl-quick .wl-mark .bar-v{animation:wl-grow-v .25s cubic-bezier(.6,0,.2,1) forwards}
.wl-quick .wl-mark .bar-h{animation:wl-grow-h .22s cubic-bezier(.6,0,.2,1) .2s forwards}
.wl-quick .wl-mark .dot{animation:wl-pop .4s cubic-bezier(.3,1.6,.5,1) .38s forwards}
.wl-quick .wl-word{animation:wl-reveal .35s cubic-bezier(.6,0,.2,1) .5s forwards}
.wl-quick .wl-hint{animation:wl-rise .3s ease .6s forwards}
.wl-quick .wl-line{animation:wl-rise .3s ease .7s forwards}
.wl-quick .wl-line i{animation:wl-slide 1s ease-in-out .7s infinite}
@keyframes wl-grow-v{to{transform:scaleY(1)}}
@keyframes wl-grow-h{to{transform:scaleX(1)}}
@keyframes wl-pop{0%{transform:translateY(-16px) scale(0)}100%{transform:none}}
@keyframes wl-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes wl-rise{to{opacity:1;transform:none}}
@keyframes wl-slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ---------- экран входа ---------- */
#auth-screen{background:var(--canvas)!important;padding:28px max(16px,env(safe-area-inset-right,0px)) 28px max(16px,env(safe-area-inset-left,0px))!important}
#auth-screen .wl-frame{width:100%;max-width:900px;background:var(--frame);border-radius:30px;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;animation:wl-frame-in .6s cubic-bezier(.2,.8,.2,1) both}
#auth-screen .wl-brand{background:var(--wl-brand-bg);color:var(--wl-brand-fg);border-radius:24px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:420px;position:relative;overflow:hidden;animation:wl-fade-up .55s ease .12s both}
#auth-screen .wl-brand .wl-logo{height:34px;width:auto;align-self:flex-start}
#auth-screen .wl-brand .dot{fill:var(--hl)}
#auth-screen .wl-brand h2{margin:0;font-size:clamp(26px,3.2vw,36px);line-height:1.12;font-weight:500;letter-spacing:-.025em;text-wrap:balance;max-width:14ch}
#auth-screen .wl-brand h2 em{font-style:normal;color:var(--hl)}
#auth-screen .wl-brand ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--wl-brand-muted);font-size:13.5px}
#auth-screen .wl-brand li{display:flex;gap:10px;align-items:baseline}
#auth-screen .wl-brand li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hl);flex:none;transform:translateY(-2px)}
#auth-screen .wl-big{position:absolute;right:-38px;bottom:-46px;width:230px;height:230px;opacity:.07}
#auth-screen .auth-box{width:auto!important;border-radius:24px!important;padding:28px!important;gap:16px!important;align-content:start;animation:wl-fade-up .55s ease .22s both}
#auth-screen .auth-logo{display:none}
#auth-screen .auth-box h1{font-size:24px!important;font-weight:600!important;letter-spacing:-.02em!important}
#auth-screen .auth-box label{color:var(--muted2);font-size:12.5px}
#auth-screen .auth-box input{border:1.5px solid transparent;border-radius:16px;padding:13px 14px;font-size:15px;color:var(--fg);transition:border-color .2s,background .2s}
#auth-screen .auth-box input:focus{outline:none;border-color:var(--fg);background:var(--panel)}
#auth-screen .wl-pass{position:relative;display:block}
#auth-screen .wl-pass input{padding-right:96px}
#auth-screen .wl-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted2);font-size:12.5px;font-weight:500;padding:8px 10px;cursor:pointer;border-radius:10px}
#auth-screen .wl-caps{font-size:12.5px;color:var(--muted2);margin-top:-4px}
#auth-screen .auth-box button[type="submit"]{border:0;border-radius:999px;background:var(--pill);color:var(--pill-fg);padding:14px 20px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s,opacity .2s}
#auth-screen .auth-box button[type="submit"]:active{transform:scale(.98)}
#auth-screen .auth-box button[type="submit"]:disabled::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:wl-turn .7s linear infinite}
#auth-screen .auth-error:not([hidden]){background:var(--bad-soft);color:var(--bad);border-radius:16px;padding:11px 14px;margin:0;line-height:1.45}
#auth-screen .auth-note{margin:0}
#auth-screen .wl-foot{margin-top:auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted2);font-size:12.5px;border-top:1px solid var(--line);padding-top:14px}
#auth-screen .wl-foot b{color:var(--fg);font-weight:500}
#auth-screen .wl-shake{animation:wl-shake .4s ease}
@keyframes wl-frame-in{from{opacity:0;transform:translateY(18px) scale(.985)}}
@keyframes wl-fade-up{from{opacity:0;transform:translateY(10px)}}
@keyframes wl-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes wl-turn{to{transform:rotate(360deg)}}

@media (max-width:760px){
  #auth-screen .wl-frame{grid-template-columns:minmax(0,1fr)}
  #auth-screen .wl-brand{min-height:0;gap:22px;padding:22px}
  #auth-screen .wl-brand ul{display:none}
  #auth-screen .auth-box{padding:22px!important}
  .wl-word{height:36px}.wl-mark{width:66px;height:66px}
}
@media (prefers-reduced-motion:reduce){
  #locus-splash *,#auth-screen *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}