Retry Countdown

Build a connection-error card that retries itself on a visible countdown. Structure: a light card with a 40px circular indicator on the left, a title ("Connection lost" with a small red wifi-off icon), and a status line under it. Sequence (runs once on mount, ~3s total): 1. Countdown: the ring is an SVG circle whose stroke empties as the numbers 3 -> 2 -> 1 tick down in its center (700ms per step). Each number change is a spring pop - old number shrinks out, new one springs in (stiffness ~480). The stroke offset animates smoothly to match (0.65s, decisive ease). Status line reads "retrying in 3..." etc. 2. Retrying: the number is replaced by a spinning refresh icon (360deg / 0.8s, linear) for about a second, ring fully drawn in accent. 3. Success: the icon swaps to a green check with a spring pop, the ring stroke turns green, the title becomes "Reconnected" in green and the card border tints green (0.35s ease). A small replay button appears to run the sequence again. Accessibility: the status line is aria-live="polite" so the countdown is announced; icons are aria-hidden. Under prefers-reduced-motion, skip straight to the success state. Colors as tokens: paper card, ink text, one accent for the countdown ring, semantic red for the error icon and green for recovery. 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.