Complete Modal

Build my confirmation modal properly. Not a new effect, just every behaviour a dialog already needs. The texts are listed at the end; use those exact values. For colours, use my site's existing palette; a destructive primary action uses a functional red, and everything below describes behaviour, not a look. Render only the trigger button and the dialog itself. Do not add state names, captions, or any demo text around them. Structure: a scrim over the whole viewport in the page's ink colour at about 40% opacity, and a panel centred inside it with role="dialog", aria-modal="true", and aria-labelledby pointing at the title. The panel holds a title, one line of body copy, and two buttons: a quiet cancel (transparent with a hairline border) and a solid primary. The hierarchy should read without reading. Opening: the scrim fades in over about 200ms while the panel fades, rises about 8px, and scales from 0.96 to 1 with an ease-out curve like cubic-bezier(0.22, 1, 0.36, 1). A panel that scales from zero inflates; one that arrives from 0.96 lands. Closing is faster than opening: about 150ms, fade with a slight scale down. Leaving should never make the user wait; the asymmetry is the point. Focus walks in and walks back. On open, move focus to the cancel button (the safe action, especially when the primary is destructive). Trap Tab inside the dialog while it is open. On close, return focus to the exact trigger that opened it. A modal that strands keyboard focus behind the scrim is broken even if it looks right. Dismissal: the Escape key closes it, clicking the scrim closes it, and a click inside the panel must not (stop the propagation). Cancel closes it instantly. While the dialog is open, lock the page scroll behind it without the layout jumping: reserve the scrollbar's width with scrollbar-gutter: stable, or add padding equal to the scrollbar width when you set overflow: hidden on the body. The page shifting sideways when a modal opens is the tell of a rushed implementation. Under prefers-reduced-motion: both directions become opacity-only fades, no rise and no scale, and every behaviour above still holds. Make it mine: - The dialog title reads "Delete this project?". - The body line reads "The project and its 14 files will be gone for good.". - The primary button reads "Delete". - The cancel button reads "Cancel". 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.