Trust Badge Hover

Create trust badges with an animated detail strip. A row of 3 equal badges (secure checkout, free shipping, returns): each is a bordered tile with an icon and a small bold label. Below the row sits a dark strip that shows the active badge's detail line in small monospace text. The active badge lifts 3px with a spring (stiffness 420, damping 26), its border turns the accent color, and its icon springs to 115% in the accent color, while the detail text in the strip crossfades vertically (old up and out, new in from below, 220ms). Hovering or keyboard-focusing a badge makes it active, and on hover-out the last one stays active rather than resetting. Nothing advances the strip on a timer: the strip is an answer to where the pointer is, and a strip that changes on its own makes the reader lose the line they were halfway through. Give the strip a fixed height so the row below it never shifts as the detail lines change length. Accessibility: badges are buttons; the detail strip uses aria-live="polite". If prefers-reduced-motion is set, skip the lift and springs and swap details instantly. 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.