Drag & Drop Upload

Create an animated drag-and-drop upload zone. A dashed-border dropzone (rounded, upload-cloud icon + 'drop files here' in small monospace). It has four states: 1. Dragover: the border and icon tint to the accent color, the background washes with accent at 5% alpha, the zone scales to 1.03 with a spring (stiffness 380, damping 26), and the hint swaps to 'release to upload'. Wire this to real dragenter/dragleave/drop events (count enters/leaves so child elements don't flicker the state). 2. Drop: the file lands and the zone's content swaps to a file row: an icon tile, the filename in monospace, a live percent, and a thin progress bar. 3. Uploading: the bar fills left-to-right (scaleX, transform-origin left, smooth ~0.1s steps) with the percent counting up. 4. Done: the bar and percent flip to green, and a green check badge pops in with a spring (from 30% scale, stiffness 520, damping 20). Every one of those states waits for a real event: the browser's drag events for the first two, and the actual upload's progress for the last two. Do not script a file into the zone or fake the drag phase. Accessibility: the zone is also a button that opens a file picker (keyboard path); progress announced via aria-live="polite". If prefers-reduced-motion is set, jump between states with no scaling or bar animation. 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.