/* ============================================================
   THE SECOND ATMOSPHERE — styles.css
   ─────────────────────────────────────────────────────────────
   CANONICAL ARTISTIC DIRECTION: see MASTER_BRIEF.md
   "This is not a website. It is a living artwork."

   Design intent: deep space, cinematic stillness, minimal type.
   Typography is a whisper. Silence is part of the composition.

   Palette:
     --void          #000005              absolute space black
     --star          #ffffff              star / type white
     --atmo          #4fc3f7              physical atmosphere blue
     --dim           rgba(255,255,255,.38) subdued type
     --consciousness #d1daf0              second atmosphere neutral
                                          (cool pearl — no emotional state)

   Phase III colour slots (to be animated by JS emotional data):
     --emotion-primary    current emotional tint (default: pearl)
     --emotion-secondary  accent tint            (default: cool blue)

   Type:
     Display  — Cormorant Garamond 300 / italic  (elegance, geological slowness)
     Utility  — Inter 300                         (precision labels, nearly invisible)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Root variables ---------- */
:root {
  --void:       #000005;
  --star:       #ffffff;
  --dim:        rgba(255, 255, 255, 0.38);
  --atmo:       #4fc3f7;

  /* Second atmosphere neutral — pearl-white, no emotional state.
     Phase III: JS will transition these via CSS custom property animation
     or direct style.setProperty() calls in sync with shader uniforms. */
  --consciousness:      #d1daf0;
  --emotion-primary:    #d1daf0;   /* Phase III: overridden per emotional state */
  --emotion-secondary:  #b3c4e8;   /* Phase III: overridden per emotional state */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;
}

/* ---------- Base ---------- */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;              /* canvas fills everything */
  background: var(--void);
  color: var(--star);
}

/* ---------- Three.js canvas ---------- */
#globe-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ---------- UI overlay layer ---------- */
/* All text lives here, above the canvas */
.ui-overlay {
  position: fixed;
  z-index: 10;
  pointer-events: none;          /* let mouse events pass to canvas */
}

/* ---------- Title block — top-left ---------- */
header.ui-overlay {
  top: clamp(2rem, 5vw, 4rem);
  left: clamp(2rem, 5vw, 4.5rem);
  max-width: min(560px, 90vw);
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Main title: large, light-weight display serif, letter-spaced */
.title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--star);

  /* Soft luminous edge — evokes the glow on the horizon */
  text-shadow:
    0 0 40px rgba(79, 195, 247, 0.25),
    0 0 80px rgba(79, 195, 247, 0.10);

  /* Fade in on load */
  opacity: 0;
  animation: fadeUp 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* Subtitle: italic display, noticeably smaller, dimmer */
.subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.8rem, 1.6vw, 1.1rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--dim);

  opacity: 0;
  animation: fadeUp 2.4s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

/* ---------- Footer phase label — bottom-left ---------- */
footer.ui-footer {
  bottom: clamp(1.8rem, 4vw, 3rem);
  left: clamp(2rem, 5vw, 4.5rem);
}

.phase-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.6rem, 1vw, 0.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);

  opacity: 0;
  animation: fadeUp 2s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
}

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .title,
  .subtitle,
  .phase-label {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Mobile adjustments ---------- */
/* On portrait phones, push title to bottom-centre for clear planet view */
@media (max-width: 480px) and (orientation: portrait) {
  header.ui-overlay {
    top: auto;
    bottom: clamp(6rem, 18vh, 9rem);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 90vw;
  }

  footer.ui-footer {
    bottom: clamp(1.5rem, 4vw, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

/* ---------- Tablet landscape — no change needed; clamp handles it ---------- */

/* ============================================================
   PHASE III HOOKS (CSS side)
   When emotional data drives the consciousness layer in Phase III,
   the JS layer will call:

     document.documentElement.style.setProperty(
       '--emotion-primary', '#e8a87c'
     );

   Any future UI elements that need to respond to emotional state
   (e.g. a barely-visible status glyph, a breathing indicator)
   should read from --emotion-primary / --emotion-secondary.

   Typography remains white at all times — it does not respond to
   emotional state. Colour lives only in the WebGL layer and any
   future minimal UI indicators.

   See MASTER_BRIEF.md for full colour vocabulary and design laws.
   ============================================================ */


/* ============================================================
   DEBUG OVERLAY — Planetary Signal readout
   Hidden by default. Press H to show/hide.
   Lives above all other UI. Does not affect artwork visuals.
   ============================================================ */

#debug-overlay {
  display:          none; /* hidden by default */
  position:         fixed;
  bottom:           clamp(1.5rem, 3vw, 2.5rem);
  right:            clamp(1.5rem, 3vw, 2.5rem);
  z-index:          100;
  pointer-events:   none;

  /* Panel */
  background:       rgba(0, 0, 8, 0.82);
  border:           1px solid rgba(255, 255, 255, 0.08);
  border-radius:    4px;
  padding:          1rem 1.2rem 0.9rem;
  min-width:        260px;

  /* Typography */
  font-family:      var(--font-ui);
  font-size:        0.68rem;
  font-weight:      300;
  line-height:      1.7;
  letter-spacing:   0.06em;
  color:            rgba(255, 255, 255, 0.55);

  /* Prevent layout interaction */
  user-select:      none;
}

.dbg-title {
  font-size:        0.60rem;
  letter-spacing:   0.22em;
  text-transform:   uppercase;
  color:            rgba(255, 255, 255, 0.30);
  margin-bottom:    0.1rem;
}

.dbg-source {
  font-size:        0.64rem;
  letter-spacing:   0.06em;
  margin-bottom:    0.1rem;
  font-weight:      400;
}

.dbg-updated {
  font-size:        0.58rem;
  color:            rgba(255, 255, 255, 0.22);
  margin-bottom:    0.4rem;
}

.dbg-hint {
  font-size:        0.58rem;
  color:            rgba(255, 255, 255, 0.20);
  margin-bottom:    0.5rem;
}

.dbg-divider {
  border-top:       1px solid rgba(255, 255, 255, 0.06);
  margin:           0.4rem 0;
}

.dbg-row {
  display:          flex;
  align-items:      baseline;
  gap:              0.5rem;
  font-variant-numeric: tabular-nums;
}

.dbg-label {
  width:            5.5rem;
  color:            rgba(255, 255, 255, 0.50);
  text-transform:   lowercase;
}

.dbg-bar {
  font-size:        0.52rem;
  letter-spacing:   0;
  line-height:      1;
  opacity:          0.7;
}

.dbg-val {
  font-size:        0.66rem;
  color:            rgba(255, 255, 255, 0.70);
  width:            3.2rem;
  text-align:       right;
}

.dbg-target {
  font-size:        0.58rem;
  color:            rgba(255, 255, 255, 0.28);
  width:            4rem;
}

.dbg-timer {
  font-size:        0.58rem;
  color:            rgba(255, 255, 255, 0.22);
  text-align:       right;
  margin-top:       0.2rem;
}