Alternating headline swap

The component is self-contained: one file, zero dependencies, palette in local --vibeui-text-001-* variables. It takes the theme from the environment via light-dark() plus a rule for the .dark class. No client JS: both wordings share one inline-grid cell, so the width is set by the longer of them and never jumps, and the swap itself is a transition on :hover and :focus-visible. Every letter sits in its own overflow:hidden box and travels 115% of its height; the direction comes from the --vibeui-text-001-dir variable (+1 on even letters, −1 on odd ones), which makes the line part in opposite streams. Transform runs 300 ms on a spring written out as linear() points, while opacity and blur run 180 ms on cubic-bezier(0.16,1,0.3,1): the blur is shorter than the travel and hides the moment of the swap. Each letter is offset by transition-delay: calc(stagger * index), 14 ms per letter. Type size is computed from the block's own width (container-type:inline-size, clamp with cqi), not from the viewport. The link spans the parent's width and keeps the wording centred (--vibeui-text-001-align), yet only the wording itself catches the cursor: pointer events are off on the stretched row, otherwise it would flip from a hover on the empty space beside it. Under prefers-reduced-motion the transitions are off and the wording simply changes. Under the cursor the wording, the underline and the arrow take the accent (--vibeui-text-001-accent-text): in dark mode it is lightened, because pure accent on a dark background reads dull.