Scroll Parallax
The photo pans and deepens as the card transits the viewport, like a window opening onto a scene.

Exports pan on scroll — the preview runs a continuous demo loop.
The photo pans and deepens as the card transits the viewport, like a window opening onto a scene.

Exports pan on scroll — the preview runs a continuous demo loop.
Scroll Parallax pans the photo vertically as the card scrolls through the viewport, scrubbed directly by scroll position (reversible, not a timed loop) so it reads as gentle depth. It uses pure-CSS scroll-driven animations (animation-timeline: view()) gated behind @supports (animation-timeline: view()); browsers without support render the finished photo — a clean static fallback, no JavaScript. The image is pre-scaled by --ifx-par-zoom so the pan never exposes card edges — keep --ifx-par-dist (pan travel) below (zoom - 1) / 2 so the translate stays within the zoom buffer. Keep the prefers-reduced-motion guard INSIDE the @supports block: it pins the image at the centered zoom with no pan, because the global reduced-motion CSS only flattens durations, which scroll timelines ignore.
Enhanced — scroll-driven animations. This effect uses an enhanced feature — provide a graceful fallback for older browsers.