/* ============================================================================
   AURORA // SOLIS v1  —  globals
   Palette committed exactly from the brief (Section A.8). Dark only.
   Pure black is forbidden. Base is --night.
   ============================================================================ */

:root {
  --abyss:        #04060C;
  --night:        #0B1228;
  --horizon:      #1A2240;
  --snow-deep:    #7D90B5;
  --snow:         #C9D5E8;
  --snow-bright:  #E8EEF7;

  --aurora-jade:    #7BFFB0;
  --aurora-mint:    #9DFFD0;
  --aurora-amber:   #FFC580;
  --aurora-violet:  #9C7BFF;
  --aurora-coral:   #FF9D8A;
  --aurora-ice:     #B4ECFF;

  --star-warm:    #FFE6B8;
  --star-cool:    #B8E0FF;
  --star-violet:  #C8B4FF;

  --frost-cream:  #F4EFE3;
  --frost-glow:   #FFE8B8;
  --ember:        #FF5C3C;

  --font-body: "Inter", "Inter Display", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-frost: "Source Serif 4", "Tiempos Text", Georgia, serif;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--snow-bright);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
}

#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* The whole experience is one landscape. DOM layers stack over the canvas. */
#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* children opt back in */
}

/* ---- vertical layout zones (screen coords, 0=top) ----
   token band   :   0 –  4%
   stars/sky    :   0 – 40%
   aurora       :   8 – 40%   (rendered in canvas)
   exhibit band :  38 – 66%
   snow line    :  66 – 73%
   peak band    :  72 –100%
*/

.zone { position: absolute; left: 0; right: 0; }

/* ============================ FOOTER ===================================== */
#footer-label {
  position: fixed;
  left: 28px;
  bottom: 20px;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(201, 213, 232, 0.5);
  text-shadow: 0 1px 4px rgba(4, 6, 12, 0.8);
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

#health-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--aurora-jade);
  box-shadow: 0 0 8px var(--aurora-jade);
  margin-right: 10px;
  vertical-align: middle;
  animation: breathe-dot 4s ease-in-out infinite;
}
@keyframes breathe-dot {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* ============================ TOKEN BAND ================================= */
/* Visible only > 70% daily or > 80% monthly. Otherwise invisible. */
#token-band {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 6;
  background: linear-gradient(90deg,
     rgba(255,197,128,0) 0%,
     rgba(255,197,128,0.55) 50%,
     rgba(255,197,128,0) 100%);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
#token-band.show { opacity: 1; }

/* ============================ FIRST-LOAD VEIL =========================== */
#veil {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #04060C;
  pointer-events: all;
  transition: opacity 1.2s ease;
}
#veil.lifted { opacity: 0; pointer-events: none; }

/* ============================ KEY HINTS ================================== */
#key-hints {
  position: fixed;
  right: 26px;
  bottom: 20px;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(201, 213, 232, 0.42);
  text-shadow: 0 1px 4px rgba(4, 6, 12, 0.8);
  text-align: right;
  user-select: none;
  pointer-events: none;
  line-height: 1.7;
}
#key-hints kbd {
  font-family: var(--font-mono);
  color: rgba(201, 213, 232, 0.5);
}

/* ============================ AMBIENT VITALS ============================= */
/* the old HQ dashboard's heartbeat, folded in as one quiet frost line:
   "up 3d 4h · cpu 2% · 412 mb · 1,204 signals · bot awake". Hides entirely
   when the status server is unreachable — ambient, never alarming. */
#vitals {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(201, 213, 232, 0.48);
  text-shadow: 0 1px 4px rgba(4, 6, 12, 0.8);
  opacity: 0;
  transition: opacity 1.2s ease, color 0.8s ease;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
#vitals.show { opacity: 1; }
#vitals.alert { color: rgba(255, 156, 124, 0.78); }

/* utility */
.hidden { display: none !important; }