Riduce i micro-blocchi allo scroll alleggerendo canvas e spine SVG.

Il canvas particelle era alto quanto tutto il documento e ridisegnava ogni frame; ora resta sul viewport e si ferma durante lo scroll.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/DataflowSpine.astro

@@ -3,32 +3,20 @@
  * Continuazione dei flussi dati dell'hero: dalla destra verso sinistra,
  * inclinazione verso il basso, fino alla fascia del titolo "Prodotti".
  * Dietro a testo e card (main ha stacking; questo blocco è z-0).
+ * Senza feGaussianBlur: il filtro SVG su un layer alto quanto il main
+ * rendeva lo scroll a scatti.
  */
 ---
 
 <div class="nx-dataflow-spine" aria-hidden="true">
   <svg
     class="nx-dataflow-spine-svg"
-    viewBox="0 0 1480 2800"
+    viewBox="0 0 1480 1600"
     preserveAspectRatio="none"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <defs>
-      <filter
-        id="nx-spine-glow"
-        x="-30%"
-        y="-30%"
-        width="160%"
-        height="160%"
-        color-interpolation-filters="sRGB"
-      >
-        <feGaussianBlur stdDeviation="2.2" result="blur" />
-        <feMerge>
-          <feMergeNode in="blur" />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
       <linearGradient id="nx-spine-stroke" x1="100%" y1="0%" x2="0%" y2="60%">
         <stop offset="0%" stop-color="#a5f3fc" stop-opacity="0.75" />
         <stop offset="40%" stop-color="#38bdf8" stop-opacity="0.9" />
@@ -36,8 +24,8 @@
       </linearGradient>
     </defs>
 
-    <g filter="url(#nx-spine-glow)" opacity="0.72">
-      <!-- Entrata da dx (fuori canvas) → curva verso sx con pendenza verso il basso; fascia ~y 980–1280 = titolo Prodotti su viewport tipiche -->
+    <g opacity="0.72">
+      <!-- Entrata da dx → curva verso sx; fascia titolo Prodotti -->
       <path
         class="nx-flow-line nx-flow-line--a"
         vector-effect="non-scaling-stroke"

src/styles/global.css

@@ -36,14 +36,15 @@
   }
 }
 
-/* Canvas particelle: dentro .nx-grid-bg, sopra lo sfondo della sezione */
+/* Canvas particelle: fisso al viewport (non alto quanto tutto il documento) */
 .nx-particle-layer {
-  position: absolute;
+  position: fixed;
   inset: 0;
   z-index: 0;
   display: block;
   width: 100%;
   height: 100%;
+  pointer-events: none;
 }
 
 /* Subtle grid (Vercel-like) + vignette */
@@ -128,11 +129,16 @@
 /* Spine: prolunga i flussi hero verso la fascia “Prodotti” (dietro al contenuto) */
 .nx-dataflow-spine {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* Solo fascia hero → prodotti: evita SVG filtrato alto quanto tutto il main */
+  height: min(160vh, 2200px);
   z-index: 0;
   pointer-events: none;
   overflow: hidden;
   opacity: 0.46;
+  contain: paint;
   mask-image: linear-gradient(
     to bottom,
     transparent 0,