:root {
  --bg: #08090c;
  --bg-2: #0d0f14;
  --ink: #d9dbe0;
  --mute: rgba(217, 219, 224, 0.68);
  --faint: rgba(217, 219, 224, 0.55);
  --gold: #c9a86a;
  --line: rgba(201, 168, 106, 0.22);
}

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

html, body {
  height: 100%;
  background: radial-gradient(130% 110% at 70% 30%, var(--bg-2), var(--bg));
  color: var(--ink);
  font-family: "Spectral", serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.field { position: fixed; inset: 0; }

/* parallax starfields built from layered radial gradients */
.stars {
  position: absolute; inset: -20%;
  background-repeat: repeat;
}
.s-far {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,0.3), transparent);
  background-size: 340px 340px;
  animation: drift-a 90s linear infinite;
}
.s-near {
  background-image:
    radial-gradient(1.6px 1.6px at 55% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.6px 1.6px at 25% 65%, rgba(201,168,106,0.6), transparent),
    radial-gradient(1.6px 1.6px at 80% 80%, rgba(255,255,255,0.6), transparent);
  background-size: 520px 520px;
  animation: drift-b 60s linear infinite;
}
@keyframes drift-a { to { background-position: 340px 0; } }
@keyframes drift-b { to { background-position: -520px 260px; } }

.net {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.9;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 90%);
}
.net .links line { stroke: var(--line); stroke-width: 0.8; }
.net .nodes circle { fill: var(--gold); opacity: 0.55; }
.net .nodes .hub {
  fill: var(--gold);
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(201,168,106,0.8));
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ r: 4.5; opacity:1 } 50%{ r: 6.5; opacity:0.7 } }

.plate {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.coords, .strip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
/* 3 columns so the middle label is always dead-centre, regardless of
   the differing widths of the LIVE indicator and the copyright */
.strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.strip .scan { justify-self: start; }
.strip .dim { justify-self: center; text-align: center; }
.strip .copy { justify-self: end; }
.coords .sep { color: var(--gold); }
.coords-tail { display: inline-flex; align-items: center; gap: 0.7rem; }
.copy { text-transform: none; }

.enter {
  flex-shrink: 0;
  display: inline-block;
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(201, 168, 106, 0.78);
  padding: 0.15rem 0 0.4rem;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.5s ease;
}
/* hairline that draws across on hover — quiet, classical */
.enter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.enter:hover,
.enter:focus-visible {
  color: #ecd3a3;
  outline: none;
}
.enter:hover::after,
.enter:focus-visible::after { transform: scaleX(1); }
.dim { color: var(--faint); }

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  animation: emerge 2s ease both;
}
@keyframes emerge { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }

.kicker {
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}
.name {
  font-weight: 300;
  font-size: clamp(4rem, 19vw, 13rem);
  line-height: 0.86;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(0,0,0,0.6);
}
.line {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2.8vw, 1.55rem);
  letter-spacing: 0.05em;
  color: var(--mute);
}

.scan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
}
/* pending: dot pulses on its own, label hidden (space reserved) */
.scan-text { visibility: hidden; }
/* confirmed live (200): reveal the label */
.scan.is-live .scan-text { visibility: visible; }
/* failed / unreachable: hide the dot too, box stays reserved so the
   footer layout never shifts */
.scan.is-down i { visibility: hidden; }
.scan i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: blip 1.8s ease-in-out infinite;
}
@keyframes blip { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:0.25; transform:scale(0.6)} }

/* ── access gate ─────────────────────────────────────────────── */
/* login-only: no top bar, so centre fills the freed space */
.gate-page .plate { grid-template-rows: 1fr auto; }
/* login-only: quiet the constellation so it never competes with the input */
.gate-page .field { opacity: 0.45; }

.gate-mark {
  font-size: clamp(2.4rem, 9vw, 4rem);
  margin-bottom: 0.2rem;
}

.access {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
  margin-top: 0.6rem;
}

.code-label {
  font-family: "Space Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--mute);
}

.codewrap {
  position: relative;
  width: min(380px, 78vw);
  border-bottom: 1px solid var(--line);
}
.code {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 1.05rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding: 0.55rem 0 0.7rem;
  caret-color: var(--gold);
}
.code::placeholder { color: var(--faint); }
/* gold hairline that draws in on focus — same gesture as the button */
.codeline {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.codewrap:focus-within .codeline { transform: scaleX(1); }

.gate-status {
  min-height: 1.2em; /* reserve the line so nothing shifts */
  font-family: "Space Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.4s ease;
}
.gate-status.is-error { color: #cf6b61; }

@media (max-width: 560px) {
  /* coordinates: wrap "/ VI · I" onto its own line beneath */
  .coords { flex-wrap: wrap; }
  .coords-tail { flex-basis: 100%; }

  /* footer: ABSOLUTE RETURN centered on its own line above LIVE / © 2026 */
  .strip { grid-template-columns: 1fr 1fr; }
  .strip .dim {
    order: -1;
    grid-column: 1 / -1;
    margin-bottom: 0.9rem;
  }
}