/* GENERATED — run pnpm build:components. Source: packages/registry/liquid-headline/liquid-headline.css */

/**
 * Liquid Headline
 *
 * Reads tokens, never defines them. No global rules — every selector is scoped
 * under .vc-liquid-headline. Colour, size and weight all inherit, so the
 * headline looks like the page's headline and not like a component.
 */

.vc-liquid-headline {
  display: block;
}

/**
 * The text, for assistive tech only. The split layer beside it is aria-hidden,
 * because per-character elements get announced one letter at a time.
 *
 * user-select: none keeps it out of a copied selection, so the headline is
 * copied once rather than twice.
 */
.vc-liquid-headline__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
}

.vc-liquid-headline__visual {
  display: block;
}

/**
 * Words are atomic, so a line never breaks mid-word. max-width is the exception
 * that matters: one word longer than the line wraps inside its own box instead
 * of overflowing the container.
 */
.vc-liquid-headline__word {
  display: inline-block;
  max-width: 100%;
}

/**
 * inline-block is load-bearing: transforms do not apply to a non-replaced
 * inline box. The custom properties are written by the spring loop.
 */
.vc-liquid-headline__char {
  display: inline-block;
  transform: translate(0, var(--vc-lh-y, 0)) scale(var(--vc-lh-s, 1));
}

/**
 * Belt and braces. The factory already declines to bind a pointer or take a
 * frame under reduced motion; this covers a stale inline value left behind by
 * a preference change mid-animation.
 */
@media (prefers-reduced-motion: reduce) {
  .vc-liquid-headline__char {
    transform: none;
  }
}