/* =============================================================================
   CD-METHOD TEXT PRESETS
   Ported from SaaS retro-presets for standalone CD-Method use.
   Only includes presets used in scenes: TXT-01, TXT-11, TXT-15, TXT-18
   and heading styles: HDG-01, HDG-02, HDG-04 (with LCD palette variants)
   ============================================================================= */

/* ── TXT-01: TYPEWRITER ─────────────────────────────────────────────────────── */
@keyframes txt01-type {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes txt01-cursor {
  50% { border-color: transparent; }
}
.retro-txt-01 {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #000;
  width: 0;
  animation:
    txt01-type 2s steps(20) forwards,
    txt01-cursor 0.6s step-end infinite;
}

/* ── TXT-11: WORD-BY-WORD REVEAL ────────────────────────────────────────────── */
.retro-txt-11 .word {
  visibility: hidden;
  display: inline;
}
.retro-txt-11 .word.visible {
  visibility: visible;
}

/* ── TXT-15: SENTENCE-BY-SENTENCE ───────────────────────────────────────────── */
.retro-txt-15 .sentence {
  visibility: hidden;
  display: inline;
}
.retro-txt-15 .sentence.visible {
  visibility: visible;
}

/* ── TXT-18: PIXEL DISSOLVE ─────────────────────────────────────────────────── */
.retro-txt-18 .char {
  visibility: hidden;
  display: inline;
}
.retro-txt-18 .char.visible {
  visibility: visible;
}

/* =============================================================================
   HEADING STYLES — Shared base + HDG-01, HDG-02, HDG-04
   ============================================================================= */

/* ── SHARED HEADING BASE ────────────────────────────────────────────────────── */
[class*="retro-hdg-"] {
  font-family: 'Press Start 2P', cursive;
  line-height: 1.6;
  letter-spacing: 1px;
  word-spacing: 4px;
  display: inline-block;
}

/* ── HDG-01: NOKIA BLOCK (standard) ─────────────────────────────────────────── */
.retro-hdg-01-dark {
  color: #fff;
  background: #000;
  padding: 8px 16px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}
.retro-hdg-01-light {
  color: #000;
  background: #fff;
  padding: 8px 16px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}

/* ── HDG-01: NOKIA BLOCK (LCD palette) ──────────────────────────────────────── */
.retro-hdg-01-lcd-dark {
  color: var(--cd-bg);
  background: var(--cd-dark);
  padding: 8px 16px;
  border: 3px solid var(--cd-dark);
  box-shadow: 4px 4px 0 var(--cd-mid);
}
.retro-hdg-01-lcd-light {
  color: var(--cd-dark);
  background: var(--cd-bg);
  padding: 8px 16px;
  border: 3px solid var(--cd-dark);
  box-shadow: 4px 4px 0 var(--cd-mid);
}

/* ── HDG-02: THICK OUTLINE (standard) ───────────────────────────────────────── */
.retro-hdg-02-dark {
  color: #fff;
  text-shadow:
    -3px -3px 0 #000, -2px -3px 0 #000, -1px -3px 0 #000, 0 -3px 0 #000, 1px -3px 0 #000, 2px -3px 0 #000, 3px -3px 0 #000,
    -3px -2px 0 #000, 3px -2px 0 #000,
    -3px -1px 0 #000, 3px -1px 0 #000,
    -3px  0   0 #000, 3px  0   0 #000,
    -3px  1px 0 #000, 3px  1px 0 #000,
    -3px  2px 0 #000, 3px  2px 0 #000,
    -3px  3px 0 #000, -2px  3px 0 #000, -1px  3px 0 #000, 0  3px 0 #000, 1px  3px 0 #000, 2px  3px 0 #000, 3px  3px 0 #000;
}
.retro-hdg-02-light {
  color: #000;
  text-shadow:
    -3px -3px 0 #fff, -2px -3px 0 #fff, -1px -3px 0 #fff, 0 -3px 0 #fff, 1px -3px 0 #fff, 2px -3px 0 #fff, 3px -3px 0 #fff,
    -3px -2px 0 #fff, 3px -2px 0 #fff,
    -3px -1px 0 #fff, 3px -1px 0 #fff,
    -3px  0   0 #fff, 3px  0   0 #fff,
    -3px  1px 0 #fff, 3px  1px 0 #fff,
    -3px  2px 0 #fff, 3px  2px 0 #fff,
    -3px  3px 0 #fff, -2px  3px 0 #fff, -1px  3px 0 #fff, 0  3px 0 #fff, 1px  3px 0 #fff, 2px  3px 0 #fff, 3px  3px 0 #fff;
}

/* ── HDG-02: THICK OUTLINE (LCD palette) ────────────────────────────────────── */
.retro-hdg-02-lcd-dark {
  color: var(--cd-bg);
  text-shadow:
    -3px -3px 0 var(--cd-dark), -2px -3px 0 var(--cd-dark), -1px -3px 0 var(--cd-dark), 0 -3px 0 var(--cd-dark), 1px -3px 0 var(--cd-dark), 2px -3px 0 var(--cd-dark), 3px -3px 0 var(--cd-dark),
    -3px -2px 0 var(--cd-dark), 3px -2px 0 var(--cd-dark),
    -3px -1px 0 var(--cd-dark), 3px -1px 0 var(--cd-dark),
    -3px  0   0 var(--cd-dark), 3px  0   0 var(--cd-dark),
    -3px  1px 0 var(--cd-dark), 3px  1px 0 var(--cd-dark),
    -3px  2px 0 var(--cd-dark), 3px  2px 0 var(--cd-dark),
    -3px  3px 0 var(--cd-dark), -2px  3px 0 var(--cd-dark), -1px  3px 0 var(--cd-dark), 0  3px 0 var(--cd-dark), 1px  3px 0 var(--cd-dark), 2px  3px 0 var(--cd-dark), 3px  3px 0 var(--cd-dark);
}
.retro-hdg-02-lcd-light {
  color: var(--cd-dark);
  text-shadow:
    -3px -3px 0 var(--cd-bg), -2px -3px 0 var(--cd-bg), -1px -3px 0 var(--cd-bg), 0 -3px 0 var(--cd-bg), 1px -3px 0 var(--cd-bg), 2px -3px 0 var(--cd-bg), 3px -3px 0 var(--cd-bg),
    -3px -2px 0 var(--cd-bg), 3px -2px 0 var(--cd-bg),
    -3px -1px 0 var(--cd-bg), 3px -1px 0 var(--cd-bg),
    -3px  0   0 var(--cd-bg), 3px  0   0 var(--cd-bg),
    -3px  1px 0 var(--cd-bg), 3px  1px 0 var(--cd-bg),
    -3px  2px 0 var(--cd-bg), 3px  2px 0 var(--cd-bg),
    -3px  3px 0 var(--cd-bg), -2px  3px 0 var(--cd-bg), -1px  3px 0 var(--cd-bg), 0  3px 0 var(--cd-bg), 1px  3px 0 var(--cd-bg), 2px  3px 0 var(--cd-bg), 3px  3px 0 var(--cd-bg);
}

/* ── HDG-02: THICK OUTLINE (LCD screen-bright) ─────────────────────────────── */
.retro-hdg-02-lcd-screen {
  color: var(--cd-screen);
  text-shadow:
    -3px -3px 0 var(--cd-dark), -2px -3px 0 var(--cd-dark), -1px -3px 0 var(--cd-dark), 0 -3px 0 var(--cd-dark), 1px -3px 0 var(--cd-dark), 2px -3px 0 var(--cd-dark), 3px -3px 0 var(--cd-dark),
    -3px -2px 0 var(--cd-dark), 3px -2px 0 var(--cd-dark),
    -3px -1px 0 var(--cd-dark), 3px -1px 0 var(--cd-dark),
    -3px  0   0 var(--cd-dark), 3px  0   0 var(--cd-dark),
    -3px  1px 0 var(--cd-dark), 3px  1px 0 var(--cd-dark),
    -3px  2px 0 var(--cd-dark), 3px  2px 0 var(--cd-dark),
    -3px  3px 0 var(--cd-dark), -2px  3px 0 var(--cd-dark), -1px  3px 0 var(--cd-dark), 0  3px 0 var(--cd-dark), 1px  3px 0 var(--cd-dark), 2px  3px 0 var(--cd-dark), 3px  3px 0 var(--cd-dark);
}

/* ── HDG-04: LCD INSET (already Game Boy native) ────────────────────────────── */
.retro-hdg-04-dark {
  color: var(--cd-bg);
  background: var(--cd-dark);
  padding: 10px 16px;
  border: 3px solid var(--cd-mid);
  text-shadow: 1px 1px 0 #0d1705;
  box-shadow:
    inset 2px 2px 0 #0d1705,
    inset -2px -2px 0 #3d5a1f;
}
.retro-hdg-04-light {
  color: var(--cd-dark);
  background: var(--cd-bg);
  padding: 10px 16px;
  border: 3px solid var(--cd-mid);
  text-shadow: 1px 1px 0 var(--cd-screen);
  box-shadow:
    inset 2px 2px 0 var(--cd-screen),
    inset -2px -2px 0 var(--cd-light);
}