$(document).ready(function() {
    function initializeSlider(sliderId, reverse) {
        const sliderWrapper = $(`${sliderId} .slider-wrapper`);
        const slides = $(`${sliderId} .slide`);
        const slideCount = slides.length;
        let slideWidth = slides.outerWidth(true);
        let wrapperWidth = slideCount * slideWidth;


        sliderWrapper.css('width', wrapperWidth + 'px');


        let animationSpeed = 60;


        function updateSlideScaling() {
            const sliderWidth = $(`${sliderId} .slider`).width();
            const center = sliderWidth / 2;


            slides.each(function() {
                const slide = $(this);
                const slideCenter = slide.offset().left + (slide.find('img').width() / 2);
                const distanceToCenter = Math.abs(center - slideCenter);
                const scale = 0.8 + (1 - Math.min(distanceToCenter / center, 1)) * 0.2;
                const boxShadowIntensity = 1 - Math.min(distanceToCenter / center, 1);
                slide.find('img').css({
                    'transform': `scale(${scale})`,
                    'box-shadow': `0 4px 20px rgba(0, 0, 0, ${boxShadowIntensity * 0.5})`
                });
            });


            requestAnimationFrame(updateSlideScaling);
        }


        function adjustAnimationSpeed() {
            const screenWidth = $(window).width();


            if (screenWidth <= 460) {
                animationSpeed = 30;
                slides.css('margin', '0');
            } else if (screenWidth <= 800) {
                animationSpeed = 30;
                slides.css('margin', '0 5px');
            } else {
                animationSpeed = 60;
                slides.css('margin', '0 10px');
            }


            slideWidth = slides.outerWidth(true);
            wrapperWidth = slideCount * slideWidth;


            sliderWrapper.css('width', wrapperWidth + 'px');


            const keyframes = `
                @keyframes ${reverse ? 'slide_reverse' : 'slide'} {
                    0% { transform: translateX(${reverse ? 'calc(-' + (wrapperWidth / 2) + 'px - 20px)' : '0'}); }
                    100% { transform: translateX(${reverse ? '0' : 'calc(-' + (wrapperWidth / 2) + 'px - 20px)'}); }
                }
            `;


            $('style#dynamic-keyframes-' + sliderId.replace('#', '')).remove();
            $('<style id="dynamic-keyframes-' + sliderId.replace('#', '') + '">').html(keyframes).appendTo('head');


            sliderWrapper.css('animation-duration', `${animationSpeed}s`);
        }


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


        adjustAnimationSpeed();
        requestAnimationFrame(updateSlideScaling);
    }


    initializeSlider('#slide_1', false);
    initializeSlider('#slide_2', true);
});