document.addEventListener('DOMContentLoaded', function() {
    const elementsLeft = document.querySelectorAll('.slide-in-left');
    const elementsRight = document.querySelectorAll('.slide-in-right');

    function checkPosition() {
        const windowHeight = window.innerHeight;
        const triggerPoint = windowHeight - 300;  // 200 пикселей от низа экрана

        elementsLeft.forEach(element => {
            const position = element.getBoundingClientRect().top;
            const el = element as HTMLElement;

            if (position <= triggerPoint) {
                el.classList.add('slide-in-left');
                el.classList.remove('element-hidden', 'slide-out-left');
            } else if (position > triggerPoint || position + el.offsetHeight < 0) {
                el.classList.add('slide-out-left');
                el.classList.remove('slide-in-left');
            }
        });

        elementsRight.forEach(element => {
            const position = element.getBoundingClientRect().top;
            const el = element as HTMLElement;

            if (position <= triggerPoint) {
                el.classList.add('slide-in-right');
                el.classList.remove('element-hidden', 'slide-out-right');
            } else if (position > triggerPoint || position + el.offsetHeight < 0) {
                el.classList.add('slide-out-right');
                el.classList.remove('slide-in-right');
            }
        });
    }

    window.addEventListener('scroll', checkPosition);
    checkPosition();
});