/* Progressive, page-local entrances. Resting content is always visible.
   JavaScript applies the homepage motion only after fonts and GSAP are ready. */
body.team-story.story-reveal-ready .leadership-rail .leadership-letter:nth-child(n) {
  /* The rail has one entrance owner; retain its native horizontal browsing. */
  transform: none;
}

/* Inline letter paths keep the original SVG geometry and responsive box. */
/* Decoding glyph slots share the fixed wordmark box from the director hero. */
body.team-story .story-eyebrow { position: relative; }
body.team-story .story-eyebrow__colon { position: relative; top: 2px; }
body.team-story svg.story-eyebrow__wordmark {
  display: block;
  flex: none;
  height: var(--story-scene-unit);
  max-width: none;
  overflow: visible;
}
body.team-story [data-story-letter] { pointer-events: none; }
@media (max-width: 767px) {
  body.team-story svg.story-eyebrow__wordmark { height: .75rem; }
}

body.team-story .story-reveal-line {
  display: block;
  position: relative;
  white-space: normal;
}

/* Shared metrics/CTA components carry transition: all. While GSAP owns their
   entrance, a CSS transition must not interpolate each animation frame again.
   Only active targets are overridden; original hover transitions return once
   the entrance has completed. */
body.team-story [data-story-reveal-state="pending"],
body.team-story [data-story-reveal-state="playing"],
body.team-story [data-story-reveal-state="pending"] > .story-reveal-line,
body.team-story [data-story-reveal-state="playing"] > .story-reveal-line,
body.team-story [data-story-reveal="hero"][data-story-reveal-state="pending"] > span,
body.team-story [data-story-reveal="hero"][data-story-reveal-state="playing"] > span,
body.team-story [data-story-reveal="wordmark"] [data-story-letter],
body.team-story [data-story-reveal="wordmark"] .story-eyebrow__colon {
  transition: none !important;
}

/* Keyboard focus must never land on an invisible in-flight control. JS also
   completes the associated entrance, including its heading, synchronously. */
body.team-story [data-story-reveal]:focus-within {
  opacity: 1 !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.team-story [data-story-reveal],
  body.team-story .story-reveal-line,
  body.team-story [data-story-reveal="hero"] > span,
  body.team-story [data-story-reveal="wordmark"] [data-story-letter],
  body.team-story [data-story-reveal="wordmark"] .story-eyebrow__colon {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media print {
  body.team-story [data-story-reveal],
  body.team-story .story-reveal-line,
  body.team-story [data-story-reveal="hero"] > span,
  body.team-story [data-story-reveal="wordmark"] [data-story-letter],
  body.team-story [data-story-reveal="wordmark"] .story-eyebrow__colon {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Contours are complete in HTML. Dash overrides exist only during an entrance;
   print/reduced-motion remain readable even before their JS cleanup runs. */
@media (prefers-reduced-motion: reduce), print {
  body.team-story .principle-line-art path,
  body.team-story .principle-line-art circle {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}