/* Title-read reveal ----------------------------------------------------------
   Section titles are present immediately in a muted tone. As each title enters
   the viewport, its letters resolve one after another to the normal heading
   color, creating a quick reading pulse. */

:root {
  --title-reveal-final: var(--t1, #F8FAFC);
  --title-reveal-muted: #7C7D7E;
  --title-reveal-step: 24ms;
  --title-reveal-letter-duration: 140ms;
}

html.light {
  --title-reveal-final: var(--t1, #0F172A);
  --title-reveal-muted: #8790A0;
}

.title-reveal {
  color: var(--title-reveal-muted) !important;
}

.title-reveal.title-reveal-visible {
  color: var(--title-reveal-final) !important;
}

.title-reveal .title-reveal-char {
  color: var(--title-reveal-muted) !important;
  transition: color var(--title-reveal-letter-duration) ease-out;
  transition-delay: calc(var(--title-reveal-index, 0) * var(--title-reveal-step));
}

.title-reveal.title-reveal-visible .title-reveal-char {
  color: var(--title-reveal-final) !important;
}

@media (prefers-reduced-motion: reduce) {
  .title-reveal,
  .title-reveal .title-reveal-char {
    color: var(--title-reveal-final) !important;
    transition: none;
    transition-delay: 0ms;
  }
}