3D image ring

Build a carousel: 3D image ring.

What it is: Images in a slowly turning ring. Drag it around and it keeps spinning with inertia.

Behaviour:
- Ten 140 x 190 px cards in a ring around the vertical axis: each card rotateY(i * 36deg) translateZ(radius), in 1000px perspective and slightly tilted (rotateX -6deg).
- The ring turns slowly on its own (about 8 degrees per second) until you touch it; it stops on hover, off-screen and with prefers-reduced-motion.
- Dragging horizontally turns the ring. On release it keeps spinning with the built-up velocity and slows down with friction, then gently snaps to the nearest card.
- Cards at the back get darker and more transparent (based on their angle), so the front stays readable.
- Below the ring the title of the card in front, and buttons to turn one card further; the arrow keys do the same.

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-3d". Keep it there.