Text Swap Hover

Create a text swap hover button. A button whose label slides up and out on hover while a second label slides in from below to replace it (e.g. 'Get started' becoming 'Let's go →'). Implementation: inside the button, a clipping window: a block span with height 1.3em and overflow: hidden. Inside it, both labels stacked vertically as block elements. On hover, translate both up by exactly 100% of the line height (transform: translateY(-100%) on each), 350ms with cubic-bezier(0.22, 1, 0.36, 1); on leave, translate back. Because the window clips, only one label is ever visible. Details: both labels must have the same line-height; if the second label is wider, give the button a min-width fitting the wider one so the button doesn't resize mid-animation; mark the duplicate label aria-hidden='true' so screen readers announce only the primary text; the second label can take the accent color for a wink of surprise. Under prefers-reduced-motion, keep a single static label. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.