Accordion Menu

Create an animated accordion menu. A bordered menu card with 3 sections separated by hairlines, each a full-width row: the section label in small bold monospace and a chevron on the trailing edge. One section is open at a time. Opening: the chevron rotates 180deg with a spring (stiffness 420, damping 28), the label tints to the accent color, and the panel expands with an animated height from 0 to auto over 0.32s with cubic-bezier(.22,1,.36,1). Measure the content or use a tool that animates height: auto; never hardcode pixel heights. Inside, the child items cascade in from the left (opacity 0, x -8px → 0) with a 0.05s stagger, each carrying a thin left border that makes the group read as a tree. Opening a different section closes the current one with the reverse height animation, so the menu breathes instead of jumping. Clip the collapsing panel with overflow: hidden so text never spills during the animation. Accessibility: section headers are buttons with aria-expanded and aria-controls pointing at their panel; child items are links or buttons reachable by keyboard. If prefers-reduced-motion is set, expand and collapse instantly with no cascade. 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.