/* login.css — the gate.
   Shares styles.css's token vocabulary (surfaces, hairlines, violet accent,
   Instrument Serif display face) so the login screen and the dome hero behind
   it read as the same product. Tokens are redeclared rather than imported:
   styles.css is auth-gated and must not be pulled in here. */

:root {
  --surface-glass: rgba(18, 20, 29, 0.62);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-accent: rgba(139, 124, 246, 0.32);

  --text-primary: #eceef5;
  --text-secondary: #9aa0b4;
  --text-muted: #626879;

  --violet: #8b7cf6;
  --violet-glow: rgba(139, 124, 246, 0.40);
  --bearish-bright: #ff5c72;

  --radius-md: 14px;
  --radius-lg: 20px;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-hero: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #030304;
  color: var(--text-primary);
  font-family: var(--font-body);
  isolation: isolate;
}

/* ---- backdrop: the dome render, framed exactly as the hero frames it ---- */

.login-video,
.login-poster {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: -3;
}

.login-poster {
  background: #030304 center 58% / cover no-repeat;
  display: none;
}

/* Framing mask so the 1:1 render never shows hard edges on wide screens, and
   the card always lands on a dark enough field to stay legible. */
.login-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 68% at 50% 52%, rgba(3,3,4,0.30) 0%, rgba(3,3,4,0.72) 62%, rgba(3,3,4,0.94) 100%),
    linear-gradient(180deg, rgba(3,3,4,0.60) 0%, transparent 26%, transparent 58%, rgba(3,3,4,0.90) 100%);
}

/* ---- card ---- */

.login-container {
  width: 100%;
  max-width: 424px;
  padding: 24px;
  animation: cardRise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-box {
  position: relative;
  padding: 44px 40px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* hairline of violet along the top edge — the accent the dashboard uses */
.login-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-accent), transparent);
}

/* ---- masthead ---- */

.logo {
  text-align: center;
  margin-bottom: 34px;
}

.logo-mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #cdbcff 0%, var(--violet) 46%, #4c3fb0 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 6px 26px var(--violet-glow);
}

.logo-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;          /* one line or nothing — a wrapped kicker reads as a bug */
  color: var(--text-muted);
  margin-bottom: 10px;
}

.logo-title {
  font-family: var(--font-hero);
  font-size: 2.05rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* ---- fields ---- */

.input-group { margin-bottom: 20px; }

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.input-group input {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(3, 4, 8, 0.55);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.input-group input:hover { border-color: var(--line-strong); }

.input-group input:focus {
  outline: none;
  border-color: var(--line-accent);
  background: rgba(3, 4, 8, 0.72);
  box-shadow: 0 0 0 3px rgba(139, 124, 246, 0.14);
}

/* Chrome paints its own autofill background; repaint it to match the field. */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px #0b0c12 inset;
  caret-color: var(--text-primary);
}

/* ---- button ---- */

.login-btn {
  position: relative;
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #8b7cf6 0%, #6d5cd8 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 10px 26px var(--violet-glow);
}

.login-btn:active:not(:disabled) { transform: translateY(0); }

.login-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 124, 246, 0.34);
}

.login-btn:disabled {
  cursor: progress;
  filter: saturate(0.55) brightness(0.85);
}

/* sheen that sweeps only while a request is in flight */
.login-btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: sheen 1.15s linear infinite;
}

/* ---- error ---- */

.error-message {
  min-height: 18px;
  margin: -6px 0 8px;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: center;
  color: var(--bearish-bright);
}

.login-box.is-shaking { animation: shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* ---- motion ---- */

@keyframes cardRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sheen {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ---- narrow screens: drop the video, keep the poster ---- */

@media (max-width: 640px) {
  .login-video { display: none; }
  .login-poster { display: block; }
  .login-box { padding: 36px 26px 32px; }
  .logo-title { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .login-video { display: none; }
  .login-poster { display: block; }
  .login-container { animation: none; }
  .login-btn.is-busy::after { animation: none; }
  .login-box.is-shaking { animation: none; }
}