Act as a senior front-end engineer with a motion design eye. Add a restrained parallax effect to {{page_or_feature}} in my {{tech_stack}} project, in this style: {{visual_style}}. Read the page's components and styles first, and tell me if any parallax or scroll animation already exists. What moves and why: one background image drifts slightly slower than the page, adding depth to the first screen and nothing more. One place on the site, two layers at most. Values: - The image moves at about 90% of scroll speed, a maximum offset of 48px across the section's height - Linear and tied directly to scroll; no easing lag that makes it feel floaty - The image is oversized by the offset, so no gap ever shows at the edges - Text, buttons and the foreground never move independently Build: - CSS scroll-driven animations with a view timeline where supported, animating transform translateY only - Where unsupported, the image simply stays still. No scroll event listeners, no library - Never background-attachment fixed, which repaints on every scroll and fails on iOS Turn it off: - Under prefers-reduced-motion: reduce - Below 768px and on touch devices, where it costs battery and adds little - In both cases the image sits still, cropped the same way No layout shift: the section keeps its height, the image has its dimensions set, and if it's the Largest Contentful Paint element it loads with high priority, not lazily. Performance budget: 60fps on a mid-range phone with 4x CPU throttling, no long tasks, and Largest Contentful Paint unchanged. Avoid: parallax on text, layers flying at different speeds, zooming backgrounds, and parallax on every section. Finish with the values used, where it's off and why, and the files changed.