Flashlight reveal

Build a cinematic website effect: Flashlight reveal.

What it is: A dark hero where your cursor is a flashlight. Wherever you shine, a colourful scene and a hidden message appear.

Behaviour:
- Two stacked layers: below a colourful scene (gradients, shapes and a heading), on top an almost black layer with a dimmed version of the same heading.
- The top layer gets a mask-image with a radial gradient around the cursor (radius about 160 px, soft edge), so you see the scene through the dark. The light spot follows the cursor smoothly (lerp in requestAnimationFrame).
- On pointerdown the beam grows, on release it shrinks again; works with touch too.
- Without a mouse the light spot wanders slowly across the area (a Lissajous path), so the page never looks still.
- With prefers-reduced-motion the light spot rests in the centre and follows the mouse directly, without lag.

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