/* Login page — colors come from themes.css tokens */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--ar);
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed; inset: 0; width: 100vw; height: 100vh; display: block;
  opacity: 0; transition: opacity 1.4s ease;
}
#scene.ready { opacity: 1; }

/* readability veil on the card's side */
.veil {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 90% at 0% 50%, color-mix(in srgb, var(--ink) 75%, transparent) 0%, color-mix(in srgb, var(--ink) 30%, transparent) 36%, transparent 60%),
    radial-gradient(140% 100% at 50% 120%, color-mix(in srgb, var(--ink) 80%, transparent), transparent 55%);
}
[dir="rtl"] .veil {
  background:
    radial-gradient(110% 90% at 100% 50%, color-mix(in srgb, var(--ink) 75%, transparent) 0%, color-mix(in srgb, var(--ink) 30%, transparent) 36%, transparent 60%),
    radial-gradient(140% 100% at 50% 120%, color-mix(in srgb, var(--ink) 80%, transparent), transparent 55%);
}

.fallback-mark { display: none; }
body.no-webgl .fallback-mark {
  display: grid; place-items: center; position: fixed; top: 50%; left: 72%;
  transform: translate(-50%, -50%); width: min(30vw, 320px);
}
[dir="rtl"] body.no-webgl .fallback-mark { left: 28%; }
[data-gg-theme="arctic"] body.no-webgl .fallback-mark img { filter: invert(1); }

.stage {
  position: relative; z-index: 2; min-height: 100%;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 32px clamp(20px, 7vw, 120px);
}

.card {
  position: relative;
  width: min(420px, 100%);
  padding: 40px 34px 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 80%, transparent), color-mix(in srgb, var(--panel) 86%, transparent));
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 0; transform: translateY(14px);
  animation: cardIn .9s cubic-bezier(.2,.7,.2,1) .5s forwards;
}
/* a sewn seam: the vault is stitched shut */
.seam {
  position: absolute; inset: 9px; border-radius: 13px; pointer-events: none;
  border: 1.5px dashed rgba(var(--fg-rgb), .13);
}
@keyframes cardIn { to { opacity: 1; transform: none; } }

.lang-btn {
  position: fixed; top: calc(20px + env(safe-area-inset-top, 0px)); inset-inline-end: 24px; z-index: 5;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  height: 30px; padding: 0 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--steel-2);
  font: 500 13px/1 var(--ar);
}
.lang-btn:hover { color: var(--fg); border-color: rgba(var(--fg-rgb), .35); }
.lang-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.card-head { margin-bottom: 26px; }
.wordmark {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 54px; line-height: .9; letter-spacing: .06em;
  text-align: start;
  background: linear-gradient(180deg, var(--wm-1) 0%, var(--wm-2) 50%, var(--wm-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { margin: 12px 0 0; color: var(--steel); font-size: 14px; }

.form { display: grid; gap: 16px; }
.form[hidden] { display: none; }
.row2 { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }

.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; color: var(--steel-2); font-weight: 500; }
.field input {
  width: 100%; height: 48px; padding: 0 14px;
  font: 500 15px/1 var(--ar); color: var(--fg);
  background: color-mix(in srgb, var(--field) 70%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input[dir="ltr"] { text-align: left; letter-spacing: .02em; }
.field input:focus {
  border-color: rgba(var(--fg-rgb), .55);
  background: var(--field);
  box-shadow: 0 0 0 4px rgba(var(--fg-rgb), .08);
}
.field input[aria-invalid="true"] { border-color: var(--bad); }

.pw { position: relative; }
.pw input { padding-right: 46px; }
.reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent;
  color: var(--steel); cursor: pointer; display: grid; place-items: center;
}
.reveal:hover { color: var(--fg); }
.reveal:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.reveal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.reveal.on svg { color: var(--fg); }

.msg { margin: -2px 0 0; min-height: 22px; font-size: 13.5px; color: var(--bad-fg); }
.msg.ok { color: var(--good-fg); }
.hint { margin: -8px 0 0; color: var(--steel); font-size: 12.5px; }
.note { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(var(--fg-rgb), .05); color: var(--steel-2); font-size: 13.5px; }

.primary {
  position: relative; height: 52px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 12px; cursor: pointer;
  font: 600 16px/1 var(--ar); color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bot) 100%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 -2px 0 rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
  overflow: hidden;
}
.primary:hover { filter: brightness(1.06); }
.primary:active { transform: translateY(1px); }
.primary:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.primary[disabled] { cursor: progress; filter: saturate(.7) brightness(.92); }
.primary .lock { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.primary .lock .shackle { transition: transform .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 16.5px 10px; }
.primary.busy .label::after { content: '…'; }
.primary.unlocked .lock .shackle { transform: translateY(-2.5px) rotate(28deg); }

.card-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--steel); font-size: 12.5px;
}
.pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.card.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); opacity: 1; transform: none; }
@keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* exit after sign-in */
.card.leaving { animation: cardOut .45s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes cardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.97); } }
.lang-btn.leaving { opacity: 0; transition: opacity .3s; pointer-events: none; }
body.exiting .veil { opacity: 0; transition: opacity .8s ease; }
.exit-fade { position: fixed; inset: 0; z-index: 50; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .3s ease-in; }
.exit-fade.on { opacity: 1; }

/* phones & tall screens: mark on top, card below */
@media (max-width: 860px), (max-aspect-ratio: 4/5) {
  body { overflow-y: auto; }
  .stage { align-items: flex-end; justify-content: center; padding: 40vh 16px 24px; }
  .veil, [dir="rtl"] .veil { background: linear-gradient(180deg, transparent 0%, transparent 34%, color-mix(in srgb, var(--ink) 70%, transparent) 62%, var(--ink) 100%); }
  .card { padding: 34px 22px 20px; }
  .wordmark { font-size: 46px; }
  body.no-webgl .fallback-mark, [dir="rtl"] body.no-webgl .fallback-mark { top: 21vh; left: 50%; width: 52vw; }
}
@media (max-height: 640px) and (min-width: 861px) { .card { padding-top: 30px; } .card-head { margin-bottom: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; opacity: 1; transform: none; }
  .card.leaving { animation: none; opacity: 0; }
  .pulse { animation: none; }
  #scene { transition: none; }
}