document.addEventListener("DOMContentLoaded", function() { const cards = Array.from(document.querySelectorAll('.blur-card')); if (!cards.length) return; // Si quieres que esto solo funcione en móvil/tablet: const isTouch = window.matchMedia('(pointer: coarse)').matches; if (!isTouch) return; let ticking = false; function updateActiveCard() { ticking = false; const viewportCenter = window.innerHeight / 2; let active = null; cards.forEach(card => { const rect = card.getBoundingClientRect(); // ¿La línea del centro de pantalla está dentro de la tarjeta? const intersectsCenter = rect.top = viewportCenter; if (intersectsCenter && !active) { active = card; } }); // Quitamos siempre la clase de todas cards.forEach(card => card.classList.remove('is-visible')); // Si hay una que cruza el centro, la activamos if (active) { active.classList.add('is-visible'); } } function onScrollOrResize() { if (ticking) return; ticking = true; requestAnimationFrame(updateActiveCard); } window.addEventListener('scroll', onScrollOrResize, { passive: true }); window.addEventListener('resize', onScrollOrResize); // Primer cálculo al cargar updateActiveCard(); });