const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        const el = entry.target;

        if (entry.isIntersecting) {
            if (!el._hasEnteredOnce) {
                // First time in viewport – apply delay
                el._inViewportTimeout = setTimeout(() => {
                    el.classList.add('visible');
                    el._hasEnteredOnce = true;
                }, 250);
            } else {
                // Already entered once – no delay
                el.classList.add('visible');
            }
        } else {
            clearTimeout(entry.target._inViewportTimeout);
            entry.target.classList.remove('visible');
        }
    });
}, {
    threshold: 0.5 // adjust as needed
});

document.querySelectorAll('.watch-vp').forEach(el => {
    observer.observe(el);
});