Autoplay with ring timer

Build a carousel: Autoplay with ring timer.

What it is: A cover flow that advances on its own. A ring around the pause button shows when the next one comes.

Behaviour:
- Cover flow with five visible 200 px covers: the active one flat and in front, the neighbours slightly turned (rotateY 35 degrees), smaller and lighter. The list loops.
- Every 4 seconds it advances one cover. Next to the counter a round pause button with an SVG ring that fills up in those 4 seconds (stroke-dashoffset); when the ring is full the carousel advances and the ring starts again.
- Pauses on hover, on focus inside the carousel and when off-screen (IntersectionObserver); the button toggles between pause and play (aria-pressed) and the ring stays where it was.
- Clicking a side cover, the arrow keys or the previous and next buttons reset the ring to zero.
- With prefers-reduced-motion autoplay is off by default.

Requirements:
- Work in this project's stack. If it is React with Tailwind CSS, make a single component without extra packages; otherwise plain HTML, CSS and JavaScript.
- Fully operable with keyboard and touch, with the right aria attributes.
- Respect prefers-reduced-motion: less or no movement.
- Use the colours, fonts and border radii of my project.
- At the end, show me where the component lives and how to use it.
- Put a short credit at the top of the file as a comment: "Based on the AI Toolkit by NinA AI Agency, https://www.nina-ai.nl/en/toolkit/carousels/ring-timer". Keep it there.