( function( $ ) {
    var pxl_widget_elementor_handler = function( $scope, $ ) {
        /* Button Effect */
        var wobbleElements = document.querySelectorAll('.pxl-wobble');

wobbleElements.forEach(function(el) {
    el.addEventListener('mouseover', function() {
        if (!el.classList.contains('animating') && !el.classList.contains('mouseover')) {
            el.classList.add('animating', 'mouseover');

            // Split the text into words instead of letters
            var words = el.innerText.trim().split(/\s+/);
            setTimeout(function() {
                el.classList.remove('animating');
            }, (words.length + 1) * 150); // adjust timing for words

            var animationName = el.dataset.animation;
            if (!animationName) {
                animationName = "pxl-jump";
            }

            el.innerText = ''; // Clear element content

            words.forEach(function(word, index) {
                // Create word span
                var wordSpan = document.createElement('span');
                wordSpan.className = 'word';
                wordSpan.textContent = word;
                el.appendChild(wordSpan);

                // Add space after word (except last one)
                if (index < words.length - 1) {
                    el.appendChild(document.createTextNode(' '));
                }
            });

            // Animate each word
            var wordElements = el.querySelectorAll('.word');
            wordElements.forEach(function(word, i) {
                setTimeout(function() {
                    word.classList.add(animationName);
                }, 150 * i);
            });
        }
    });

    el.addEventListener('mouseout', function() {
        el.classList.remove('mouseover');
    });
});


        // Custom Section Background Effect
        function SectionBGParallax() {
            if ($scope.find('.pxl-elementor-bg-parallax').length) {
                var $scopePR = $scope;
                var lFollowX = 0,
                lFollowY = 0,
                x = 0,
                y = 0,
                friction = 1 / 30;

                function moveBackground() {
                    x += (lFollowX - x) * friction;
                    y += (lFollowY - y) * friction;

                    translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

                    $scopePR.find('.pxl-elementor-bg-parallax .parallax-element').css({
                        '-webit-transform': translate,
                        '-moz-transform': translate,
                        'transform': translate
                    });

                    window.requestAnimationFrame(moveBackground);
                }

                $scopePR.on('mousemove', function (e) {
                    var $this = $(this);
                    var lMouseX = Math.max(-100, Math.min(100, $this.width() / 2 - e.clientX));
                    var lMouseY = Math.max(-100, Math.min(100, $this.height() / 2 - e.clientY));
                    lFollowX = (20 * lMouseX) / 100;
                    lFollowY = (10 * lMouseY) / 100;
                });

                moveBackground();
            }
        }

        if (!$scope.find('.pxl-elementor-bg-scroll').length && $scope.hasClass('pxl-section-bg-scroll')) {
            $scope.prepend('<div class="pxl-elementor-bg-scroll"><div class="scroll-element" data-parallax=\'{"y": -20}\'></div></div>');
        }
        if (!$scope.find('.pxl-elementor-bg-parallax').length && $scope.hasClass('pxl-section-bg-parallax')) {
            $scope.prepend('<div class="pxl-elementor-bg-parallax"><div class="parallax-element"></div></div>');
        }

        SectionBGParallax();

        // Custom Effect
        if($scope.find('.pxl-image-tilt').length) {
            $scope.find('.pxl-image-tilt').each(function () {
                var $this = $(this);
                VanillaTilt.init($this[0], {
                    max: 3,
                    speed: 1000,
                    glare: false,
                    "max-glare": 0.5,
                    perspective: 1400,
                    easing: "cubic-bezier(.03, .98, .52, .99)",
                    reset: true
                });
            });
        }

        $scope.find('.pxl-element-parallax').each(function () {
            var $this = $(this),
            dampingFactor = 0.1;

            if($this.closest('.pxl-parent-element-parallax').length) {
                var pare2 = $this.closest('.pxl-parent-element-parallax');
                pare2.mousemove(function(e) {
                    var offset = $this.offset();
                    var mouseX = e.pageX - offset.left;
                    var mouseY = e.pageY - offset.top;
                    var translateX = (mouseX - $this.width() / 2) * dampingFactor;
                    var translateY = (mouseY - $this.height() / 2) * dampingFactor;

                    var translateTransform = 'translate(' + translateX + 'px, ' + translateY + 'px)';
                    $this.css('transform', translateTransform);
                });
                pare2.mouseleave(function () {
                    $this.css('transform', 'none');
                });
            } else {
                $this.mousemove(function (e) {
                    var offset = $this.offset();
                    var mouseX = e.pageX - offset.left;
                    var mouseY = e.pageY - offset.top;
                    var translateX = (mouseX - $this.width() / 2) * dampingFactor;
                    var translateY = (mouseY - $this.height() / 2) * dampingFactor;

                    var translateTransform = 'translate(' + translateX + 'px, ' + translateY + 'px)';
                    $this.css('transform', translateTransform);
                });
                $this.mouseleave(function () {
                    $this.css('transform', 'none');
                });
            }

        });

        $scope.find('.pxl-video-player .pxl-item--title').each(function () {
            var animationDuration = 2 * 1000;
            var h2Element = $(this);
            var text = h2Element.text();
            h2Element.empty();
            for (var i = 0; i < text.length; i++) {
                var char = text.charAt(i);
                var span = $("<span>" + char + "</span>");
                h2Element.append(span);

                var delay = (i / text.length) * animationDuration;
                span.css('animation-delay', delay + 'ms');
            }
        });

        $scope.find('.pxl-contact-info1').each(function () {
            var wcont1 = $(this),
            g1_btn = wcont1.find('.pxl-item--link a');
            g1_btn.hover(function () {
                wcont1.toggleClass('active');
            });
        });

        $scope.find('.pxl-meta-box1').each(function () {
            var wcont1 = $(this),
            g1_btn = wcont1.find('.item--title a');
            g1_btn.hover(function () {
                $(this).parents('.list--item').toggleClass('active');
            });

            var $checkItems = wcont1.find('.pxl-item--footer');

            function checkScrollPosition() {
                var pxl_scroll_top = $(window).scrollTop(),
                viewportBottom = pxl_scroll_top + $(window).height(),
                elementTop = $checkItems.offset().top,
                elementBottom = elementTop + $checkItems.outerHeight();

                if (elementTop < viewportBottom && elementBottom > pxl_scroll_top) {
                    $checkItems.addClass('visible');
                } else {
                    $checkItems.removeClass('visible');
                }
            }

            checkScrollPosition();

            $(window).on('scroll', function () {
                checkScrollPosition();
            });

        });

        $scope.find('.pxl-meta-box3').each(function () {
            var wcont1 = $(this),
            g1_btn = wcont1.find('.item--title a');
            g1_btn.hover(function () {
                $(this).parents('.list--item').toggleClass('active');
            });

            var $checkItems = wcont1.find('.pxl-item--footer');

        });

        $scope.find('.pxl-meta-box4').each(function () {
            var $this = $(this),
            particle = $this.find('.item--particle'),
            dampingFactor = 0.1;

            $this.mousemove(function (e) {
                var offset = $(this).offset();
                var mouseX = e.pageX - offset.left;
                var mouseY = e.pageY - offset.top;
                var translateX = (mouseX - $(this).width() / 2) * dampingFactor;
                var translateY = (mouseY - $(this).height() / 2) * dampingFactor;

                var translateTransform = 'translate(' + translateX + 'px, ' + translateY + 'px)';
                particle.css('transform', translateTransform);
            });

            $this.mouseleave(function () {
                particle.css('transform', 'none');
            });
        });



        $scope.find('.pxl-image-single1 .bg-image').each(function () {
            var $thisItem = $(this),
            radiusValue = $thisItem.data('border-radius');

            var radiusArray = radiusValue.split(' ');

            var borderRadiusString = `${radiusArray[1]} ${radiusArray[2]} ${radiusArray[3]} ${radiusArray[4]}`;

            const timeline1 = gsap.timeline({
                defaults: {
                    duration: 3,
                    stagger: {
                        each: 0.1,
                        from: "end"
                    },
                    ease: "power2.inOut"
                },
                scrollTrigger: {
                    trigger: $thisItem,
                    scrub: 2,
                    start: "top center",
                    end: "bottom center",
                    toggleActions: "restart none none none"
                }
            });

            if ($(window).width() >= 1200) {
                timeline1
                .from($thisItem, { borderRadius: borderRadiusString })
                .to($thisItem, { borderRadius: "0" });
            }
        });

        $scope.find('.pxl-slider-carousel1').each(function () {
            var $this = $(this),
            particel01 = $this.find('.particle-01'),
            particel02 = $this.find('.particle-02'),
            particel03 = $this.find('.particle-03'),
            particel05 = $this.find('.particle-05'),
            particel07 = $this.find('.particle-07'),
            particel08 = $this.find('.particle-08'),
            particel09 = $this.find('.particle-09'),
            paths = particel01.find('path');

            $.fn.parallax = function(resistance, mouse) {
                $el = $(this);
                TweenLite.to($el, 0.2, {
                    x: -((mouse.clientX - window.innerWidth / 2) / resistance),
                    y: -((mouse.clientY - window.innerHeight / 2) / resistance)
                });
            };
            $this.mousemove(function(e) {
                if ($this.hasClass('style1')) {
                    if (particel07.length) {
                        particel07.parallax(10, e);
                    }
                    if (particel08.length) {
                        particel08.parallax(20, e);
                    }
                }
            });

            paths.css("clip-path", "inset(100% 0 0 0)");

            setTimeout(function(){
                paths.css("clip-path", "inset(0 0 0 0)");
            }, 300);

            function checkScrollPosition() {
                var pxl_scroll_top = $(window).scrollTop(),
                viewportBottom = pxl_scroll_top + $(window).height(),
                elementTop = particel01.offset().top,
                elementBottom = elementTop + particel01.outerHeight();

                paths.each(function() {

                    if (elementTop < viewportBottom && elementBottom > pxl_scroll_top) {
                        particel01.addClass('visible');
                        $(this).css("clip-path", "inset(0 0 0 0)");
                    } else {
                        particel01.removeClass('visible');
                        $(this).css("clip-path", "inset(100% 0 0 0)");
                    }

                });
            }

            checkScrollPosition();

            $(window).on('scroll', function () {
                checkScrollPosition();
            });

            if (particel01.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel01, { translateY: "0" })
                .to(particel01, { translateY: "10%" });
            }

            if (particel02.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel02, { translateY: "0", scale: "1" })
                .to(particel02, { translateY: "-10%", scale: "0" });
            }

            if (particel03.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel03, { translateY: "0" })
                .to(particel03, { translateY: "10%" });
            }

            if (particel05.length) {
                gsap.set(particel05, {scale: 0.5})
                gsap.to(particel05, 1, {scale: 1.5, ease: "expo.inOut", delay: 1.5})
                gsap.to(particel05, 1.5, {scale: 1, ease: "elastic.out(1.3,1)", delay: 1.5})
            }

            if (particel09.length) {
                gsap.set(particel09, {scale: 0.5})
                gsap.to(particel09, 1, {scale: 1.5, ease: "expo.inOut", delay: 1.5})
                gsap.to(particel09, 1.5, {scale: 1, ease: "elastic.out(1.3,1)", delay: 1.5})

                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel09, { translateX: "0" })
                .to(particel09, { translateX: "100%" });
            }

        });

        $scope.find('.pxl-slider-carousel2').each(function () {
            var $thisSlide = $(this),
            slideInner = $thisSlide.find(".pxl-carousel-inner"),
            particel01 = $thisSlide.find('.item--particle-01'),
            particel04 = $thisSlide.find('.item--particle-04');

            function resizeThumbs() {
                var slideImgWidth = $thisSlide.find('.item--image img').width(),
                slideThumbs = $thisSlide.find('.pxl-swiper-thumbs'),
                slideThumbsWidth = $thisSlide.find('.pxl-swiper-thumbs img').width();
                slideThumbs.css({
                    "transform": "translateX(" + (slideImgWidth - slideThumbsWidth) + "px)"
                });
            }

            resizeThumbs();

            $(window).on('resize', function () {
                resizeThumbs();
            });

            const timeline1 = gsap.timeline({
                defaults: {
                    duration: 3,
                    stagger: {
                        each: 0.1,
                        from: "end"
                    },
                    ease: "power2.inOut"
                },
                scrollTrigger: {
                    trigger: $thisSlide,
                    scrub: 2,
                    start: "top center",
                    end: "bottom center",
                    toggleActions: "restart none none none"
                }
            });

            timeline1
            .from(particel01, { rotate: "0deg" })
            .to(particel01, { rotate: "90deg" });

            const timeline = gsap.timeline({
                defaults: {
                    duration: 3,
                    stagger: {
                        each: 0.1,
                        from: "end"
                    },
                    ease: "power2.inOut"
                },
                scrollTrigger: {
                    trigger: $thisSlide,
                    scrub: 2,
                    start: "top center",
                    end: "bottom center",
                    toggleActions: "restart none none none"
                }
            });

            timeline
            .from(particel04, { y: "0%" })
            .to(particel04, { y: "100%" });


        });

        if ($scope.find('.pxl-slider-1').length) {
            $scope.find('.pxl-slider-1').each(function () {
                var $thisSlide =$(this),
                imageInner = $thisSlide.find('.image--inner'),
                imageCanvas = $thisSlide.find('.image--inner canvas');


                if (imageInner.length) {
                    const timeline1 = gsap.timeline({
                        defaults: {
                            duration: 3,
                            stagger: {
                                each: 0.1,
                                from: "end"
                            },
                            ease: "power2.inOut"
                        },
                        scrollTrigger: {
                            trigger: $thisSlide,
                            scrub: 2,
                            start: "top center",
                            end: "bottom center",
                            toggleActions: "restart none none none"
                        }
                    });

                    timeline1
                    .from(imageInner, { borderRadius: "0" })
                    .to(imageInner, { borderRadius: "50%" });
                }

                if (imageCanvas.length) {
                    const timeline2 = gsap.timeline({
                        defaults: {
                            duration: 3,
                            stagger: {
                                each: 0.1,
                                from: "end"
                            },
                            ease: "power2.inOut"
                        },
                        scrollTrigger: {
                            trigger: $thisSlide,
                            scrub: 2,
                            start: "top center",
                            end: "bottom center",
                            toggleActions: "restart none none none"
                        }
                    });

                    timeline2
                    .from(imageCanvas, { translateY: "0" })
                    .to(imageCanvas, { translateY: "10%" });
                }

                if ($thisSlide.find('.item--particle-02, .item--particle-03').length) {
                    var particel01 = $thisSlide.find('.item--particle-02, .item--particle-03');

                    const timeline3 = gsap.timeline({
                        defaults: {
                            duration: 3,
                            stagger: {
                                each: 0.1,
                                from: "end"
                            },
                            ease: "power2.inOut"
                        },
                        scrollTrigger: {
                            trigger: $thisSlide,
                            scrub: 2,
                            start: "top center",
                            end: "bottom center",
                            toggleActions: "restart none none none"
                        }
                    });

                    timeline3
                    .from(particel01, { scale: "1" })
                    .to(particel01, { scale: "0.5" });

                }

            });
        }

        $scope.find('.pxl-image-box1').each(function () {
            var $this = $(this),
            particel01 = $this.find('.item--particle1'),
            particel02 = $this.find('.item--particle2'),
            particel03 = $this.find('.item--particle3'),
            particel04 = $this.find('.item--particle4');

            if (particel01.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel01, { top: "-29px" })
                .to(particel01, { top: "0px" });
            }

            if (particel02.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel02, { top: "-16px" })
                .to(particel02, { top: "0" });
            }

            if (particel03.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel03, { left: "-17px" })
                .to(particel03, { left: "0" });
            }

            if (particel04.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $this,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(particel04, { top: "19%" })
                .to(particel04, { top: "50%" });
            }

        });

        // Custom Draw SVG
        setTimeout(function() {
            if ($scope.find('.slide-draw-svg').length) {
                var $gridItems = $scope.find('.slide-draw-svg svg'),
                pxl_scroll_top = $(window).scrollTop(),
                viewportBottom = pxl_scroll_top + $(window).height();

                $gridItems.each(function() {
                    var $gridItem = $(this);
                    var elementTop = $gridItem.offset().top;
                    var elementBottom = elementTop + $gridItem.outerHeight();

                    var $svgPaths = $gridItem.find('path');
                    $svgPaths.each(function() {
                        var thisPath = $(this);
                        var pathLength = this.getTotalLength();
                        thisPath.attr('stroke-dasharray', pathLength);
                        thisPath.css("stroke-dashoffset", pathLength);

                        $(window).on('scroll', function () {
                            pxl_scroll_top = $(window).scrollTop();
                            viewportBottom = pxl_scroll_top + $(window).height();
                            elementTop = $gridItem.offset().top;
                            elementBottom = elementTop + $gridItem.outerHeight();
                            if (elementTop < viewportBottom && elementBottom > pxl_scroll_top) {
                                $gridItem.addClass('visible');
                                thisPath.css("stroke-dashoffset", 0);
                            } else {
                                $gridItem.removeClass('visible');
                                thisPath.css("stroke-dashoffset", pathLength);
                            }
                        });
                    });

                });
            }
        }, 200);

        $scope.find('.pxl-team-grid1, .pxl-team-carousel1').each(function () {
            $(this).hover(function () {
                var front = $(this).find('.pxl-social--button');
                front.click(function () {
                    $(this).toggleClass('active').parents('.pxl-item--image').find('.pxl-item--social').toggleClass('active');
                });
            });
        });

        // Typewrite effect
        if (!$scope.find('.pxl-typewritered').length && $scope.find('.pxl-typewriter-fade').length) {
            $scope.find('.pxl-typewriter-fade').each(function () {
                var $this = $(this);
                var typeSpeed = $this.data('type-speed');
                var changeSpeed = $this.data('change-speed');

                var firstRun = true;
                var container = $this.parent();
                var item_text = $this.find(".item-text");
                var texts = item_text.map(function () {
                    return $(this).text();
                }).get();
                var currentIndex = 0;
                var maxHeight = container.height();

                $this.empty();

                function runAnimation() {
                    var currentText = texts[currentIndex];
                    $this.empty();
                    for (var i = 0; i < currentText.length; i++) {
                        var charSpan = $('<span class="writer" style="animation: pxl_fadeIn 0.5s linear ' + (i * (typeSpeed / currentText.length) / 1000) + 's forwards;">' + currentText[i] + '</span>');
                        $this.append(charSpan);
                    }
                    currentIndex = (currentIndex + 1) % texts.length;

                    var newHeight = container.height();
                    if (newHeight > maxHeight) {
                        container.css("min-height", newHeight);
                        maxHeight = newHeight;
                    }
                }

                if (firstRun) {
                    runAnimation();
                    firstRun = false;
                }
                setInterval(runAnimation, changeSpeed);

                $this.addClass("pxl-typewritered");
            });
        }

        // Text Slip
        $scope.find('.pxl-text-slip1').each(function () {
            var $this = $(this),
            container = $this.find('.pxl-item--container');

            function updateParentMinHeight() {
                var totalHeight = 0;
                container.each(function () {
                    totalHeight += this.getBoundingClientRect().height;
                });
                $this.css('min-height', totalHeight + 'px');
            }

            updateParentMinHeight();

            $(window).resize(function () {
                updateParentMinHeight();
            });

            container.each(function () {
                var $thisItem = $(this),
                transformSpeed = $thisItem.data('transform-speed'),
                rotateSpeed = $thisItem.data('rotate-speed'),
                itemInner = $thisItem.find(".pxl-item--inner .pxl-item--text"),
                itemIcon = $thisItem.find(".pxl-item--text svg, .pxl-item--text i");

                var windowHeight = $(window).height();

                $(window).scroll(function () {
                    var elementPosition = $this.offset().top;

                    var scrollAmount = ($(window).scrollTop() + windowHeight / 2 - elementPosition);

                    if ($thisItem.hasClass('pxl-slide-to-right')) {
                        var direction = (scrollAmount >= 0) ? 1 : -1;
                    } else {
                        var direction = (scrollAmount >= 0) ? -1 : 1;
                    }

                    var adjustedScrollAmount = Math.abs(scrollAmount) / transformSpeed * direction;

                    itemInner.css({
                        'transform': 'translateX(' + adjustedScrollAmount + 'px)'
                    });

                    var rotateAmount = Math.abs(scrollAmount) / rotateSpeed * 3 * direction;
                    itemIcon.css({
                        'transform': 'rotate(' + rotateAmount + 'deg)'
                    });
                });
            });

        });

        // Custom Elementor Frontend EditMode
        if (window.elementorFrontend.isEditMode()) {
            // SplitText
            Splitting();

            // Custom cursor
            $('.pxl-enable-cursor .pxl-drag-area *').css({
                "cursor": "auto",
            });

            // Image Slider WebGL
            $scope.find('.pxl-slider-1').each(function () {
                var $thisSlide = $(this),
                slideImg1 = $thisSlide.find('.item--image .image--inner');

                $thisSlide.find('.item--image .image-0').css('opacity', '1');

                if (slideImg1.length) {
                    gsap.set(slideImg1, {scale: 0})
                    gsap.to(slideImg1, 1, {scale: 1, ease: "expo.inOut", delay: 0.5})
                }

                var WebGL_vs = `varying vec2 vUv;
                void main() {
                    vUv = uv;
                    gl_Position = projectionMatrix
                    * modelViewMatrix
                    * vec4( position, 1.0 );
                }`;

                var WebGL_fs = `varying vec2 vUv;
                uniform sampler2D u_texture;
                uniform sampler2D u_displacement_map;
                uniform sampler2D u_next_texture;
                uniform float u_transition;
                uniform float u_direction;

                void main () {
                    vec2 uv_t = vec2(vUv.s, vUv.t);
                    vec4 displace_current = texture2D(u_texture, uv_t);
                    vec4 displace_next = texture2D(u_next_texture, uv_t);
                    vec2 uv_displaced1 = vec2(vUv.x + (displace_current.g * u_direction) * u_transition, vUv.y);
                    vec2 uv_displaced2 = vec2(vUv.x - (displace_next.g * u_direction) * (1. - u_transition), vUv.y);
                    vec4 texture = mix(texture2D(u_texture, uv_displaced1), texture2D(u_next_texture, uv_displaced2), u_transition);
                    gl_FragColor = texture;
                }`;

                const DRAGDISTANCE = 500;
                const DURATION = 1.5;
                let DRAGSIE = 0.5;

                if ($(window).width() < 1200) {
                    DRAGSIE = 0.2;
                }

                var imgWidth = $thisSlide.find('.item--image img');
                let renderWidth = imgWidth.width();
                let renderHeight = imgWidth.height();

                $(window).resize(function () {
                    renderWidth = imgWidth.width();
                    renderHeight = imgWidth.height();
                })

                class ThreeSlider {
                    constructor() {
                        this.$canvas = $thisSlide.find('canvas');
                        this.setup();
                    }

                    setup() {
                        this.setupThree();
                        this.setupSlider();
                        this.setupHammer();
                        this.loadTextures();
                        this.resize();
                        this.setupEventListeners();
                    }

                    setupThree() {
                        this.scene = new THREE.Scene();
                        this.camera = new THREE.PerspectiveCamera(59.8, renderWidth/renderHeight, 0.1, 1000);
                        this.renderer = new THREE.WebGLRenderer({
                            canvas: this.$canvas[0]
                        });

                        this.renderer.setSize(renderWidth, renderHeight);
                        this.renderer.setPixelRatio(window.devicePixelRatio);
                    }

                    setupSlider() {
                        this.slider = {
                            currentIndex: 0,
                            nextIndex: 0
                        };
                    }

                    setupHammer() {
                        this.hammer = new Hammer(this.$canvas[0]);
                    }

                    loadTextures() {
                        const loader = new THREE.TextureLoader();
                        let promises = [];
                        const images = $thisSlide.find('.image--inner img');
                        let urls = $.map(images, function(img) {
                            return $(img).attr('src');
                        });

                        for (let i = 0; i < urls.length; i++) {
                            const url = urls[i];
                            const promise = new Promise(resolve => {
                                loader.load(url, resolve);
                            });

                            promises.push(promise);
                        }

                        Promise.all(promises).then(textures => {
                            this.textures = textures;
                            this.setupPlane();
                        });
                    }

                    setupPlane() {
                        const vertex = WebGL_vs;
                        const fragment = WebGL_fs;

                        this.currentTexture = this.textures[this.slider.currentIndex];
                        this.nextTexture = this.textures[this.slider.nextIndex];

                        this.uniforms = {
                            time: { value: 1.0 },
                            resolution: { value: new THREE.Vector2() },
                            u_direction: { value: 1.0 },
                            u_transition: { value: 0.0 },
                            u_texture: { type: 't', value: this.currentTexture },
                            u_next_texture: { type: 't', value: this.nextTexture },
                            u_displacement_map: { type: 't', value: this.displacementMap }
                        }

                        this.displacementMap = new THREE.Uniform(null);
                        let dispImgElement = $thisSlide.find('.image--inner').data('displacement-map');
                        let displacementMapUrl = dispImgElement;
                        let loader = new THREE.TextureLoader().load(displacementMapUrl, result => {});

                        const geometry = new THREE.PlaneGeometry(1, 1, 1);
                        const material = new THREE.ShaderMaterial({
                            uniforms: this.uniforms,
                            vertexShader: vertex,
                            fragmentShader: fragment,
                        });
                        this.plane = new THREE.Mesh(geometry, material);
                        this.plane.position.z = -10;
                        this.plane.scale.set(10, 14, 10);
                        this.scene.add(this.plane);
                    }

                    resetProgress() {
                        TweenLite.to(this.uniforms.u_transition, .3, { value: 0, ease: Power3.easeOut, onComplete: () => {
                            this.isTweening = false;
                        } });
                    }

                    slide() {
                        const duration = DURATION * (1 - Math.abs(this.dragProgress));
                        TweenLite.to(this.uniforms.u_transition, duration, { value: 1, ease: Power3.easeOut, onComplete: () => {
                            this.slider.currentIndex = this.slider.nextIndex;
                            this.uniforms.u_texture.value = this.textures[this.slider.currentIndex];
                            this.uniforms.u_transition.value = 0;
                            this.isTweening = false;
                        }});
                    }

                    resize() {
                        this.width = renderWidth;
                        this.height = renderHeight;

                        this.renderer.setSize(this.width, this.height);
                        this.renderer.setPixelRatio(window.devicePixelRatio);

                        this.camera.aspect = this.width / this.height;
                        this.camera.updateProjectionMatrix();
                    }

                    setupEventListeners() {
                        $(window).on('resize', this.resize.bind(this));
                        this.hammer.on('pan', this.dragHandler.bind(this));
                        this.hammer.on('panend', this.dragendHandler.bind(this));
                        this.tick();
                    }

                    dragHandler(e) {
                        if (this.isTweening) return;

                        this.dragProgress = -e.deltaX / DRAGDISTANCE;

                        if (this.dragProgress >= 1 || this.dragProgress <= -1) return;

                        this.uniforms.u_direction.value = Math.sign(this.dragProgress);
                        this.uniforms.u_transition.value = Math.abs(this.dragProgress);
                        this.slider.nextIndex = this.mod(this.slider.currentIndex + Math.sign(this.dragProgress), this.textures.length);
                        this.uniforms.u_next_texture.value = this.textures[this.slider.nextIndex];
                    }

                    dragendHandler() {
                        this.isTweening = true;

                        if (this.dragProgress > DRAGSIE || this.dragProgress < -DRAGSIE) {
                            this.slide();
                        } else {
                            this.resetProgress();
                        }
                    }

                    tick() {
                        window.requestAnimationFrame(this.tick.bind(this));

                        this.renderer.render(this.scene, this.camera);
                    }

                    mod(n, m) {
                        return ((n % m) + m) % m;
                    }
                }

                const initialized = $thisSlide.data('initialized');
                if (!initialized && imgWidth.length) {
                    $thisSlide.data('initialized', true);
                    new ThreeSlider();
                }

            });

            // Check Scope Change
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {

                    // Custom Section Background Effect
                    if (!$scope.find('.pxl-elementor-bg-scroll').length && $scope.hasClass('pxl-section-bg-scroll')) {
                        $scope.prepend('<div class="pxl-elementor-bg-scroll"><div class="scroll-element" data-parallax=\'{"y": -20}\'></div></div>');
                    }
                    if (!$scope.find('.pxl-elementor-bg-parallax').length && $scope.hasClass('pxl-section-bg-parallax')) {
                        $scope.prepend('<div class="pxl-elementor-bg-parallax"><div class="parallax-element"></div></div>');
                        SectionBGParallax();
                    }

                });
            });
            var config = { attributes: true, attributeFilter: ['class'], childList: true, subtree: true };
            observer.observe($scope[0], config);

        }

    };

    $( window ).on( 'elementor/frontend/init', function() {
        elementorFrontend.hooks.addAction( 'frontend/element_ready/global', pxl_widget_elementor_handler );
    } );
} )( jQuery );