/* ============================================================
   JBDS — typewriter animation
   Words:  wonderful → accessible → fast & scalable →
           that converts → people love
   Colors: caution → warning → danger → success → info  (all _onDark)
   Total loop: 20 s  |  1% = 200 ms
   Typing:  100 ms / char (0.5% steps)
   Deleting: 80 ms / char (0.4% steps)
   Pause after full word: 1 200 ms (6%)
   Gap between words: ~220 ms (1.1%)
   ============================================================

   Timeline
   ────────────────────────────────────────────────────────────
   Word 1  "wonderful"      (9 ch)   0.0 % → 14.1 %
   Word 2  "accessible"     (10 ch)  15.2 % → 29.7 %
   Word 3  "fast & scalable"(15 ch)  30.8 % → 49.8 %
   Word 4  "that converts"  (13 ch)  50.9 % → 68.1 %
   Word 5  "people love"    (11 ch)  69.2 % → 84.6 %
   Rest / cursor blink only          84.6 % → 100 %
   ============================================================ */


/* ── Base ──────────────────────────────────────────────────── */

.typewriter {
    display: inline;
    /* tw-color drives the text + cursor colour together */
    animation: tw-color 20s step-end infinite;
}

/* Typed text lives in ::before */
.typewriter::before {
    content: '';
    animation: tw-text 20s step-end infinite;
}

/* Blinking cursor */
.typewriter::after {
    content: '|';
    margin-left: 1px;
    animation: tw-cursor 0.7s step-end infinite;
}


/* ── Cursor blink ──────────────────────────────────────────── */

@keyframes tw-cursor {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}


/* ── Word colours ──────────────────────────────────────────── */
/*
 * step-end: the colour holds at the declared value until the
 * NEXT keyframe fires, then jumps instantly — same rhythm as
 * the text content changes.
 * The colour on .typewriter cascades to both ::before and ::after,
 * so text and cursor always share the same colour.
 */

@keyframes tw-color {
    0%     { color: var(--text--body--caution_onDark);  }   /* wonderful        */
    15.2%  { color: var(--text--body--warning_onDark);  }   /* accessible       */
    30.8%  { color: var(--text--body--danger_onDark);   }   /* fast & scalable  */
    50.9%  { color: var(--text--body--success_onDark);  }   /* that converts    */
    69.2%  { color: var(--text--body--info_onDark);     }   /* people love      */
    100%   { color: var(--text--body--info_onDark);     }
}


/* ── Text content ──────────────────────────────────────────── */

@keyframes tw-text {

    /* ── WORD 1: "wonderful" (9 chars) ── 0 % → 14.1 % ───── */
    0%     { content: ''; }
    0.5%   { content: 'w'; }
    1.0%   { content: 'wo'; }
    1.5%   { content: 'won'; }
    2.0%   { content: 'wond'; }
    2.5%   { content: 'wonde'; }
    3.0%   { content: 'wonder'; }
    3.5%   { content: 'wonderf'; }
    4.0%   { content: 'wonderfu'; }
    4.5%   { content: 'wonderful'; }    /* ← pause start */
    10.5%  { content: 'wonderful'; }    /* ← pause end   */
    10.9%  { content: 'wonderfu'; }
    11.3%  { content: 'wonderf'; }
    11.7%  { content: 'wonder'; }
    12.1%  { content: 'wonde'; }
    12.5%  { content: 'wond'; }
    12.9%  { content: 'won'; }
    13.3%  { content: 'wo'; }
    13.7%  { content: 'w'; }
    14.1%  { content: ''; }             /* gap → 15.2 % */

    /* ── WORD 2: "accessible" (10 chars) ── 15.2 % → 29.7 % */
    15.2%  { content: 'a'; }
    15.7%  { content: 'ac'; }
    16.2%  { content: 'acc'; }
    16.7%  { content: 'acce'; }
    17.2%  { content: 'acces'; }
    17.7%  { content: 'access'; }
    18.2%  { content: 'accessi'; }
    18.7%  { content: 'accessib'; }
    19.2%  { content: 'accessibl'; }
    19.7%  { content: 'accessible'; }   /* ← pause start */
    25.7%  { content: 'accessible'; }   /* ← pause end   */
    26.1%  { content: 'accessibl'; }
    26.5%  { content: 'accessib'; }
    26.9%  { content: 'accessi'; }
    27.3%  { content: 'access'; }
    27.7%  { content: 'acces'; }
    28.1%  { content: 'acce'; }
    28.5%  { content: 'acc'; }
    28.9%  { content: 'ac'; }
    29.3%  { content: 'a'; }
    29.7%  { content: ''; }             /* gap → 30.8 % */

    /* ── WORD 3: "fast & scalable" (15 chars) ── 30.8 % → 49.8 % */
    30.8%  { content: 'f'; }
    31.3%  { content: 'fa'; }
    31.8%  { content: 'fas'; }
    32.3%  { content: 'fast'; }
    32.8%  { content: 'fast '; }
    33.3%  { content: 'fast &'; }
    33.8%  { content: 'fast & '; }
    34.3%  { content: 'fast & s'; }
    34.8%  { content: 'fast & sc'; }
    35.3%  { content: 'fast & sca'; }
    35.8%  { content: 'fast & scal'; }
    36.3%  { content: 'fast & scala'; }
    36.8%  { content: 'fast & scalab'; }
    37.3%  { content: 'fast & scalabl'; }
    37.8%  { content: 'fast & scalable'; }  /* ← pause start */
    43.8%  { content: 'fast & scalable'; }  /* ← pause end   */
    44.2%  { content: 'fast & scalabl'; }
    44.6%  { content: 'fast & scalab'; }
    45.0%  { content: 'fast & scala'; }
    45.4%  { content: 'fast & scal'; }
    45.8%  { content: 'fast & sca'; }
    46.2%  { content: 'fast & sc'; }
    46.6%  { content: 'fast & s'; }
    47.0%  { content: 'fast & '; }
    47.4%  { content: 'fast &'; }
    47.8%  { content: 'fast '; }
    48.2%  { content: 'fast'; }
    48.6%  { content: 'fas'; }
    49.0%  { content: 'fa'; }
    49.4%  { content: 'f'; }
    49.8%  { content: ''; }             /* gap → 50.9 % */

    /* ── WORD 4: "that converts" (13 chars) ── 50.9 % → 68.1 % */
    50.9%  { content: 't'; }
    51.4%  { content: 'th'; }
    51.9%  { content: 'tha'; }
    52.4%  { content: 'that'; }
    52.9%  { content: 'that '; }
    53.4%  { content: 'that c'; }
    53.9%  { content: 'that co'; }
    54.4%  { content: 'that con'; }
    54.9%  { content: 'that conv'; }
    55.4%  { content: 'that conve'; }
    55.9%  { content: 'that conver'; }
    56.4%  { content: 'that convert'; }
    56.9%  { content: 'that converts'; }  /* ← pause start */
    62.9%  { content: 'that converts'; }  /* ← pause end   */
    63.3%  { content: 'that convert'; }
    63.7%  { content: 'that conver'; }
    64.1%  { content: 'that conve'; }
    64.5%  { content: 'that conv'; }
    64.9%  { content: 'that con'; }
    65.3%  { content: 'that co'; }
    65.7%  { content: 'that c'; }
    66.1%  { content: 'that '; }
    66.5%  { content: 'that'; }
    66.9%  { content: 'tha'; }
    67.3%  { content: 'th'; }
    67.7%  { content: 't'; }
    68.1%  { content: ''; }             /* gap → 69.2 % */

    /* ── WORD 5: "people love" (11 chars) ── 69.2 % → 84.6 % */
    69.2%  { content: 'p'; }
    69.7%  { content: 'pe'; }
    70.2%  { content: 'peo'; }
    70.7%  { content: 'peop'; }
    71.2%  { content: 'peopl'; }
    71.7%  { content: 'people'; }
    72.2%  { content: 'people '; }
    72.7%  { content: 'people l'; }
    73.2%  { content: 'people lo'; }
    73.7%  { content: 'people lov'; }
    74.2%  { content: 'people love'; }  /* ← pause start */
    80.2%  { content: 'people love'; }  /* ← pause end   */
    80.6%  { content: 'people lov'; }
    81.0%  { content: 'people lo'; }
    81.4%  { content: 'people l'; }
    81.8%  { content: 'people '; }
    82.2%  { content: 'people'; }
    82.6%  { content: 'peopl'; }
    83.0%  { content: 'peop'; }
    83.4%  { content: 'peo'; }
    83.8%  { content: 'pe'; }
    84.2%  { content: 'p'; }
    84.6%  { content: ''; }             /* cursor-only gap → loops */
    100%   { content: ''; }
}


/* ── Reduced motion: freeze on "wonderful", no cursor blink ── */

@media (prefers-reduced-motion: reduce) {
    .typewriter {
        color: var(--text--body--caution_onDark);
        animation: none;
    }
    .typewriter::before {
        content: 'wonderful';
        animation: none;
    }
    .typewriter::after {
        animation: none;
    }
}