/* Comic Text Overlay System
 * Dialogue and narration rendered as HTML on top of comic images.
 * This means the dyslexia font toggle works on actual comic text.
 */

.text-box {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.4em;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Speech bubble — white bg, dark text, rounded */
.text-box.speech {
  background: #fff;
  color: #111;
  border-radius: 12px;
  border: 2px solid #111;
  font-size: 0.85rem;
  font-weight: normal;
}

/* Thought bubble — lighter, dotted border */
.text-box.thought {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 16px;
  border: 2px dotted #888;
  font-size: 0.8rem;
  font-style: italic;
}

/* Narration — dark box at top or bottom */
.text-box.narration {
  background: rgba(0, 0, 0, 0.85);
  color: #d4d4d4;
  border-radius: 2px;
  font-size: 0.8rem;
}

/* Yell/scream — bold, larger */
.text-box.yell {
  background: #fff;
  color: #111;
  border-radius: 8px;
  border: 3px solid #111;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* Whisper — small, faded */
.text-box.whisper {
  background: rgba(255, 255, 255, 0.7);
  color: #555;
  border-radius: 12px;
  border: 1px solid #aaa;
  font-size: 0.7rem;
  font-style: italic;
}

/* SFX — no background, bold stylized text */
.text-box.sfx {
  background: none;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
}

/* Bold within text boxes */
.text-box strong {
  font-weight: bold;
}

/* Italic within text boxes */
.text-box em {
  font-style: italic;
}

/* Dyslexia font override for text boxes */
body.dyslexia-font .text-box {
  font-family: 'OpenDyslexic', sans-serif !important;
}

/* === TEXT ANIMATIONS === */

/* Shake — fear, panic, trembling */
.text-box.shake {
  animation: shake 0.4s infinite;
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -2px); }
  75% { transform: translate(-1px, 2px); }
}

/* Glitch — AI, digital corruption, Thrill */
.text-box.glitch {
  animation: glitch 3s infinite;
  position: relative;
}
@keyframes glitch {
  0%, 90%, 100% { transform: none; opacity: 1; text-shadow: none; }
  91% { transform: translate(-3px, 0); text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
  92% { transform: translate(3px, 1px); text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
  93% { transform: translate(0, -1px); text-shadow: 1px 0 #ff0000, -1px 0 #00ffff; opacity: 0.8; }
  94% { transform: translate(-2px, 0); text-shadow: none; }
  95% { transform: translate(1px, 2px); text-shadow: -3px 0 #ff0000, 3px 0 #00ffff; opacity: 0.9; }
  96% { transform: none; text-shadow: none; }
}

/* Pulse — heartbeat, intensity, Sable */
.text-box.pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.04); }
  30% { transform: scale(1); }
  45% { transform: scale(1.02); }
  60% { transform: scale(1); }
}

/* Flicker — unstable, breaking, facility failing */
.text-box.flicker {
  animation: flicker 4s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  32% { opacity: 1; }
  33% { opacity: 0.3; }
  34% { opacity: 1; }
  60% { opacity: 1; }
  61% { opacity: 0.1; }
  62% { opacity: 0.7; }
  63% { opacity: 1; }
  78% { opacity: 1; }
  79% { opacity: 0.4; }
  80% { opacity: 1; }
}

/* Drip — horror, melting, dissolving */
.text-box.drip {
  animation: drip 6s ease-in infinite;
}
@keyframes drip {
  0%, 70% { transform: none; filter: none; }
  85% { transform: scaleY(1.05) translateY(2px); filter: blur(0.3px); }
  100% { transform: scaleY(1.1) translateY(4px); filter: blur(0.8px); opacity: 0.7; }
}

/* Typewriter — clinical, facility logs, IREM */
.text-box.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation: typewriter 3s steps(30) forwards, blink-cursor 0.7s step-end infinite;
  width: 0 !important;
  max-width: fit-content;
}
@keyframes typewriter {
  0% { width: 0; }
  100% { width: 100%; }
}
@keyframes blink-cursor {
  0%, 100% { border-right-color: currentColor; }
  50% { border-right-color: transparent; }
}

/* Breathe — slow, alive, quiet moments */
.text-box.breathe {
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.01); }
}

/* Static — rapid jitter, TV noise, interference */
.text-box.static {
  animation: static 0.15s infinite;
}
@keyframes static {
  0% { opacity: 1; transform: translate(0, 0); }
  25% { opacity: 0.7; transform: translate(1px, -1px); }
  50% { opacity: 0.9; transform: translate(-1px, 0); }
  75% { opacity: 0.6; transform: translate(0, 1px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

/* Burn — color shifts to red, anger, heat */
.text-box.burn {
  animation: burn 3s ease-in-out infinite alternate;
}
@keyframes burn {
  0% { color: inherit; text-shadow: none; }
  50% { color: #cc4444; text-shadow: 0 0 4px rgba(139, 0, 0, 0.4); }
  100% { color: #ff2200; text-shadow: 0 0 8px rgba(139, 0, 0, 0.7), 0 0 16px rgba(139, 0, 0, 0.3); }
}

/* Corrupt — skewing, unreliable narrator, wrong */
.text-box.corrupt {
  animation: corrupt 5s ease-in-out infinite;
}
@keyframes corrupt {
  0%, 100% { transform: skew(0deg, 0deg); }
  20% { transform: skew(-2deg, 0deg); }
  40% { transform: skew(1deg, 0.5deg); }
  60% { transform: skew(0deg, -0.5deg); }
  80% { transform: skew(2deg, 0deg); }
}

/* Emerge — fades in from nothing, slow reveal */
.text-box.emerge {
  animation: emerge 4s ease forwards;
}
@keyframes emerge {
  0% { opacity: 0; filter: blur(4px); transform: translateY(4px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Drown — blur increases, losing consciousness */
.text-box.drown {
  animation: drown 6s ease-in infinite alternate;
}
@keyframes drown {
  0% { filter: blur(0); opacity: 1; transform: translateY(0); }
  100% { filter: blur(3px); opacity: 0.4; transform: translateY(6px); }
}

/* Fracture — letters spread apart, dissociation */
.text-box.fracture {
  animation: fracture 5s ease-in-out infinite alternate;
}
@keyframes fracture {
  0% { letter-spacing: normal; opacity: 1; }
  100% { letter-spacing: 0.4em; opacity: 0.6; }
}

/* Echo — pulsing shadow, reverb, memory */
.text-box.echo {
  animation: echo 3s ease-in-out infinite;
}
@keyframes echo {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 8px currentColor, 0 0 16px currentColor, 0 0 24px currentColor; }
}

/* === REDUCED MOTION — epilepsy/vestibular safety === */

/* Automatic: respects OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  .text-box.shake,
  .text-box.glitch,
  .text-box.pulse,
  .text-box.flicker,
  .text-box.drip,
  .text-box.typewriter,
  .text-box.breathe,
  .text-box.static,
  .text-box.burn,
  .text-box.corrupt,
  .text-box.emerge,
  .text-box.drown,
  .text-box.fracture,
  .text-box.echo {
    animation: none !important;
  }
  /* Typewriter: show full text immediately */
  .text-box.typewriter {
    width: auto !important;
    border-right: none;
  }
  /* Breathe: full opacity */
  .text-box.breathe { opacity: 1; }
  /* Drown: keep readable */
  .text-box.drown { filter: none; opacity: 0.7; }
  /* Emerge: show immediately */
  .text-box.emerge { opacity: 1; filter: none; }
}

/* Manual toggle: body.reduce-motion class (set via settings toggle) */
body.reduce-motion .text-box.shake,
body.reduce-motion .text-box.glitch,
body.reduce-motion .text-box.pulse,
body.reduce-motion .text-box.flicker,
body.reduce-motion .text-box.drip,
body.reduce-motion .text-box.typewriter,
body.reduce-motion .text-box.breathe,
body.reduce-motion .text-box.static,
body.reduce-motion .text-box.burn,
body.reduce-motion .text-box.corrupt,
body.reduce-motion .text-box.emerge,
body.reduce-motion .text-box.drown,
body.reduce-motion .text-box.fracture,
body.reduce-motion .text-box.echo {
  animation: none !important;
}
body.reduce-motion .text-box.typewriter {
  width: auto !important;
  border-right: none;
}
body.reduce-motion .text-box.breathe { opacity: 1; }
body.reduce-motion .text-box.drown { filter: none; opacity: 0.7; }
body.reduce-motion .text-box.emerge { opacity: 1; filter: none; }

/* Responsive text scaling */
@media (max-width: 640px) {
  .text-box.speech { font-size: 0.75rem; }
  .text-box.thought { font-size: 0.7rem; }
  .text-box.narration { font-size: 0.7rem; }
  .text-box.yell { font-size: 0.9rem; }
  .text-box.whisper { font-size: 0.6rem; }
  .text-box.sfx { font-size: 1.1rem; }
}