const cards = document.querySelectorAll('.card');
let observer = null;

const observerOptions = {
    root: null, // viewport
    threshold: 1.0 // срабатывает, когда элемент полностью виден (100% видимости)
};

// Функция создания нового наблюдателя
function createObserver() {
    observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) entry.target.classList.add('active');
            else entry.target.classList.remove('active');
        });
    }, observerOptions);

    cards.forEach(card => observer.observe(card));
};

// Функция отключения наблюдателя
function destroyObserver() {
    if (observer) {
        cards.forEach(card => observer.unobserve(card));
        observer.disconnect();
        observer = null;
    }
};

// Проверка и управление наблюдением в зависимости от размера экрана
function checkScreenSize() {
    if (window.innerWidth < 748) {
        if (!observer) createObserver(); // Включаем наблюдателя, если его еще нет
    } else {
        destroyObserver(); // Отключаем наблюдателя, если экран больше 576px
        cards.forEach(card => card.classList.remove("active"));
    }
};

// Первичная проверка при загрузке страницы
checkScreenSize();

// Отслеживаем изменение размера окна
window.addEventListener('resize', checkScreenSize);