(function ($) {
    "use strict";

    $(window).on('elementor/frontend/init', () => {
        elementorFrontend.hooks.addAction('frontend/element_ready/motiox-circle-animation.default', ($scope) => {
            let $items = $scope.find('.elementor-circlebox-item-wrapper .circle-two .circle-two-item');
            let widget = $scope[0];
            console.log($items);

            if ($items.length === 0) {
                console.log('Elements not found!');
                return;
            }

            $items.css({
                '--e-transform-transition-duration': '500ms',
                'transition': 'transform var(--e-transform-transition-duration) ease'
            });

            $(window).on('scroll', function() {
                let rect = widget.getBoundingClientRect();
                let windowHeight = $(window).height();

                if (rect.top >= 0 && rect.top <= windowHeight) {
                    let scrollTop = $(window).scrollTop();

                    $items.each(function (index, item) {
                        let $item = $(item);

                        let translateX = scrollTop * 0.05 * (index % 3 === 0 ? 1 : -1);

                        $item.css({
                            '--translateX': translateX + 'px',
                            'transform': 'translateX(var(--translateX))',
                        });
                    });
                }
            });
        });
    });
})(jQuery);