Complete Toast

Build my toast notifications properly. Not a new effect, just every behaviour a toast system already needs. The messages are listed at the end; use those exact values. For colours, use my site's existing palette; success and error use functional green and red on the icon only, and everything below describes behaviour, not a look. Render only the toast system itself: a stack container in one corner and the toasts inside it. Do not add state names, captions, or any demo text around it. Structure: a fixed container in the bottom-right corner of the viewport, a column with a small gap, with pointer-events: none on the container and pointer-events: auto on each toast, so the corner never blocks clicks on the page beneath it. Each toast is a small surface card: an icon, one line of message text, and a real close button with an aria-label. Give the container aria-live="polite" and each toast role="status", so screen readers announce arrivals without interrupting. Entering: the toast fades and rises about 14px on transform only, around 200ms with an ease-out curve like cubic-bezier(0.22, 1, 0.36, 1). Leaving: it slides out horizontally and fades over about 180ms. When one leaves, the remaining toasts glide to their new positions with a transform transition instead of jumping; if your framework offers layout animation, use it, otherwise a FLIP pass. The timer shows itself. Each toast lives about 4 seconds, and a 2px hairline bar along the bottom edge drains from full to empty over that lifetime, linearly, using transform: scaleX with transform-origin left. A toast that vanishes on a silent timer is a surprise; one with a visible clock is a countdown. Hover pauses the clock. While the pointer is over a toast, freeze both the dismissal timer and the drain bar, and resume them from where they stopped when the pointer leaves. This is the detail nobody asks for and everyone feels: the toast waits while it is being read. The close button works instantly: clicking it removes the toast at once, with no animation lock and no waiting for the timer. Cap the stack at three. When a fourth arrives, the oldest leaves. A corner that fills with six stacked messages is a log, not a notification. Under prefers-reduced-motion: entering and leaving are opacity-only, no rise and no slide, the stack repositions without gliding, and the drain bar is hidden while the timer still runs. Make it mine: - The success toast reads "Changes saved". - The error toast reads "Couldn't reach the server". 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.