/* Static login page. Tokens mirror apps/web/src/theme.ts — keep them in sync. */
:root {
  --space: #02040a;
  --fog: #050b18;
  --holo: #3fe0ff;
  --holo-dim: #0e3a5c;
  --bgp: #a875ff;
  --ok: #00ffc6;
  --crit: #ff2d55;
  --warn: #ffb020;
  --text: #d8f6ff;
  --muted: rgba(216, 246, 255, 0.55);
  --label: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --chamfer: 18px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 50% 55%, rgba(14, 58, 92, 0.35), transparent 70%),
    radial-gradient(900px 600px at 80% 10%, rgba(168, 117, 255, 0.08), transparent 70%),
    var(--space);
  color: var(--text);
  font-family: var(--label);
  -webkit-font-smoothing: antialiased;
}

#space { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.scanlines {
  position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.stage {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

/* ---------- panel ---------- */

.panel {
  position: relative;
  width: min(420px, 100%);
  padding: 34px 34px 22px;
  background: linear-gradient(160deg, rgba(10, 34, 58, 0.55), rgba(4, 12, 24, 0.62));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(63, 224, 255, 0.22);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  box-shadow: inset 0 0 40px rgba(63, 224, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: materialize 900ms cubic-bezier(.2, .8, .2, 1) both;
}

.panel::before { /* sweeping light on the frame edge */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(63, 224, 255, 0.10) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: sheen 7s ease-in-out 1.2s infinite;
}

.corner {
  position: absolute; width: 22px; height: 22px; pointer-events: none;
  border-color: var(--holo); border-style: solid; border-width: 0;
  filter: drop-shadow(0 0 6px rgba(63, 224, 255, 0.8));
  animation: lock 700ms cubic-bezier(.2, .9, .3, 1.2) 250ms both;
}
.corner.tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; --dx: -14px; --dy: -14px; }
.corner.tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; --dx: 14px; --dy: -14px; }
.corner.bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; --dx: -14px; --dy: 14px; }
.corner.br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; --dx: 14px; --dy: 14px; }

/* ---------- header ---------- */

.head { text-align: center; margin-bottom: 26px; }

.sigil { width: 46px; height: 46px; fill: none; stroke: var(--holo); stroke-width: 2.2; filter: drop-shadow(0 0 8px rgba(63, 224, 255, 0.7)); }
.sigil .core { fill: var(--bgp); stroke: none; filter: drop-shadow(0 0 6px var(--bgp)); animation: breathe 4s ease-in-out infinite; transform-origin: 32px 32px; }

.wordmark {
  margin: 10px 0 2px;
  padding-left: 0.42em; /* balance the trailing letter-spacing */
  font-size: clamp(44px, 11vw, 62px);
  font-weight: 700;
  letter-spacing: 0.42em;
  line-height: 1;
  color: #effcff;
  text-shadow: 0 0 12px rgba(63, 224, 255, 0.75), 0 0 34px rgba(63, 224, 255, 0.35);
}

.tagline {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.field { position: relative; margin: 0 0 20px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(63, 224, 255, 0.75);
}

.field input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(63, 224, 255, 0.28);
  border-radius: 0;
  background: linear-gradient(to bottom, transparent, rgba(63, 224, 255, 0.06));
  color: #f2fdff;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  outline: none;
  caret-color: var(--holo);
  transition: background 200ms;
}
.field input:focus { background: linear-gradient(to bottom, transparent, rgba(63, 224, 255, 0.12)); }
.field input:-webkit-autofill { -webkit-text-fill-color: #f2fdff; -webkit-box-shadow: 0 0 0 40px #071a2c inset; transition: background-color 9999s; }

.trace {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--holo), var(--bgp));
  box-shadow: 0 0 10px rgba(63, 224, 255, 0.8);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}
.field input:focus ~ .trace { transform: scaleX(1); }
.field:has(.caps:not([hidden])) .trace { bottom: 22px; }

.reveal {
  position: absolute; right: 4px; top: 27px; width: 34px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: rgba(63, 224, 255, 0.55);
}
.reveal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.reveal:hover, .reveal[aria-pressed="true"] { color: var(--holo); }
.reveal:focus-visible { outline: 1px solid var(--holo); outline-offset: -2px; }

.caps { margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warn); }

/* ---------- status + button ---------- */

.status {
  min-height: 18px;
  margin: 4px 0 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.status[data-tone="busy"] { color: var(--holo); }
.status[data-tone="ok"] { color: var(--ok); text-shadow: 0 0 10px rgba(0, 255, 198, 0.6); }
.status[data-tone="error"] { color: var(--crit); }
.status[data-tone="warn"] { color: var(--warn); }

.engage {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
  border: 1px solid rgba(63, 224, 255, 0.45);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: linear-gradient(90deg, rgba(63, 224, 255, 0.16), rgba(168, 117, 255, 0.18));
  color: #effcff;
  font-family: var(--label);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms, box-shadow 200ms, transform 80ms;
}
.engage .label { position: relative; padding-left: 0.38em; }
.engage::before { /* hover sweep */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
}
.engage:hover { background: linear-gradient(90deg, rgba(63, 224, 255, 0.26), rgba(168, 117, 255, 0.28)); box-shadow: 0 0 24px rgba(63, 224, 255, 0.25); }
.engage:hover::before { transform: translateX(120%); transition: transform 700ms ease; }
.engage:active { transform: scale(0.99); }
.engage:focus-visible { outline: 1px solid var(--holo); outline-offset: 3px; }
.engage:disabled { cursor: progress; }

.engage .progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--holo), transparent);
  opacity: 0;
}
.panel[data-state="busy"] .engage .progress { opacity: 1; animation: scan 1.1s linear infinite; }

.meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(216, 246, 255, 0.42);
}
.beacon {
  display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px;
  border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: blink 2s ease-in-out infinite;
}

/* ---------- states ---------- */

.panel[data-state="denied"] { animation: deny 520ms ease both; }
.panel[data-state="denied"] .corner { border-color: var(--crit); filter: drop-shadow(0 0 6px rgba(255, 45, 85, 0.9)); }
.panel[data-state="locked"] .corner { border-color: var(--warn); filter: drop-shadow(0 0 6px rgba(255, 176, 32, 0.8)); }
.panel[data-state="granted"] { border-color: rgba(0, 255, 198, 0.6); animation: grant 900ms cubic-bezier(.6, 0, .4, 1) 350ms forwards; }
.panel[data-state="granted"] .corner { border-color: var(--ok); filter: drop-shadow(0 0 8px var(--ok)); }

.noscript { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; font-family: var(--mono); color: var(--warn); }

@keyframes materialize {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes lock {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  to { opacity: 1; transform: none; }
}
@keyframes sheen { 0%, 60% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes deny {
  0% { transform: translateX(0); box-shadow: inset 0 0 60px rgba(255, 45, 85, 0.35); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); box-shadow: inset 0 0 40px rgba(63, 224, 255, 0.06); }
}
@keyframes grant {
  0% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: scale(1.06); filter: blur(8px) brightness(1.6); }
}

@media (max-width: 420px) {
  .panel { padding: 28px 20px 18px; }
  .meta { flex-direction: column; align-items: center; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .panel[data-state="granted"] { opacity: 0.6; }
}