rf-v4.11-ecosistema listo

js/netschema.js

@@ -116,7 +116,7 @@ const nodosData = [
 
             // Crear pulsos
             conn.pulsos = [];
-            const cantPulsos = 10; 
+            const cantPulsos = 6; 
             
             for (let i = 0; i < cantPulsos; i++) {
                 const pathPulso = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -149,24 +149,54 @@ const nodosData = [
             });
         }, 1200);
 
-        // 4. Motor de Animación Ultraligero
-        function animarFrame() {
-            conexiones.forEach(conn => {
-                conn.pulsos.forEach(p => {
-                    p.dash -= p.speed; 
-                    
-                    // OPTIMIZACIÓN EXTREMA: Solo interactuamos con el DOM si el pulso saltó de carril
-                    if (p.needsPathUpdate) {
-                        p.el.setAttribute('d', conn.rutasCache[p.currentOffset]);
-                        p.needsPathUpdate = false;
-                    }
-                    
-                    // Lo único que se actualiza contínuamente es el desplazamiento
-                    p.el.style.strokeDashoffset = p.dash;
-                });
-            });
+// 4. Motor de Animación Ultraligero
+let animando = false;
+let rafId = null;
 
-            requestAnimationFrame(animarFrame);
-        }
+function animarFrame() {
+  if (!animando) return; // corta el loop cuando no es visible
+  conexiones.forEach(conn => {
+    conn.pulsos.forEach(p => {
+      p.dash -= p.speed;
+      if (p.needsPathUpdate) {
+        p.el.setAttribute('d', conn.rutasCache[p.currentOffset]);
+        p.needsPathUpdate = false;
+      }
+      p.el.style.strokeDashoffset = p.dash;
+    });
+  });
+  rafId = requestAnimationFrame(animarFrame);
+}
 
-        animarFrame();
+function iniciarAnimacion() {
+  if (animando) return;
+  animando = true;
+  rafId = requestAnimationFrame(animarFrame);
+}
+
+function detenerAnimacion() {
+  animando = false;
+  if (rafId) cancelAnimationFrame(rafId);
+}
+
+// Detectar visibilidad de la sección del header
+const heroVisual = document.querySelector('.hero-visual');
+if (heroVisual && 'IntersectionObserver' in window) {
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) iniciarAnimacion();
+      else detenerAnimacion();
+    });
+  }, { threshold: 0.05 });
+  io.observe(heroVisual);
+} else {
+  iniciarAnimacion(); // fallback
+}
+
+// Pausar también cuando la pestaña queda oculta
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) detenerAnimacion();
+  else if (heroVisual && heroVisual.getBoundingClientRect().top < window.innerHeight) {
+    iniciarAnimacion();
+  }
+});