Решение проблемы визуального наложения анимированной стрелки на прозрачный блок

В представленном примере (CodePen) реализована анимация, при которой стрелка собирается воедино во время скроллинга. Возникает две ключевые проблемы:

• Стрелка не должна накладываться на полупрозрачный текстовый блок, так как это создаст нежелательное смешение цветов.
• Стрелка также не должна заходить под этот блок, иначе её будет видно сквозь прозрачную область.

Основной вопрос: Каким образом можно заполнить пространство между красными сегментами стрелки, чтобы избежать смешения с фоном и сохранить целостность элемента?

Возможные направления для решения:

1. Использование маски (CSS mask/clip-path): Можно применить маску к стрелке, которая будет «вырезать» область текстового блока, предотвращая любое наложение.
2. Динамический фон для стрелки: Задать для стрелки сплошной фон, который совпадает с цветом основного фона страницы в области её анимации. Это создаст иллюзию, что стрелка находится на одном уровне с фоном, а не с текстовым блоком.
3. Корректировка z-index и контекста наложения: Тщательно выстроить порядок слоёв (z-index) и, возможно, использовать свойства, такие как isolation: isolate, для контроля над смешиванием цветов.
4. Графическое решение: Подготовить SVG-стрелку с уже заполненной внутренней областью, которая будет визуально независимым объектом.

Наиболее чистым решением, вероятно, будет комбинация первого и второго подходов: использование маски для точного ограничения области отрисовки стрелки и обеспечение у неё правильного сплошного фона.