Confetti Success

Add a confetti burst on success. When the user completes a meaningful action (order placed, signup finished, level complete), fire a single confetti burst from just below the triggering button. Use the canvas-confetti library (available on npm and as a CDN script). Fire with: particleCount ~70, spread ~75, startVelocity ~28, gravity 0.9, ticks ~130, origin at the button's position (x: 0.5, y: 0.75 when scoped to a local canvas), and a palette of 3-4 brand colors rather than the rainbow default. Scope: prefer confetti.create(canvas, { resize: true }) on a dedicated canvas positioned over the relevant section (pointer-events: none), rather than covering the whole page. Fire exactly once per completed action, never on hover and never in a loop. Reserve it for the top 1-2 moments in the product; confetti loses all meaning when it appears twice a minute. When prefers-reduced-motion is enabled, skip the confetti and show the plain success state. 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.