/* ==========================================================================
   METRIX LAB - story.css
   The storytelling layer (paired with js/story.js):
     1. Chapter numbers - .eyebrow__num prefixes turn section eyebrows into
        numbered chapters (01 / WHY METRIX LAB ...).
     2. Hero word-rise - the headline enters word by word (split by JS).
   Progressive enhancement only: without js/story.js the page renders
   exactly as before. Uses foundation tokens only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CHAPTER NUMBERS inside eyebrows
      <span class="eyebrow"><span class="eyebrow__num">01</span>Label</span>
   -------------------------------------------------------------------------- */
.eyebrow__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}
.eyebrow__num::after {
  content: "/";
  margin-left: var(--space-xs);
  color: var(--color-grey-600);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   2. HERO WORD-RISE (js/story.js splits .hero__title into .ht-w wrappers;
      skipped entirely under prefers-reduced-motion)
   -------------------------------------------------------------------------- */
.hero__title--split .ht-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* keep descenders (g, y) visible inside the overflow clip */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hero__title--split .ht-w__in {
  display: inline-block;
  transform: translateY(112%);
  animation: ht-rise 0.85s var(--reveal-ease) forwards;
  animation-delay: calc(180ms + var(--i, 0) * 85ms);
}
@keyframes ht-rise {
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title--split .ht-w { overflow: visible; }
  .hero__title--split .ht-w__in { transform: none; animation: none; }
}