/* gr8nrs.css — special graphics login page for NRSG8.
 *
 * Aesthetic: cold blue + warm amber nucleus on near-black. Glass-morphic
 * card. Animated atom in the background (3 ellipse orbits + 3 electrons
 * + amber nucleus). Distinct from the data-dense main landing — this is
 * a portal page, signal over density.
 *
 * WCAG: body text on #0a1828 ≥ 11:1 (#e7eaee); accent links amber/cyan ≥ 6:1.
 */

:root {
  --bg-deep:    #060a12;
  --bg:         #0a1828;
  --panel:      rgba(14, 21, 33, 0.78);
  --panel-edge: rgba(127, 214, 255, 0.18);
  --ink-0:      #e7eaee;
  --ink-1:      #cbd0d8;
  --ink-2:      #8a9098;
  --ink-3:      #5a626e;
  --cyan:       #7fd6ff;
  --cyan-bright:#a8e2ff;
  --amber:      #ffb547;
  --amber-soft: #ffd28a;
  --danger:     #f06c6c;
  --success:    #6ed46a;
  --font-display: "Major Mono Display", monospace;
  --font-body:    "Familjen Grotesk", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, #102540 0%, var(--bg-deep) 70%);
  color: var(--ink-0);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-x: hidden;
}

a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted rgba(255, 181, 71, 0.5); }
a:hover, a:focus { color: var(--amber-soft); }

/* ---------- background atom */

.bg-atom {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90vmin;
  height: 90vmin;
  max-width: 900px;
  max-height: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  filter: blur(0.4px);
}

.bg-atom .orbits > * {
  transform-origin: 0 0;
  animation: orbit-spin 24s linear infinite;
}
.bg-atom .orbits .o1 { transform: rotate(0deg); }
.bg-atom .orbits .o2 { transform: rotate(60deg); animation-duration: 30s; }
.bg-atom .orbits .o3 { transform: rotate(120deg); animation-duration: 38s; }

.bg-atom .electrons > circle {
  filter: drop-shadow(0 0 6px rgba(127,214,255,0.7));
}
.bg-atom .electrons .e1 { animation: orbit-e 24s linear infinite; }
.bg-atom .electrons .e2 { animation: orbit-e 30s linear infinite reverse; transform: rotate(60deg); }
.bg-atom .electrons .e3 { animation: orbit-e 38s linear infinite; transform: rotate(120deg); }

.bg-atom .nucleus {
  animation: pulse 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255,181,71,0.7));
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes orbit-e {
  from { transform: rotate(0deg)   translateX(270px) translateY(0px); }
  to   { transform: rotate(360deg) translateX(270px) translateY(0px); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.18); opacity: 1; }
}

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

.crest {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 28px;
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}

.crest-mark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 50%;
  background: rgba(255,181,71,0.08);
  text-shadow: 0 0 14px rgba(255,181,71,0.6);
}

.crest-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.14em;
  color: var(--ink-0);
  margin: 0;
  text-transform: uppercase;
}

.crest-tag {
  margin: 4px 0 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: lowercase;
}

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

.hero {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 36px 24px 56px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 40px 36px 32px;
  max-width: 620px;
  width: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(127,214,255,0.06),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 80px rgba(31,182,255,0.06);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cyan);
  margin: 0 0 14px 0;
  text-transform: uppercase;
}

.lede {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 18px 0;
  color: var(--ink-0);
}

.sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-1);
  margin: 0 0 30px 0;
}
.sub code {
  background: rgba(127,214,255,0.10);
  color: var(--cyan);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- key + form */

.key-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px 0;
  flex-wrap: wrap;
}

.key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(255,181,71,0.06);
  color: var(--ink-0);
  border: 1px solid var(--amber);
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  /* Blinking glow — pulses every 2.2s to draw the eye to the CTA */
  animation: key-pulse 2.2s ease-in-out infinite;
}
@keyframes key-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255,181,71,0),
      0 0 14px rgba(255,181,71,0.30),
      inset 0 0 6px rgba(255,181,71,0.10);
    background: rgba(255,181,71,0.05);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255,181,71,0.10),
      0 0 30px 4px rgba(255,181,71,0.55),
      inset 0 0 14px rgba(255,181,71,0.22);
    background: rgba(255,181,71,0.18);
  }
}
.key:hover, .key:focus {
  background: rgba(255,181,71,0.22);
  outline: none;
}
.key:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .key { animation: none; }
}

.key-svg {
  width: 64px;
  height: 28px;
  overflow: visible;
}
.key-svg .kb  { fill: none; stroke: var(--amber); stroke-width: 2.2; }
.key-svg .kbi { fill: var(--bg); }
.key-svg .ksh,
.key-svg .kbt1,
.key-svg .kbt2 { fill: var(--amber); transition: transform 0.28s cubic-bezier(0.4,0.1,0.2,1); transform-origin: 24px 16px; }

.key-wrap[data-state="open"] .key {
  animation: none;
  background: rgba(255,181,71,0.24);
  box-shadow: 0 0 18px rgba(255,181,71,0.40);
}
.key-wrap[data-state="open"] .key-svg .ksh,
.key-wrap[data-state="open"] .key-svg .kbt1,
.key-wrap[data-state="open"] .key-svg .kbt2 { transform: translateX(8px); }

.keyform {
  display: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  flex: 1 1 480px;
  min-width: 280px;
  margin: 0;
}
.key-wrap[data-state="open"] .keyform { display: block; opacity: 1; transform: translateX(0); }

.row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  background: rgba(6,10,18,0.65);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
}
.row input[type="text"] {
  flex: 1 1 0;
  min-width: 60px;
  background: transparent;
  border: none;
  color: var(--ink-0);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 8px;
  outline: none;
}
.row input::placeholder { color: var(--ink-3); font-style: italic; }
.row input:focus { background: rgba(127,214,255,0.05); }
.row input#ea { flex-basis: 30%; }
.row input#eb { flex-basis: 30%; }
.row input#ec { flex-basis: 12%; }

.sep {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  padding: 0 2px;
  user-select: none;
}

.btn-go {
  background: var(--amber);
  color: #1a1a1a;
  border: 1px solid var(--amber);
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
}
.btn-go:hover, .btn-go:focus { background: var(--amber-soft); outline: none; }
.btn-go:disabled { background: var(--ink-3); border-color: var(--ink-3); color: var(--bg); cursor: not-allowed; }

.hint {
  margin: 10px 2px 0 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.hint[data-tone="ok"]  { color: var(--success); }
.hint[data-tone="bad"] { color: var(--danger); }

.fineprint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  margin: 18px 0 0 0;
  border-top: 1px solid var(--panel-edge);
  padding-top: 16px;
}

/* ---------- footer */

.foot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  padding: 16px 28px 28px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.foot a { color: var(--cyan); border-bottom-color: rgba(127,214,255,0.4); }

@media (max-width: 720px) {
  .lede { font-size: 22px; }
  .card { padding: 28px 22px 24px; }
  .row  { flex-wrap: wrap; }
  .btn-go { margin-left: 0; width: 100%; margin-top: 4px; }
  .foot { flex-direction: column; gap: 6px; }
}