(function($){
    var WidgetSPSC = function( $scope, $ ) {
        var $wrapper = $scope.find('.crt-spsc-wrapper');
        var $circle = $scope.find('.crt-spsc-circle');
        
        if(!$wrapper.length || !$circle.length) {
            return;
        }

        if(typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
            return;
        }

        var $smallText = $scope.find('.crt-spsc-text-small');
        var $largeText = $scope.find('.crt-spsc-text-large');
        var $expandedBg = $scope.find('.crt-spsc-inner-expanded');

        var tl = gsap.timeline({
            scrollTrigger: {
                trigger: $wrapper,
                start: "center center",
                end: "+=150%",
                pin: true,
                scrub: 1,
                invalidateOnRefresh: true,
            }
        });

        gsap.set($circle, { scale: 1 });

        tl.to($circle, {
            scale: function() {
                var circleWidth = $circle.outerWidth() || 200;
                var windowDiag = Math.sqrt(Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2));
                return (windowDiag / circleWidth) * 1.2;
            },
            ease: "power2.inOut",
            duration: 1
        }, 0);

        tl.to($smallText, {
            color: function() { return window.getComputedStyle($largeText[0]).color; },
            fontSize: function() { return window.getComputedStyle($largeText[0]).fontSize; },
            fontWeight: function() { return window.getComputedStyle($largeText[0]).fontWeight; },
            letterSpacing: function() { 
                var ls = window.getComputedStyle($largeText[0]).letterSpacing; 
                return ls !== 'normal' ? ls : "0px"; 
            },
            ease: "power2.inOut",
            duration: 1
        }, 0);

        tl.to($expandedBg, {
            opacity: 1,
            ease: "power2.inOut",
            duration: 1
        }, 0);
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/crt-scroll-pin-scale-circle.default', WidgetSPSC);
    });
})(jQuery);
