Notification Bell

Create a notification bell with a live badge. A circular bell button with an accent count badge pinned to its top-right corner. When a notification arrives, three things happen at once: the bell swings like a real bell (rotate 0 → -18 → 14 → -9 → 5 → 0 over 600ms, ease-out) around a transform-origin near its TOP (50% 4px), so it pivots from the crown, not the center; a ring pulse expands from the button (a 2px accent circle scaling to 1.8x while fading, 700ms); and the badge number rolls, the old digit sliding up and out while the new one springs in from below at 150% scale (stiffness 500, damping 26) inside the overflow-hidden badge. Keep the badge a fixed-size rounded pill (monospace bold) so single digits don't shift it. Accessibility: the badge uses aria-live="polite" with an aria-label like "3 unread notifications". If prefers-reduced-motion is set, update the count instantly with no swing or pulse. 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.