Fix: Implement comprehensive FOUC prevention for data nodes

- Add aggressive multi-layer FOUC prevention in index.html head section
- Use inline CSS and JavaScript style injection for immediate hiding
- Position nodes far off-screen (-3000px) to prevent any flash
- Hide both .data-node and .data-constellation containers
- Update CSS to use CSS custom properties for better control
- Add responsive breakpoint coverage for all screen sizes
- Implement smart timing control with CSS loading detection
- Handle duplicate data nodes in neural-network-container and hero-animation
- Clean style removal after proper positioning is applied

Resolves the 1-second flash where icons appeared scattered during page load

css/hero-animation.css

@@ -141,6 +141,12 @@
 /* Data Constellation */
 /* Data Nodes Positioning */
 
+.data-constellation {
+  /* Hide constellation container until ready */
+  opacity: var(--data-node-opacity, 0) !important;
+  visibility: var(--data-node-visibility, hidden) !important;
+}
+
 .data-node {
   position: absolute;
   width: 80px;
@@ -149,149 +155,295 @@
   animation: nodeFloat 6s ease-in-out infinite;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   z-index: 5;
+  
+  /* Ultra-strong FOUC prevention using CSS variables set by JavaScript */
+  opacity: var(--data-node-opacity, 0) !important;
+  visibility: var(--data-node-visibility, hidden) !important;
+  top: var(--data-node-position, -3000px) !important;
+  left: var(--data-node-position, -3000px) !important;
+  transform: none !important;
 }
 
-/* Core Service Nodes - Enhanced organic scatter on right side */
+/* Critical: Only show nodes when they have been properly positioned by media queries */
-.node-ml {
+@media (min-width: 769px) {
+  .data-constellation {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  
+  .data-node[class*="node-"] {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    --data-node-position: unset;
+    opacity: 1 !important;
+    visibility: visible !important;
+    top: unset !important;
+    left: unset !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .data-constellation {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  
+  .data-node[class*="node-"] {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    --data-node-position: unset;
+    opacity: 1 !important;
+    visibility: visible !important;
+    top: unset !important;
+    left: unset !important;
+  }
+}
+
+/* Core Service Nodes - Natural organic scatter across right side (Desktop only) */
+@media (min-width: 769px) {
+  .node-ml {
+    top: 14%;
+    right: 35%;
+    animation-delay: 0s;
+    z-index: 5;
+  }
+
+  .node-ai {
+    top: 38%;
+    right: 9%;
+    animation-delay: 1.5s;
+    z-index: 5;
+  }
+
+  .node-analytics {
+    bottom: 35%;
+    right: 29%;
+    animation-delay: 3s;
+    z-index: 5;
+  }
+
+  .node-automation {
+    bottom: 9%;
+    right: 41%;
+    animation-delay: 4.5s;
+    z-index: 5;
+  }
+}
+
+/* Tablet positioning - Moderate scatter for medium screens */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .node-ml {
     top: 18%;
     right: 28%;
     animation-delay: 0s;
     z-index: 5;
-}
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-.node-ai {
+  .node-ai {
     top: 42%;
     right: 12%;
     animation-delay: 1.5s;
     z-index: 5;
-}
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-.node-analytics {
+  .node-analytics {
     bottom: 32%;
-  right: 22%;
+    right: 25%;
     animation-delay: 3s;
     z-index: 5;
-}
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-.node-automation {
+  .node-automation {
     bottom: 12%;
     right: 38%;
     animation-delay: 4.5s;
     z-index: 5;
-}
+    opacity: 1;
-
+    visibility: visible;
-/* Industry Nodes - Enhanced organic scattering on right side */
+    transform: none;
-.node-finance {
+  }
+  .node-finance {
     top: 28%;
     right: 6%;
     animation-delay: 0.5s;
     z-index: 4;
-}
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-.node-healthcare {
+  .node-healthcare {
-  top: 62%;
+    top: 55%;
     right: 16%;
     animation-delay: 2s;
     z-index: 4;
-}
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-.node-retail {
+  .node-retail {
     bottom: 22%;
     right: 8%;
     animation-delay: 3.5s;
     z-index: 4;
-}
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-.node-manufacturing {
+  .node-manufacturing {
-  top: 52%;
+    top: 45%;
     right: 32%;
     animation-delay: 5s;
     z-index: 4;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 }
 
-/* Strategic Nodes - Natural organic scatter across right quadrant */
+/* Industry Nodes - Enhanced organic scattering with varied depths (Desktop only) */
-.node-agentic {
+@media (min-width: 769px) {
+  .node-finance {
+    top: 26%;
+    right: 4%;
+    animation-delay: 0.5s;
+    z-index: 4;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  .node-healthcare {
+    top: 59%;
+    right: 14%;
+    animation-delay: 2s;
+    z-index: 4;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  .node-retail {
+    bottom: 19%;
+    right: 6%;
+    animation-delay: 3.5s;
+    z-index: 4;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  .node-manufacturing {
+    top: 49%;
+    right: 36%;
+    animation-delay: 5s;
+    z-index: 4;
+  }
+}
+
+/* Strategic Nodes - Natural organic scatter across right quadrant (Desktop only) */
+@media (min-width: 769px) {
+  .node-agentic {
     top: 72%;
     right: 24%;
     animation-delay: 6.5s;
     z-index: 3;
-}
+  }
 
-.node-marketing {
+  .node-marketing {
     top: 8%;
     right: 48%;
     animation-delay: 7.5s;
     z-index: 3;
-}
+  }
 
-.node-media {
+  .node-media {
     bottom: 6%;
     right: 14%;
     animation-delay: 8.5s;
     z-index: 3;
-}
+  }
 
-/* Additional nodes for enhanced organic distribution */
+  /* Additional nodes for enhanced organic distribution */
-.node-travel {
+  .node-travel {
     top: 78%;
     right: 42%;
     animation-delay: 9s;
     z-index: 3;
-}
+  }
 
-.node-education {
+  .node-education {
     bottom: 48%;
     right: 46%;
     animation-delay: 10s;
     z-index: 3;
-}
+  }
 
-.node-technology {
+  .node-technology {
     top: 32%;
     right: 44%;
     animation-delay: 11s;
     z-index: 3;
-}
+  }
 
-/* Right-side hero animation nodes - Natural scattered positioning */
+  /* Right-side hero animation nodes - Natural scattered positioning */
-.node-education-right {
+  .node-education-right {
     top: 22%;
     right: 18%;
     animation-delay: 10s;
     z-index: 4;
-}
+  }
 
-.node-technology-right {
+  .node-technology-right {
+    top: 58%;
+    right: 28%;
+    animation-delay: 11s;  .node-technology-right {
     top: 58%;
     right: 28%;
     animation-delay: 11s;
     z-index: 4;
-}
+  }
 
-.node-travel-right {
+  .node-travel-right {
     top: 88%;
     right: 32%;
     animation-delay: 12s;
     z-index: 4;
-}
+  }
 
-/* New Strategic Nodes - Filling gaps for better organic scatter */
+  /* New Strategic Nodes - Filling gaps for better organic scatter */
-.node-predictive {
+  .node-predictive {
     top: 48%;
     right: 8%;
     animation-delay: 12s;
-}
+  }
 
-.node-supply-chain {
+  .node-supply-chain {
     top: 38%;
     left: 8%;
     animation-delay: 13s;
-}
+  }
 
-.node-risk {
+  .node-risk {
     top: 12%;
     right: 34%;
     animation-delay: 14s;
+  }
 }
 
 .node-core {
@@ -723,10 +875,38 @@
     width: 35px;
     height: 35px;
   }
+  .data-constellation {
+    /* Ensure constellation is visible on tablet */
+    opacity: var(--data-node-opacity, 0) !important;
+    visibility: var(--data-node-visibility, hidden) !important;
+  }
   
   .data-node {
     width: 65px;
     height: 65px;
+    /* Ensure FOUC prevention works on tablet too */
+    opacity: var(--data-node-opacity, 0) !important;
+    visibility: var(--data-node-visibility, hidden) !important;
+    top: var(--data-node-position, -3000px) !important;
+    left: var(--data-node-position, -3000px) !important;
+  }
+  
+  /* Override for visible constellation and nodes on tablet */
+  .data-constellation {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  
+  .data-node[class*="node-"] {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    --data-node-position: unset;
+    opacity: 1 !important;
+    visibility: visible !important;
+    top: unset !important;
+    left: unset !important;
   }
   
   .node-core, .industry-core {
@@ -817,10 +997,38 @@
   .neural-network-container {
     height: 450px;
   }
+    .data-constellation {
+    /* Ensure constellation is visible on mobile */
+    opacity: var(--data-node-opacity, 0) !important;
+    visibility: var(--data-node-visibility, hidden) !important;
+  }
   
   .data-node {
     width: 55px;
     height: 55px;
+    /* Ensure FOUC prevention works on mobile too */
+    opacity: var(--data-node-opacity, 0) !important;
+    visibility: var(--data-node-visibility, hidden) !important;
+    top: var(--data-node-position, -3000px) !important;
+    left: var(--data-node-position, -3000px) !important;
+  }
+  
+  /* Override for visible constellation and nodes on mobile */
+  .data-constellation {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  
+  .data-node[class*="node-"] {
+    --data-node-opacity: 1;
+    --data-node-visibility: visible;
+    --data-node-position: unset;
+    opacity: 1 !important;
+    visibility: visible !important;
+    top: unset !important;
+    left: unset !important;
   }
   
   .node-core, .industry-core {
@@ -894,51 +1102,50 @@
   z-index: 15;
 }
 
-/* Improved node distribution with a more organized pattern */
+/* Enhanced organic scattering - Focus on right-side distribution (Desktop only) */
-.hero-animation .node-ml {
+@media (min-width: 769px) {
-  top: 25%;
+  .hero-animation .node-ml {
-  left: 25%;
+    top: 16%;
+    right: 32%;
     animation-delay: 0.2s;
-}
+  }
 
-.hero-animation .node-ai {
+  .hero-animation .node-ai {
-  top: 25%;
+    top: 45%;
-  right: 25%;
+    right: 18%;
     animation-delay: 0.7s;
-}
+  }
 
-.hero-animation .node-analytics {
+  .hero-animation .node-analytics {
-  bottom: 25%; 
+    bottom: 28%; 
-  left: 25%;
+    right: 26%;
     animation-delay: 1.2s;
-}
+  }
 
-.hero-animation .node-automation {
+  .hero-animation .node-automation {
-  bottom: 25%;
+    bottom: 8%;
-  right: 25%;
+    right: 42%;
     animation-delay: 1.7s;
-}
+  }
 
-/* Right-side nodes positioned at mid-points */
+  /* Right-side nodes with natural scattered positioning */
-.hero-animation .node-education-right {
+  .hero-animation .node-education-right {
-  top: 15%;
+    top: 35%;
-  left: 50%;
+    right: 8%;
-  transform: translateX(-50%);
     animation-delay: 2.2s;
-}
+  }
 
-.hero-animation .node-technology-right {
+  .hero-animation .node-technology-right {
-  bottom: 15%;
+    top: 68%;
-  left: 50%;
+    right: 35%;
-  transform: translateX(-50%);
     animation-delay: 2.7s;
-}
+  }
 
-.hero-animation .node-travel-right {
+  .hero-animation .node-travel-right {
-  left: 50%;
+    top: 82%;
-  top: 50%;
+    right: 15%;
-  transform: translate(-50%, -50%);
     animation-delay: 3.2s;
+  }
 }
 
 .data-node:hover ~ .data-node {
@@ -1137,3 +1344,103 @@
 .node-manufacturing { 
   transform: translateX(2px) translateY(-3px) rotate(-1deg);
 }
+
+/* Additional strategic nodes for better right-side scatter coverage */
+.node-cluster-scattered-1 {
+  top: 22%;
+  right: 52%;
+  animation-delay: 16.5s;
+  width: 70px;
+  height: 70px;
+  z-index: 2;
+  animation: nodeFloatTertiary 7.5s ease-in-out infinite;
+}
+
+.node-cluster-scattered-2 {
+  top: 66%;
+  right: 48%;
+  animation-delay: 17.5s;
+  width: 73px;
+  height: 73px;
+  z-index: 2;
+  animation: nodeFloatSecondary 8.2s ease-in-out infinite;
+}
+
+.node-cluster-scattered-3 {
+  top: 44%;
+  right: 2%;
+  animation-delay: 18.2s;
+  width: 68px;
+  height: 68px;
+  z-index: 2;
+  animation: nodeFloatEnhanced 6.8s ease-in-out infinite;
+}
+
+.node-cluster-scattered-4 {
+  top: 84%;
+  right: 50%;
+  animation-delay: 19s;
+  width: 71px;
+  height: 71px;
+  z-index: 2;
+  animation: nodeFloat 7.2s ease-in-out infinite;
+}
+
+/* Enhanced random positioning variations for ultra-organic feel */
+.data-node:nth-child(7n) {
+  transform: translateX(4px) translateY(-2px) rotate(2.5deg);
+}
+
+.data-node:nth-child(7n+1) {
+  transform: translateX(-2px) translateY(3px) rotate(-1.8deg);
+}
+
+.data-node:nth-child(7n+2) {
+  transform: translateX(3px) translateY(-1px) rotate(1.2deg);
+}
+
+/* Right-side specific micro-adjustments for natural clustering */
+.hero-animation .data-node:nth-child(even) {
+  transform: translateX(2px) translateY(-1px) rotate(1deg);
+}
+
+.hero-animation .data-node:nth-child(odd) {
+  transform: translateX(-1px) translateY(2px) rotate(-1deg);
+}
+
+/* Additional depth variations with subtle opacity changes */
+.data-node:nth-child(5n) {
+  opacity: 0.95;
+  filter: brightness(1.05);
+}
+
+.data-node:nth-child(5n+2) {
+  opacity: 0.92;
+  filter: brightness(0.98);
+}
+
+/* Dynamic scatter enhancement - creates more natural randomness */
+@media (min-width: 1200px) {
+  .hero-animation .node-ml {
+    top: 14%;
+    right: 33%;
+    transform: translateX(3px) translateY(-2px) rotate(2.5deg);
+  }
+  
+  .hero-animation .node-ai {
+    top: 43%;
+    right: 16%;
+    transform: translateX(-2px) translateY(3px) rotate(-1.5deg);
+  }
+  
+  .hero-animation .node-analytics {
+    bottom: 26%;
+    right: 28%;
+    transform: translateX(4px) translateY(-1px) rotate(1.8deg);
+  }
+  
+  .hero-animation .node-automation {
+    bottom: 6%;
+    right: 44%;
+    transform: translateX(-3px) translateY(2px) rotate(-2.2deg);
+  }

index.html

@@ -3,11 +3,112 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <title>Gyannetra — AI Services & Solutions</title>  <link rel="stylesheet" href="css/style.css" />
+  <title>Gyannetra — AI Services & Solutions</title>
-  <link rel="stylesheet" href="css/hero-animation.css" />
+    <!-- Critical FOUC Prevention - Must be first before any CSS -->
+  <style>
+    /* Immediate FOUC prevention - applies before any other CSS loads */
+    .data-node {
+      opacity: 0 !important;
+      visibility: hidden !important;
+      transform: translateX(-3000px) translateY(-3000px) !important;
+      position: absolute !important;
+    }
+    /* Prevent any flash during CSS loading */
+    .data-constellation {
+      opacity: 0 !important;
+      visibility: hidden !important;
+    }
+  </style>
+  
+  <script>
+    // Immediate FOUC prevention for data nodes - more aggressive approach
+    document.documentElement.style.setProperty('--data-node-visibility', 'hidden');
+    document.documentElement.style.setProperty('--data-node-opacity', '0');
+    document.documentElement.style.setProperty('--data-node-position', '-3000px');
+    
+    // Hide all potential data node containers immediately
+    const style = document.createElement('style');
+    style.textContent = `
+      .data-node, .data-constellation {
+        opacity: 0 !important;
+        visibility: hidden !important;
+        transform: translateX(-5000px) translateY(-5000px) !important;
+      }
+    `;
+    document.head.appendChild(style);
+    window.foucPreventionStyle = style;
+  </script>
+  
+  <link rel="stylesheet" href="css/style.css" />  <link rel="stylesheet" href="css/hero-animation.css" />
   <link rel="stylesheet" href="css/animations.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Enable data nodes after all CSS is loaded -->
+  <script>
+    // Wait for all stylesheets to load before enabling nodes
+    function enableDataNodes() {
+      // Check if all CSS files are loaded
+      const cssLoaded = Array.from(document.styleSheets).every(sheet => {
+        try {
+          return sheet.cssRules || sheet.rules;
+        } catch (e) {
+          return false;
+        }
+      });
+      
+      if (cssLoaded && document.readyState !== 'loading') {
+        // Remove the aggressive FOUC prevention style
+        if (window.foucPreventionStyle) {
+          window.foucPreventionStyle.remove();
+        }
+        
+        // Enable nodes with proper CSS variables
+        document.documentElement.style.setProperty('--data-node-visibility', 'visible');
+        document.documentElement.style.setProperty('--data-node-opacity', '1');
+        document.documentElement.style.setProperty('--data-node-position', 'unset');
+        
+        // Force enable all data nodes and constellations
+        const dataNodes = document.querySelectorAll('.data-node, .data-constellation');
+        dataNodes.forEach(node => {
+          node.style.removeProperty('opacity');
+          node.style.removeProperty('visibility');
+          node.style.removeProperty('transform');
+        });
+      } else {
+        // Retry after a short delay
+        setTimeout(enableDataNodes, 50);
+      }
+    }
+    
+    // Start checking when DOM is interactive
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', enableDataNodes);
+    } else {
+      enableDataNodes();
+    }
+    
+    // Fallback: ensure nodes are enabled after full page load
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        // Remove the aggressive FOUC prevention style
+        if (window.foucPreventionStyle) {
+          window.foucPreventionStyle.remove();
+        }
+        
+        document.documentElement.style.setProperty('--data-node-visibility', 'visible');
+        document.documentElement.style.setProperty('--data-node-opacity', '1');
+        document.documentElement.style.setProperty('--data-node-position', 'unset');
+        
+        // Force enable all data nodes and constellations
+        const dataNodes = document.querySelectorAll('.data-node, .data-constellation');
+        dataNodes.forEach(node => {
+          node.style.removeProperty('opacity');
+          node.style.removeProperty('visibility');
+          node.style.removeProperty('transform');
+        });
+      }, 150);
+    });
+  </script>
 </head>
 <body>
   <div class="atmospheric-bg">
@@ -688,8 +789,9 @@
       <div class="footer-bottom">
         <p>&copy; 2025 Gyannetra. All rights reserved. | <a href="privacy-policy.html">Privacy Policy</a> | <a href="terms-of-service.html">Terms of Service</a></p>
       </div>
-    </div>
+    </div>  </footer>
-  </footer>  <script src="js/menu-dropdown.js" defer></script>
+
+  <script src="js/menu-dropdown.js" defer></script>
   <script src="js/main.js" defer></script>
   <script src="js/tech-marquee.js" defer></script>
   <script src="js/hero-animation-new.js" defer></script>