/* ORBION — login page: animated, glassmorphic, dual-theme */

.login-page{position:relative;height:100vh;display:grid;place-items:center}

/* ---------- animated background ---------- */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;background:
  radial-gradient(120% 120% at 80% -10%, var(--bg-2), var(--bg) 55%);}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;will-change:transform}
:root:not([data-theme="night"]) .aurora{mix-blend-mode:multiply;opacity:.42}
.a1{width:52vw;height:52vw;left:-8vw;top:-12vw;background:radial-gradient(circle,var(--accent),transparent 62%);animation:drift1 22s ease-in-out infinite}
.a2{width:46vw;height:46vw;right:-6vw;top:8vh;background:radial-gradient(circle,var(--accent-3),transparent 62%);animation:drift2 27s ease-in-out infinite}
.a3{width:44vw;height:44vw;left:24vw;bottom:-16vw;background:radial-gradient(circle,var(--accent-2),transparent 62%);animation:drift3 24s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-5vw,6vh) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-5vh) scale(1.1)}}

.grid-floor{position:absolute;left:-25%;right:-25%;bottom:-10%;height:60%;
  background-image:linear-gradient(var(--field-line) 1px,transparent 1px),linear-gradient(90deg,var(--field-line) 1px,transparent 1px);
  background-size:44px 44px;transform:perspective(600px) rotateX(68deg);transform-origin:bottom;
  mask-image:linear-gradient(to top,rgba(0,0,0,.5),transparent 78%);opacity:.5;animation:floor 18s linear infinite}
@keyframes floor{to{background-position:0 44px,44px 0}}

#stars{position:absolute;inset:0;width:100%;height:100%;opacity:.9}

.orbit-field{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ring{position:absolute;border-radius:50%;border:1px solid var(--field-line);opacity:.5}
.r1{width:min(72vmin,780px);height:min(72vmin,780px);animation:spin 40s linear infinite;border-style:dashed}
.r2{width:min(52vmin,560px);height:min(52vmin,560px);animation:spin 30s linear infinite reverse;border-color:var(--glow)}
.r3{width:min(34vmin,360px);height:min(34vmin,360px);animation:spin 22s linear infinite}
.ring::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 14px 3px var(--glow);transform:translateX(-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.watermark{width:min(20vmin,190px);height:min(20vmin,190px);opacity:.06;filter:none;animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,var(--scrim));pointer-events:none}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:20px;right:24px;z-index:5;display:flex;gap:14px;align-items:center}

/* ---------- card ---------- */
.stage{position:relative;z-index:3;width:100%;display:grid;place-items:center;padding:24px}
.card{position:relative;width:min(430px,92vw);padding:36px 34px 22px;border-radius:22px;
  background:var(--panel);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--panel-line);box-shadow:var(--panel-shadow);
  animation:cardIn .9s cubic-bezier(.16,.84,.3,1) both}
@keyframes cardIn{0%{opacity:0;transform:translateY(26px) scale(.965)}100%{opacity:1;transform:none}}
.card-glow{position:absolute;inset:-1px;border-radius:22px;pointer-events:none;
  background:linear-gradient(130deg,transparent 30%,var(--glow),transparent 70%);
  opacity:.6;filter:blur(6px);animation:edge 6s linear infinite;background-size:220% 220%}
@keyframes edge{to{background-position:220% 220%}}

.card-head{text-align:center;margin-bottom:20px}
.brand-lockup{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;padding:6px 14px;border-radius:14px;transition:background .4s,box-shadow .4s}
.brand-lockup .logo-wordmark{width:230px;height:48px}
/* keep the original-colour logo legible on the dark card */
:root[data-theme="night"] .brand-lockup{background:rgba(255,255,255,.94);box-shadow:0 10px 26px -12px rgba(0,0,0,.55)}
.spin-in{animation:wordIn .9s .05s both}
@keyframes wordIn{0%{opacity:0;transform:translateY(-8px) scale(.9);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
.eyebrow{font-size:9.5px;color:var(--accent);opacity:0;animation:fadeUp .6s .4s both}
h1{margin:6px 0 4px;font-size:26px;letter-spacing:-.02em;opacity:0;animation:fadeUp .6s .5s both}
.sub{margin:0;color:var(--muted);font-size:13px;line-height:1.5;opacity:0;animation:fadeUp .6s .58s both}
@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

/* ---------- tabs ---------- */
.tabs{position:relative;display:flex;gap:6px;padding:5px;margin:0 0 18px;border-radius:13px;
  background:var(--field);border:1px solid var(--field-line);opacity:0;animation:fadeUp .6s .64s both}
.tab{flex:1;position:relative;z-index:2;border:0;background:transparent;color:var(--muted);
  padding:9px 8px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:color .3s}
.tab.on{color:#fff}
:root:not([data-theme="night"]) .tab.on{color:#fff}
.tab-ink{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc(50% - 6px);border-radius:9px;
  background:linear-gradient(120deg,var(--accent),var(--accent-3));box-shadow:0 6px 18px -6px var(--accent);
  transition:transform .42s cubic-bezier(.5,-0.2,.2,1.3)}
.tabs[data-v="signup"] .tab-ink{transform:translateX(calc(100% + 6px))}

/* ---------- forms ---------- */
.form{display:none;flex-direction:column;gap:16px}
.form.on{display:flex;animation:formIn .5s ease both}
@keyframes formIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}

.field{position:relative;display:block}
.field input{width:100%;padding:16px 14px 8px;border-radius:12px;font-size:15px;color:var(--text);
  background:var(--field);border:1px solid var(--field-line);outline:none;transition:border-color .25s,box-shadow .25s,background .3s}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.field .label{position:absolute;left:14px;top:14px;color:var(--muted);font-size:14px;pointer-events:none;
  transition:transform .22s ease,color .22s ease,font-size .22s ease;transform-origin:left top}
.field input:focus + .label,.field input:not(:placeholder-shown) + .label{transform:translateY(-9px) scale(.76);color:var(--accent)}
.field .line{position:absolute;left:12px;right:12px;bottom:7px;height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.5,0,.2,1);opacity:.9}
.field input:focus ~ .line{transform:scaleX(1)}
.peek{position:absolute;right:8px;top:9px;width:30px;height:30px;border:0;background:transparent;color:var(--muted);
  cursor:pointer;border-radius:8px;font-size:16px;line-height:1;transition:color .2s,background .2s}
.peek:hover{color:var(--accent);background:var(--glow)}
.peek.on{color:var(--accent)}

.submit{position:relative;overflow:hidden;margin-top:4px;height:50px;border:0;border-radius:13px;cursor:pointer;
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(120deg,var(--accent),var(--accent-3) 60%,var(--accent-2));
  background-size:200% 100%;box-shadow:0 14px 30px -12px var(--accent);transition:transform .15s,box-shadow .3s,filter .3s;
  animation:sheen 5s linear infinite}
@keyframes sheen{to{background-position:200% 0}}
.submit:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px var(--accent);filter:brightness(1.06)}
.submit:active{transform:translateY(0) scale(.99)}
.submit::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:swipe 3.4s ease-in-out infinite}
@keyframes swipe{0%,60%{left:-60%}100%{left:130%}}
.submit .spinner{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;margin-left:2px}
.submit.loading span{opacity:.65}
.submit.loading .spinner{display:inline-block;animation:spin .7s linear infinite;vertical-align:middle}
.submit[disabled]{cursor:default}

.msg{min-height:18px;margin:14px 2px 4px;font-size:12.5px;text-align:center;color:var(--muted);transition:color .3s}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--ok)}
.card.shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

.card-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--panel-line);color:var(--muted);font-size:10.5px}
.card-foot .mono{font-size:9.5px}
.card-foot .dot{opacity:.5}

@media (max-width:480px){.card{padding:28px 22px 18px}.watermark{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}