animation-play-state: пауза hero-анимации вне viewport

animation-play-state: paused останавливает бесконечный фоновый loop без удаления animation — вкладка в фоне не тратит CPU.

В JS: element.style.animationPlayState = document.hidden ? "paused" : "running".

- [animation-play-state — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state) — running и paused.

- [Page Visibility API — MDN](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) — document.hidden.

---

## Видео

Для <video> используйте .pause() — play-state относится к CSS-анимациям.