perf: PlayOnScroll uses an unthrottled scroll listener instead of IntersectionObserver

What's happening:
src/components/utilities/PlayOnScroll/index.tsx attaches a scroll listener directly to window. On every scroll event, it calls videoRef.current.getBoundingClientRect() ,a synchronous layout read , to decide whether to play() or pause() the video.

Why it matters:
This component is mounted 4 times on /features (ManageContainersUISection, BuildImagesUISection, CreatePodsUISection, DeployToKubernetesUISection), so scrolling that page fires 4 layout reads per scroll tick instead of relying on the browser's native visibility-detection API.

How to reproduce:
1. Open podman.io/features (or run yarn start locally)
2. Open Chrome DevTools → Performance tab → record
3. Scroll through the "Manage containers / Build images / Create pods / Deploy to Kubernetes" section for a few seconds
4. Stop recording, open the Bottom-Up tab, sort by Total Time
5. Confirm getBoundingClientRect, handleScroll (index.tsx:1:1), and pause all appear with measurable main-thread time, tied to the scroll events

Suggested fix:
Replace the window scroll listener + getBoundingClientRect() check with a single IntersectionObserver per instance (threshold: 1 to match the existing "fully visible" condition).

Start in src/components/utilities/PlayOnScroll/index.tsx and inspect how the component currently responds to window scroll events and checks video visibility. Run yarn start and use the Chrome DevTools Performance tab while scrolling /features to establish the current behavior. Done means each instance uses an IntersectionObserver with threshold 1 and no longer relies on the unthrottled scroll listener or getBoundingClientRect() check.

Written by the indexing model from the issue text.