<style>
    .paint-text .tn-atom span {
        transition: opacity 0.5s;
    }
</style>
<script>
    function waitSelector(selector, callback) {
        const intervalId = setInterval(()=>{
            let element = document.querySelector(selector)
            if (element != null) {
                callback(element);
                clearInterval(intervalId);
            }
        }
        , 100);
    }

    $(()=>{
        let $container = $(".paint-text").css({
            "position": "relative"
        });
        /*let textBackground = "white";*/
        let textBackground = "linear-gradient(132deg, #0070FF 0%, #06ECC3 100%)";

        waitSelector($(".tn-atom__sticky-wrapper", $container).selector, (stickyWrapper)=>{
            let $stickyWrapper = $(stickyWrapper);

            console.log($stickyWrapper);

            let $rec = $container.closest(".t-rec");

            let $coloredText = $(".tn-atom", $container).css({
                "position": "absolute"
            });

            let $curtainText = $coloredText.clone();

            $coloredText.css({
                "background": textBackground,
                "-webkit-background-clip": "text",
                "-webkit-text-fill-color": "transparent"
            });

            $coloredText.html($coloredText.html().replace(/\S/g, "<span>$&</span>"));
            // $curtainText.html($curtainText.html().replace(/\S/g, "<span>$&</span>"));

            let coloredTokens = $(">span", $coloredText).toArray().map($);
            // let curtainTokens = $(">span", $curtainText).toArray().map($);

            let textInitialOffset = $container.offset().top - parseInt($container.attr("data-animate-fix-trgofst") || 0);
            //let textInitialOffset = parseInt($container.attr("data-field-width-value"));
            let fixDistance = parseInt($container.attr("data-animate-fix-dist"));

            $(window).scroll(()=>{
                let scrollOffset = window.scrollY - textInitialOffset;

                let fillProgress = scrollOffset / fixDistance;
                fillProgress = fillProgress < 0 ? 0 : fillProgress > 1 ? 1 : fillProgress;

                // console.log(fillProgress)

                for (let i = 0; i < coloredTokens.length; i++) {
                    // console.log((i + 1) / coloredTokens.length)
                    if ((i + 1) / coloredTokens.length <= fillProgress) {
                        coloredTokens[i].css({
                            "opacity": 1
                        });
                        // curtainTokens[i].css({"opacity": 0});
                    } else {
                        coloredTokens[i].css({
                            "opacity": 0
                        });
                        // curtainTokens[i].css({"opacity": 1});
                    }
                }
            }
            ).scroll()

            $stickyWrapper.prepend($curtainText);
        }
        )
    }
    )
</script>