FAQ Accordion

Build an FAQ accordion section. Structure: a light card with 3-4 question rows separated by hairlines. Each row: the question in bold, and a custom plus icon at the right built from two 2px bars (not an icon font) - that's what makes the morph possible. Open/close: only one item is open at a time; opening one closes the previous. The answer area animates height from 0 to auto with a decisive ease like cubic-bezier(.22,1,.36,1), 0.35s, with opacity riding along. No layout jumps: the answer is inside an overflow-hidden wrapper. The morph: when a row opens, the plus becomes a minus - the vertical bar collapses (scaleY to 0) while rotating 90deg, leaving the horizontal bar, which flips to the accent color. Closing reverses it. 0.3s with the same ease. The open question's text also turns accent (0.25s color transition). Accessibility: rows are buttons with aria-expanded; the answer region is properly associated. Under prefers-reduced-motion, height and the morph switch instantly. Colors as tokens: paper surface, ink text, muted answers, one accent. Content should be real questions, not lorem. 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.