Autoplay met ringtimer

Bouw een carousel: Autoplay met ringtimer.

Wat het is: Een coverflow die zelf doorschuift. Een ring rond de pauzeknop laat zien wanneer de volgende komt.

Gedrag:
- Coverflow met vijf zichtbare covers van 200 px: de actieve vlak en vooraan, de buren iets gedraaid (rotateY 35 graden), kleiner en lichter. De lijst loopt rond.
- Elke 4 seconden schuift hij een cover door. Naast de teller een ronde pauzeknop met een SVG-ring die zich in die 4 seconden vult (stroke-dashoffset); is de ring vol, dan schuift de carousel door en begint de ring opnieuw.
- Pauze bij hover, bij focus binnen de carousel en als hij buiten beeld is (IntersectionObserver); de knop wisselt tussen pauze en afspelen (aria-pressed) en de ring blijft dan staan waar hij was.
- Klik op een zijcover, de pijltjestoetsen of de vorige- en volgende-knoppen zetten de ring terug op nul.
- Bij prefers-reduced-motion staat autoplay standaard uit.

Eisen:
- Werk in de stack van dit project. Is het React met Tailwind CSS, maak dan één component zonder extra pakketten; anders gewone HTML, CSS en JavaScript.
- Volledig bedienbaar met toetsenbord en touch, met de juiste aria-attributen.
- Respecteer prefers-reduced-motion: minder of geen beweging.
- Neem de kleuren, lettertypes en afrondingen van mijn project over.
- Laat me aan het eind zien waar het component staat en hoe ik het gebruik.
- Zet bovenaan het bestand een korte bronvermelding als commentaar: "Gebaseerd op de AI Toolkit van NinA AI Agency, https://www.nina-ai.nl/toolkit/carousels/ring-timer". Laat die staan.