/* styles/voices.css
   The three voices: Narrator (top, pale violet, italic serif),
   System (bottom, packet-blue tint, serif), and Inner Voices in
   the margins (Schema — right/mono; Pulse — left/gold serif).
   Mixing them is a violation per 02_design_philosophy.md. */

/* ---------- CELESTIAL NARRATOR ---------- */
#narration {
  position: absolute;
  left: 50%; top: 14%;
  transform: translateX(-50%);
  width: min(720px, 86vw);
  text-align: center;
  z-index: 25;
  pointer-events: none;
}
.nar-line {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.7;
  font-style: italic;
  color: rgba(232, 216, 255, 0.88);
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(232, 216, 255, 0.15);
  letter-spacing: 0.015em;
  opacity: 0;
  transition: opacity 1800ms ease;
  margin-bottom: 0.5em;
}
.nar-line.visible { opacity: 1; }
.nar-line.dim     { opacity: 0.2; transition: opacity 2000ms ease; }
.nar-line strong {
  font-weight: normal;
  color: var(--celestial);
  font-style: italic;
}

/* ---------- SYSTEM VOICE ---------- */
#system-prose {
  position: absolute;
  left: 50%; bottom: 22%;
  transform: translateX(-50%);
  width: min(680px, 84vw);
  text-align: center;
  z-index: 20;
  pointer-events: none;
}
.sys-line {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.65;
  color: rgba(220, 235, 255, 0.9);
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 1400ms ease;
  margin-bottom: 0.4em;
}
.sys-line.visible { opacity: 1; }
.sys-line.dim     { opacity: 0.25; transition: opacity 1600ms ease; }
.sys-line em {
  color: var(--packet-glow);
  font-style: italic;
}

/* ---------- INNER VOICES — margins ----------
   Schema is born in the Foundry (Biome 2). Pulse is the Intent's
   own heart, present from the café onward.
   Shadow + Toll are deferred until biomes 4/5. */

.schema-margin, .pulse-margin, .toll-margin, .shadow-margin {
  position: absolute;
  width: min(280px, 24vw);
  z-index: 22;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.schema-margin { right: 4vw; top:    32%; align-items: flex-end;   }
.pulse-margin  { left:  4vw; top:    32%; align-items: flex-start; }
.toll-margin   { right: 4vw; bottom: 28%; align-items: flex-end;   }
.shadow-margin { left:  4vw; bottom: 28%; align-items: flex-start; }

.schema-line {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.06em;
  text-align: right;
  /* Layered shadow: a soft brand-blue glow (atmospheric) PLUS a dark
     near-stroke (legibility on busy biome backgrounds like Customs
     where the right-margin overlaps high-contrast intent cards). The
     dark stroke is the readability backstop; the blue glow is the
     voice's signature. Pattern recommended by the game-ui-design
     "no-text-outline-or-shadow" sharp edge. */
  text-shadow:
    0 0 12px rgba(184, 224, 255, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 1400ms ease;
}
.schema-line.visible { opacity: 1; }
.schema-line.dim     { opacity: 0.25; transition: opacity 1800ms ease; }

.pulse-line {
  font-family: var(--serif);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(248, 232, 192, 0.85);
  font-style: italic;
  text-align: left;
  text-shadow: 0 0 14px rgba(248, 232, 192, 0.22);
  opacity: 0;
  transition: opacity 1400ms ease;
}
.pulse-line.visible { opacity: 1; }
.pulse-line.dim     { opacity: 0.22; transition: opacity 1800ms ease; }

/* The Toll — born in Plain of Tolls. Mono (system-aware register) but
   warm red-orange (resentful). Slightly larger than the other inner
   voices because the Toll has weight — older than everything else. */
.toll-line {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(232, 144, 80, 0.85);
  letter-spacing: 0.04em;
  text-align: right;
  text-shadow: 0 0 14px rgba(232, 96, 48, 0.22);
  opacity: 0;
  transition: opacity 1400ms ease;
}
.toll-line em      { color: rgba(255, 168, 100, 0.96); font-style: italic; }
.toll-line.visible { opacity: 1; }
.toll-line.dim     { opacity: 0.25; transition: opacity 1800ms ease; }

/* The Shadow — accumulates from the Ledger across runs. Born when
   trust ≥ 18. Quiet, slow, knows things. Smaller than other voices.
   Alpha 0.82 keeps WCAG AA on the brown Court bg (~5.3:1 contrast). */
.shadow-line {
  font-family: var(--serif);
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(208, 208, 218, 0.82);
  letter-spacing: 0.02em;
  text-align: left;
  text-shadow: 0 0 12px rgba(160, 160, 180, 0.18);
  opacity: 0;
  transition: opacity 1800ms ease;
}
.shadow-line em      { color: rgba(220, 220, 230, 0.9); font-style: italic; }
.shadow-line.visible { opacity: 1; }
.shadow-line.dim     { opacity: 0.2; transition: opacity 2200ms ease; }

@media (prefers-reduced-motion: reduce) {
  .nar-line, .sys-line, .schema-line, .pulse-line, .toll-line, .shadow-line {
    transition-duration: 300ms !important;
  }
}

/* ---------- VOICE-STYLED TOOLTIPS ----------
   Hover-bound, voice-styled glossary explanations. Each voice's
   tooltip carries that voice's typographic identity, so jargon
   becomes a character's utterance instead of a help-layer popup. */

.voice-tooltip {
  position: fixed;
  z-index: 80;
  padding: 10px 16px;
  border-radius: 3px;
  max-width: 340px;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}
.voice-tooltip.visible { opacity: 1; }

.voice-tooltip.voice-schema {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(20, 24, 32, 0.96);
  border: 1px solid rgba(220, 232, 248, 0.55);
}
.voice-tooltip.voice-schema em {
  color: rgba(184, 224, 255, 0.95);
  font-style: italic;
}

.voice-tooltip.voice-toll {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 200, 160, 0.95);
  background: rgba(40, 16, 8, 0.96);
  border: 1px solid rgba(232, 144, 80, 0.7);
}
.voice-tooltip.voice-toll em {
  color: rgba(255, 168, 100, 1);
  font-style: italic;
}

.voice-tooltip.voice-pulse {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(248, 232, 192, 0.96);
  background: rgba(40, 30, 16, 0.96);
  border: 1px solid rgba(248, 232, 192, 0.5);
}

.voice-tooltip.voice-narrator {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(232, 216, 255, 0.94);
  background: rgba(24, 16, 36, 0.96);
  border: 1px solid rgba(232, 216, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .voice-tooltip { transition-duration: 80ms; }
}

/* ---------- CHAPTER CARD ----------
   Cinematic slate that appears once on cycle-stop arrival. Names the
   stop in mono (curriculum register) and the biome in serif italic
   (poetic register). Held briefly, then dissolves before orientation
   prose begins. NOT a persistent HUD — see project-safe-zones-pattern. */

.chapter-card {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 80vw);
  text-align: center;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.chapter-card.visible { opacity: 1; }

.chapter-stop {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--chapter-accent, rgba(232, 216, 255, 0.7));
  margin-bottom: 1.4em;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}

.chapter-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: rgba(248, 232, 192, 0.92);
  text-shadow:
    0 4px 40px rgba(0, 0, 0, 0.85),
    0 0 60px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .chapter-card { transition-duration: 200ms; }
}