Achievement Toast

Create an achievement toast. A dark toast card that springs up from below (from 40px lower at 90% scale, stiffness 380, damping 24) with a deep shadow. Inside: a rounded icon tile with an accent-tinted background holding a trophy icon, a bold title (e.g. "Streak master!") and a small monospace progress line ("achievement 3 of 5 unlocked"). The celebration choreography: the trophy tile spins in slightly late (0.15s delay, from scale 0 and -30deg with a bouncy spring, stiffness 420, damping 16), and as it lands, 6 tiny accent sparks burst outward from behind it: 4px dots flying to fixed offsets (up to ~30px) while scaling from 0 to 1 and fading out over 0.7s ease-out, each with a ~0.02s stagger. Auto-dismiss after a few seconds by sliding back down. Use fixed spark offsets (not random per render) so the burst is identical every time. Accessibility: the toast uses role="status" so it's announced; sparks are aria-hidden. If prefers-reduced-motion is set, fade the toast in and out with no springs or sparks. 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.