Stacked Bar Animated

Create an animated stacked bar. A single horizontal bar (20px tall, rounded 6px, overflow hidden) divided into 3 segments with a 2px gap. Implement the segments as flex children animating flex-grow from ~0 to their percentage value, in sequence: each segment takes 0.7s with easing cubic-bezier(0.22, 1, 0.36, 1) and starts 0.28s after the previous one, so the bar assembles left to right and neighbors slide as each segment claims its share. Use the accent color for the first segment and calm neutrals (ink, warm grey) for the rest. Below the bar, a legend row per segment (small color square, monospace label and percentage) rises in 6px behind its segment's animation with the same stagger. Add a monospace title above (e.g. "plan mix"). Accessibility: the whole chart gets role="img" with an aria-label reading out the mix (e.g. "Stacked bar of plan mix: Core 46 percent, Pro 32, Trial 22"). If prefers-reduced-motion is set, render the finished bar and legend immediately. Trigger when the chart enters the viewport. 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.