Snooze Reminder

Build a reminder notification with a real snooze. Structure: a card with an icon, the reminder text and its source, two buttons (Snooze and Got it), and a set of snooze options that expand below. Snooze is the missing third answer. A reminder offering only dismiss and act forces a choice between now and never, and that is precisely what teaches people to dismiss everything without reading it. The options must be ABSOLUTE TIMES, not durations: "This evening - 19:00", "Tomorrow - 09:00". Put the clock time on the right of each row in a mono font. "In 4 hours" is a sum the user has to do in their head while a meeting is starting. Expansion: animate the card's own HEIGHT from 0 to auto (spring, stiffness ~400, damping ~34) so the options push the card open. Do not float a popover - it would cover the reminder the user is deciding about. Stagger the option rows about 50ms apart, sliding in from x -8, so it reads as a list being offered rather than a panel appearing. After picking, confirm with the TIME: "back at 19:00", not "snoozed". Snoozing without saying when just moves the uncertainty somewhere else. Accessibility: aria-expanded on the Snooze button so the disclosure is not a purely visual fact, and aria-live="polite" on the confirmation. Under prefers-reduced-motion, options appear instantly and the confirmation does not slide. Colors as tokens: paper card, hairline borders, one accent for the reminder icon. Use a placeholder source name. 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.