Staggered Dropdown

Create a staggered dropdown menu. An 'Actions' button opening a dropdown whose items don't appear all at once: each files in from the left, one after another. Opening: the panel scales in from opacity 0, translateY(-6px), scale(0.97) with transform-origin: top left, 200ms cubic-bezier(0.22, 1, 0.36, 1). Items then stagger: each from opacity 0, translateX(-8px) to full, 180ms, 50ms apart. Closing: one quick fade of the whole panel (no reverse stagger, it reads slow). Structure: white card, hairline border, radius 12px, 5px inner padding; rows of icon + label with 8px radius and an accent-tinted hover background; destructive actions (Delete) in the danger red with a red-tinted hover. Rotate the trigger's chevron 180deg while open. Behavior: closes on Escape, on clicking outside (pointerdown listener checking containment), and after choosing an item. Accessibility: aria-haspopup='menu' and aria-expanded on the trigger, role='menu'/'menuitem', ArrowUp/ArrowDown moving focus through items. Under prefers-reduced-motion, open instantly with no stagger. 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.