Cover flow with reflections

Build a carousel: Cover flow with reflections.

What it is: The classic: the centre cover faces you, the rest turn away in perspective, with a reflection underneath.

Behaviour:
- Row of 200 px square covers in 3D perspective (perspective 1100px): the centre one faces you, the covers on either side turn about 58 degrees away and stack closely together.
- Under each cover a reflection: the same image flipped vertically, inside a container with a mask from 28% opacity to transparent.
- Dragging with pointer events (mouse and touch) moves the row smoothly, also halfway between two covers; past the start and end it is elastic. Releasing snaps to the nearest cover, a fast flick moves one extra. Only capture the pointer after 6 px of movement, so a normal click reaches the cover.
- Click a side cover to bring it to the centre. Horizontal trackpad swipes, the arrow keys, Home and End also work.
- Below the row the title and subtitle of the active cover (aria-live="polite"), plus previous and next buttons with a counter like 05 / 09.

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/coverflow". Keep it there.