/* =============================================================================
   EMOTIONAL PULSE — Stylesheet
   Layout: strict two-container column. visual_container on top, legend_container
   below. Neither container shares rendering space with the other.
   ============================================================================= */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020206;
  cursor: none;

  /* Flex column: visual_container grows to fill all space above the legend */
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------------
   VISUALIZATION CONTAINER
   Contains the galaxy, survey wheel, starfield, and all animations.
   overflow: hidden enforces the boundary at the browser layout level —
   nothing drawn inside can escape this box.
   --------------------------------------------------------------------------- */
#visual_container {
  flex: 1 1 auto;   /* grows to fill all space not taken by legend_container */
  overflow: hidden; /* hard boundary — no canvas content can escape */
  position: relative;
  background: #020206; /* ✏️ visualization background color */
}

/* Canvas fills the visual container exactly */
#visual_container #main-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   LEGEND CONTAINER
   Completely separate layer below the visualization.
   Has its own opaque background — nothing from visual_container appears here.
   --------------------------------------------------------------------------- */
#legend_container {
  flex: 0 0 100px;  /* fixed height — ✏️ change 100px to resize the legend strip */
  overflow: hidden; /* hard boundary */
  background: #020206; /* ✏️ legend background color — opaque, no bleed-through */
}

/* Canvas fills the legend container exactly */
#legend_container #legend-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   LOADING SCREEN
   Shown while the camera initialises. Sits above both containers (z-index).
   --------------------------------------------------------------------------- */
#status-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050508; /* ✏️ loading screen background color */
  z-index: 100;
  transition: opacity 1.2s ease;
}

#status-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ✏️ LOADING TEXT STYLE */
#status-text {
  font-family: "Orbitron", sans-serif; /* ✏️ font */
  font-size: 1.2rem;                   /* ✏️ size */
  font-weight: 400;
  letter-spacing: 0.2em;              /* ✏️ letter spacing */
  color: rgba(255, 255, 255, 0.5);    /* ✏️ color */
  text-transform: uppercase;
  animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}