/* GENERATED — run pnpm build:components. Source: packages/registry/intro-sequence/intro-sequence.css */

/**
 * Intro Sequence
 *
 * Reads tokens, never defines them. No global rules — every selector is scoped
 * under .vc-intro-sequence.
 *
 * The hidden state is applied by JavaScript, never by this stylesheet. If it
 * lived here, a script that failed to load would leave the page permanently
 * blank. A flash of the finished page is a far better failure than no page.
 */

.vc-intro-sequence__item {
  transition:
    opacity var(--vc-dur-slow) var(--vc-ease-out) var(--vc-is-delay, 0s),
    transform var(--vc-dur-slow) var(--vc-ease-out) var(--vc-is-delay, 0s);
}

/**
 * translate3d, not translateY: it promotes each item to its own layer for the
 * duration of the reveal, which keeps a long stagger off the main thread. The
 * class is removed when the sequence ends, so the layers go with it.
 */
.vc-intro-sequence__item--pending {
  opacity: 0;
  transform: translate3d(0, var(--vc-is-distance, 0), 0);
}

/**
 * Belt and braces. The factory already declines to hide anything under reduced
 * motion; this covers a preference that changes mid-reveal, before the factory
 * has stripped the classes.
 */
@media (prefers-reduced-motion: reduce) {
  .vc-intro-sequence__item {
    transition: none;
  }

  .vc-intro-sequence__item--pending {
    opacity: 1;
    transform: none;
  }
}