/* GENERATED — run pnpm build:components. Source: packages/registry/drip-type/drip-type.css */

/**
 * Drip Type
 *
 * Reads tokens, never defines them. No global rules — every selector is scoped
 * under .vc-drip-type. Colour, size and weight all inherit, so the headline
 * looks like the page's headline and not like a component. The ink colour is
 * resolved from the cascade by the factory, because a canvas cannot read a
 * custom property.
 */

/**
 * The positioning context for the canvas. A headline is a block anyway; this
 * only makes it explicit, and makes the overlay's coordinates the element's
 * own padding box.
 */
.vc-drip-type {
  position: relative;
  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-drip-type__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;
}

/**
 * Above the canvas. Both are painted in the same colour, so the only thing
 * this ordering decides is that a drip passing a letter runs behind it rather
 * than over it.
 */
.vc-drip-type__visual {
  position: relative;
  z-index: 1;
  display: block;
}

/**
 * Words are atomic, so a line never breaks mid-word — splitting into
 * characters would otherwise let the browser break between any two of them.
 * max-width is the exception that matters: one word longer than the line wraps
 * inside its own box instead of overflowing the container.
 */
.vc-drip-type__word {
  display: inline-block;
  max-width: 100%;
}

/**
 * Left inline on purpose. An inline box's rect is font-metric height rather
 * than line height, which is what the ink measurement is built on, and inline
 * keeps the baseline alignment the browser already worked out.
 */
.vc-drip-type__char {
  display: inline;
}

/**
 * Sized to the text plus the reach the drips are given below it, which the
 * factory writes as --vc-dt-reach. Takes no pointer events: everything under
 * it stays clickable and selectable.
 *
 * width is stated explicitly, and that is not a style choice. A canvas is a
 * replaced element, so anchoring it with `left: 0; right: 0` does not stretch
 * it the way it would a div — it keeps `width: auto`, which for a replaced
 * element means its intrinsic size. With only a height given it then takes the
 * width from its intrinsic 2:1 ratio and lands nowhere near the text. Worse,
 * the factory sizes the backing store from the rendered box, so the box would
 * be deriving its size from the backing store that was derived from the box.
 * A percentage width resolves against the containing block and breaks the loop.
 */
.vc-drip-type__canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: calc(100% + var(--vc-dt-reach, 0px));
  pointer-events: none;
}

/**
 * Applied by the factory under reduced motion. Hidden rather than removed, so
 * turning the preference back off needs no remount.
 */
.vc-drip-type--still .vc-drip-type__canvas {
  display: none;
}

/**
 * Belt and braces. The factory already declines to bind a pointer or take a
 * frame under reduced motion; this covers the frame between a preference
 * changing and the factory hearing about it.
 */
@media (prefers-reduced-motion: reduce) {
  .vc-drip-type__canvas {
    display: none;
  }
}