Pie Slice Explode

Create a pie chart with an exploding active slice. Draw the pie as SVG path slices (each slice: move to center, line to the arc start, arc to the arc end, close). One slice is active at a time: it translates 7px outward along the direction of its middle angle (compute dx = cos(midAngle), dy = sin(midAngle)) and scales to 103%, with a spring (stiffness 380, damping 22), while every other slice returns home. Hovering a slice previews it and clicking makes it active. Nothing changes the active slice on its own. A chart that reassigns its own focus is unreadable, because the reader never gets to finish looking at the slice they chose. Next to the pie, a legend: one row per slice with a small color square, label and percentage. The active row's text darkens and bolds (color transition 250ms) and its square springs to 135% scale. Use one accent-colored slice and neutral tones for the rest so the palette stays calm. Accessibility: the SVG gets role="img" with a descriptive aria-label naming the largest slice; the legend is real text. If prefers-reduced-motion is set, skip the explode and show the active state with the legend highlight only. 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.