Mouse-parallax animation for a single image. Vanilla JS + CSS only (CodePen delivery)

I have a hero image split into 3 separate layers (I'll provide all files, including transparent PNGs). I want an interactive mouse parallax / 3D tilt effect built from them.

How it should behave:

- The layers respond to the mouse moving anywhere on the screen (not just on hover).
- Each layer moves at a different depth/speed to create a layered parallax sense of dimension — the closest layer (the helmet) moves most, the back layer least (or stays static, your call to look best).
- Motion should be smooth and eased (lerp/easing), never jumpy — it should feel premium.
- Optionally a subtle 3D perspective tilt on the front layer as it follows the cursor.
Graceful fallback on touch devices (effect can simply disable).

Requirements:

- Vanilla JavaScript and CSS only. No libraries, frameworks, or plugins (no jQuery, GSAP, Tilt.js, etc.).
- Clean, commented, copy-paste-ready code on CodePen or similar.
- Layers correctly stacked and aligned so the composition still reads as the original image at rest.

Deliverable:

- A working CodePen (or similar) link with the HTML, CSS, and JS, so I can copy the code directly.

You're welcome to use AI tools to help write the code, as long as the final result works, is library-free, and matches the behavior above.