/* =========================================================
   Scene 6 — Large Language Model
   ---------------------------------------------------------
   Los elementos visuales (#s5LLM, #s5Brain, etc.) viven en
   el DOM de .scene--5 y son compartidos entre ambas escenas.
   Scene 6 los mantiene visibles via JS (ensureS5Visible).
   ========================================================= */

/* ── LLM → Large Language Model ──────────────────────── */
#s5LLM {
  position: absolute;
  left: 0; top: 0;
  width: 1920px; height: 1080px;
  pointer-events: none;
  z-index: 25;
}

.s5-llm-word {
  position: absolute;
  display: flex;
  align-items: baseline;
  opacity: 0;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* Posiciones naturales (spread) — JS anima DESDE el centro HASTA aquí */
#s5LLMWord1 { left: 90px;   top: 465px; }
#s5LLMWord2 { left: 630px;  top: 465px; }
#s5LLMWord3 { left: 1410px; top: 465px; }

.s5-llm-init {
  font-family: 'Inter', sans-serif;
  font-size: 110px;
  font-weight: 900;
  color: #1a1410;
  line-height: 1;
  letter-spacing: -2px;
}

.s5-llm-rest {
  font-family: 'Inter', sans-serif;
  font-size: 110px;
  font-weight: 400;
  color: #1a1410;
  line-height: 1;
  letter-spacing: 0;
}

/* ── Fila inferior: clone → scramble → rearrange ───────── */
#s5LLMBottom {
  position: absolute;
  left: 0;
  width: 1920px;
  top: 575px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 30px;
  opacity: 0;
  pointer-events: none;
  z-index: 26;
  will-change: transform, opacity;
}

/* Contenedor de una palabra (relleno con .s5-bot-charspan por JS) */
.s5-bot-wordwrap {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cada caracter individual */
.s5-bot-charspan {
  font-family: 'Inter', sans-serif;
  font-size: 110px;
  line-height: 1;
  color: #1a1410;
  letter-spacing: 0;
}