/**
 * Sits under the reel frame, centred on it, like the name plate under a
 * portrait. Positioned against the frame rather than against the wordmark
 * because the frame is sized in px and the wordmark in vw — pinned to the
 * wordmark it drifted into his feet as the viewport narrowed.
 */
.NameCredit__credit {
  position: absolute;
  top: calc(100% + 1.4rem);
  right: 0;
  left: 0;

  display: flex;
  justify-content: center;
  /* The gap is the tracking. Meta's own +12% would sit on top of it and add a
     phantom space after the last letter, so it is cleared here. */
  gap: 0.5em;
  margin: 0;
  letter-spacing: normal;

  /* Solid, not meta's grey. At grey-3 it read as one more UI label next to the
     role line; this is half his name, and the stroke wordmark above it is
     faint enough that a solid line under him does not fight it. */
  color: var(--fg);

  pointer-events: none;
}

.NameCredit__letter {
  /* Written by the component on the shared tick; the transition is what makes
     each letter arrive rather than snap. */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/** The word break. Wider than the letter gap, so it still reads as two words. */
.NameCredit__gap {
  width: 0.6em;
}

@media (prefers-reduced-motion: reduce) {
  .NameCredit__letter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}