Alert Dialog

Create a destructive alert dialog. A trigger button ('Delete file') that opens a confirmation dialog over a dimmed backdrop (ink at 40% alpha, 0.2s fade, optionally a slight backdrop blur). The dialog card springs in from 88% scale and 14px down (stiffness 380, damping 24): a quick, slightly overshooting entrance that says 'stop and look'. Inside, top to bottom, centered: a warning badge - a red-tinted circle holding the destructive icon, which fires a one-shot pulse ring on open (a red ring expanding to 1.8x while fading, 0.7s, delayed 0.15s so it lands after the card settles); a bold title ('Delete this file?'); a muted monospace subtitle ('This can't be undone.'); and a button row - Cancel as a quiet hairline ghost, Delete as a solid red button that scales to 104% on hover. Dismissal (either button, backdrop click, or Escape) plays a fast reverse: scale to 92% and fade in 0.13s. Closing should always feel faster than opening. Use the red only inside this dialog's semantics (destructive action), not as a general accent. Accessibility: role="alertdialog" with aria-modal and a label; focus moves into the dialog on open (Cancel first - safe default), returns to the trigger on close; Escape closes. If prefers-reduced-motion is set, show and hide instantly with no 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.