Исправление анимации на сайте

В существующей реализации анимации в одном из блоков сайта обнаружена проблема с синхронизацией и временем запуска.

Проблемы для устранения

• Разная задержка появления элементов: Прямоугольник и заголовок отображаются сразу, а основной текст появляется с заметной задержкой. Проблема не связана с прямыми настройками задержки (delay) в коде.
• Некорректный запуск на мобильных устройствах: В макетах с одноколоночной структурой анимация должна запускаться только тогда, когда пользователь доскроллит до видимой области блока (принцип lazy-load для анимаций). В текущей версии она срабатывает заранее.

Требования к исправлению

• Устранить разрыв во времени появления элементов анимации. Все части блока (фон, заголовок, текст) должны появляться синхронно или с минимальной, незаметной глазу, последовательностью.
• Реализовать адаптивный запуск анимации: на одноколоночных макетах (мобильные устройства) анимация должна активироваться при попадании блока в область видимости viewport.
• Решение должно быть кроссбраузерным и стабильно работать на всех основных разрешениях экрана.
• Исправление должно быть выполнено аккуратно, без нарушения текущей вёрстки и функциональности сайта.

Ожидаемый результат

Плавная, синхронизированная анимация, которая корректно запускается в нужный момент на всех типах устройств.