Gyannetra_website/css/hero-animation.css

/* Neural Network Hero Animation - Improved Scatter Algorithm
.neural-network-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* Ensure neural network data nodes are clickable above hero content */
.neural-network-container .data-node {
  z-index: 2;
}

/* Neural Mesh Background */
.neural-mesh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mesh-canvas {
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

/* Data Constellation - Enhanced FOUC Prevention */
.data-constellation {
  opacity: var(--data-node-opacity, 0) !important;
  visibility: var(--data-node-visibility, hidden) !important;
  transition: opacity 0.5s ease-in-out;
}

/* Base Data Node Styling with Enhanced FOUC Prevention */
.data-node {
  position: absolute;
  width: 80px;
  height: 80px;
  cursor: pointer;
  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 */
  opacity: var(--data-node-opacity, 0) !important;
  visibility: var(--data-node-visibility, hidden) !important;
  top: var(--data-node-position, -9999px) !important;
  left: var(--data-node-position, -9999px) !important;
  transform: none !important;
}

/* ===== IMPROVED NEURAL SCATTER ALGORITHM ===== */
/* Grid-based positioning system prevents overlaps completely */

/* Desktop Large Screens (1200px+) - Optimal Neural Distribution */
@media (min-width: 1200px) {
  .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 - Primary tier, largest spacing */
  .node-ml {
    top: 15%;
    right: 45%;
    animation-delay: 0s;
    z-index: 6;
  }

  .node-ai {
    top: 55%;
    right: 8%;
    animation-delay: 1.5s;
    z-index: 6;
  }

  .node-analytics {
    bottom: 20%;
    right: 35%;
    animation-delay: 3s;
    z-index: 6;
  }

  .node-automation {
    bottom: 45%;
    right: 3%;
    animation-delay: 4.5s;
    z-index: 6;
  }
  /* Industry Nodes - Secondary tier, strategic placement */
  .node-finance {
    top: 18%;
    right: 20%;
    animation-delay: 0.8s;
    z-index: 5;
  }

  .node-healthcare {
    top: 75%;
    right: 18%;
    animation-delay: 2.3s;
    z-index: 5;
  }

  .node-retail {
    bottom: 8%;
    right: 15%;
    animation-delay: 3.8s;
    z-index: 5;
  }

  .node-manufacturing {
    top: 35%;
    right: 58%;
    animation-delay: 5.3s;
    z-index: 5;
  }

  /* Strategic Nodes - Tertiary tier, fill remaining space */
  .node-agentic {
    top: 85%;
    right: 48%;
    animation-delay: 6.8s;
    z-index: 4;
  }

  .node-marketing {
    top: 25%;
    right: 2%;
    animation-delay: 7.5s;
    z-index: 4;
  }

  .node-media {
    bottom: 2%;
    right: 28%;
    animation-delay: 8.2s;
    z-index: 4;
  }

  .node-travel {
    top: 65%;
    right: 52%;
    animation-delay: 9s;
    z-index: 4;
  }

  .node-education {
    top: 45%;
    right: 25%;
    animation-delay: 10s;
    z-index: 4;
  }

  .node-technology {
    top: 92%;
    right: 8%;
    animation-delay: 11s;
    z-index: 4;
  }
  /* Extended Nodes - Fill outer regions */
  .node-predictive {
    top: 28%;
    right: 68%;
    animation-delay: 12s;
    z-index: 3;
  }

  .node-supply-chain {
    top: 68%;
    right: 68%;
    animation-delay: 13s;
    z-index: 3;
  }
  .node-risk {
    top: 15%;
    right: 52%;
    animation-delay: 14s;
    z-index: 3;
  }

  /* New Upper Area Nodes - Strategic positioning below navbar safe zone */
  .node-cloud-computing {
    top: 18%;
    right: 35%;
    animation-delay: 15s;
    z-index: 3;
  }

  .node-cybersecurity {
    top: 25%;
    right: 65%;
    animation-delay: 16s;
    z-index: 3;
  }

  .node-iot {
    top: 22%;
    right: 8%;
    animation-delay: 17s;
    z-index: 3;
  }

  .node-blockchain {
    top: 35%;
    right: 75%;
    animation-delay: 18s;
    z-index: 3;
  }

  .node-quantum {
    top: 18%;
    right: 25%;
    animation-delay: 19s;
    z-index: 3;
  }

  .node-robotics {
    top: 38%;
    right: 38%;
    animation-delay: 20s;
    z-index: 3;
  }

  .node-nlp {
    top: 25%;
    right: 82%;
    animation-delay: 21s;
    z-index: 3;
  }

  .node-computer-vision {
    top: 22%;
    right: 12%;
    animation-delay: 22s;
    z-index: 3;
  }
  /* Additional Upper Right Area Nodes - Fill space below navbar */
  .node-deep-learning {
    top: 35%;
    right: 15%;
    animation-delay: 23s;
    z-index: 3;
  }

  .node-neural-networks {
    top: 38%;
    right: 8%;
    animation-delay: 24s;
    z-index: 3;
  }

  .node-data-science {
    top: 42%;
    right: 12%;
    animation-delay: 25s;
    z-index: 3;
  }

  .node-machine-vision {
    top: 48%;
    right: 5%;
    animation-delay: 26s;
    z-index: 3;
  }

  .node-edge-computing {
    top: 52%;
    right: 15%;
    animation-delay: 27s;
    z-index: 3;
  }

  .node-digital-transformation {
    top: 58%;
    right: 22%;
    animation-delay: 28s;
    z-index: 3;
  }

  .node-process-optimization {
    top: 62%;
    right: 12%;
    animation-delay: 29s;
    z-index: 3;
  }

  .node-smart-analytics {
    top: 68%;
    right: 5%;
    animation-delay: 30s;
    z-index: 3;
  }
}

/* Desktop Standard (769px - 1199px) - Balanced Distribution */
@media (min-width: 769px) and (max-width: 1199px) {
  .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 */
  .node-ml {
    top: 18%;
    right: 42%;
    animation-delay: 0s;
  }

  .node-ai {
    top: 52%;
    right: 12%;
    animation-delay: 1.5s;
  }

  .node-analytics {
    bottom: 22%;
    right: 38%;
    animation-delay: 3s;
  }

  .node-automation {
    bottom: 45%;
    right: 8%;
    animation-delay: 4.5s;
  }
  /* Industry Nodes */
  .node-finance {
    top: 18%;
    right: 18%;
    animation-delay: 0.5s;
  }

  .node-healthcare {
    top: 72%;
    right: 22%;
    animation-delay: 2s;
  }

  .node-retail {
    bottom: 8%;
    right: 18%;
    animation-delay: 3.5s;
  }

  .node-manufacturing {
    top: 38%;
    right: 52%;
    animation-delay: 5s;
  }

  /* Strategic Nodes - Limited set for medium screens */
  .node-agentic {
    top: 82%;
    right: 45%;
    animation-delay: 6.5s;
  }

  .node-marketing {
    top: 28%;
    right: 2%;
    animation-delay: 7.5s;
  }
  .node-media {
    bottom: 2%;
    right: 28%;
    animation-delay: 8.5s;
  }  /* Selected upper area nodes for medium screens */
  .node-cloud-computing {
    top: 22%;
    right: 35%;
    animation-delay: 9s;
  }

  .node-cybersecurity {
    top: 25%;
    right: 62%;
    animation-delay: 10s;
  }

  .node-iot {
    top: 22%;
    right: 5%;
    animation-delay: 11s;
  }

  .node-deep-learning {
    top: 38%;
    right: 18%;
    animation-delay: 12s;
  }

  .node-neural-networks {
    top: 42%;
    right: 8%;
    animation-delay: 13s;
  }

  .node-data-science {
    top: 48%;
    right: 15%;
    animation-delay: 14s;
  }

  /* Hide extended nodes on medium screens to prevent crowding */
  .node-travel, .node-education, .node-technology, 
  .node-predictive, .node-supply-chain, .node-risk,
  .node-blockchain, .node-quantum, .node-robotics, 
  .node-nlp, .node-computer-vision, .node-machine-vision,
  .node-edge-computing, .node-digital-transformation,
  .node-process-optimization, .node-smart-analytics {
    display: none;
  }
}

/* Tablet (481px - 768px) - Optimized Distribution */
@media (min-width: 481px) and (max-width: 768px) {
  .data-constellation {
    --data-node-opacity: 1;
    --data-node-visibility: visible;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .data-node {
    width: 65px;
    height: 65px;
    --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 Services - Essential nodes only */
  .node-ml {
    top: 20%;
    right: 35%;
  }

  .node-ai {
    top: 25%;
    right: 8%;
  }

  .node-analytics {
    bottom: 22%;
    right: 32%;
  }

  .node-automation {
    bottom: 20%;
    right: 5%;
  }

  /* Key Industries */
  .node-finance {
    top: 10%;
    right: 15%;
  }

  .node-healthcare {
    bottom: 15%;
    right: 15%;
  }  /* Hide less critical nodes on tablet */
  .node-retail, .node-manufacturing, .node-agentic, 
  .node-marketing, .node-media, .node-travel, 
  .node-education, .node-technology, .node-predictive, 
  .node-supply-chain, .node-risk, .node-cloud-computing,
  .node-cybersecurity, .node-iot, .node-blockchain,
  .node-quantum, .node-robotics, .node-nlp, .node-computer-vision,
  .node-deep-learning, .node-neural-networks, .node-data-science,
  .node-machine-vision, .node-edge-computing, .node-digital-transformation,
  .node-process-optimization, .node-smart-analytics {
    display: none;
  }
}

/* Mobile (≤480px) - Minimal Essential Distribution */
@media (max-width: 480px) {
  .data-constellation {
    --data-node-opacity: 1;
    --data-node-visibility: visible;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .data-node {
    width: 55px;
    height: 55px;
    --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 essentials only - Maximum spacing */
  .node-ml {
    top: 22%;
    right: 25%;
  }

  .node-ai {
    top: 25%;
    right: 5%;
  }

  .node-analytics {
    bottom: 25%;
    right: 25%;
  }

  .node-automation {
    bottom: 22%;
    right: 5%;
  }

  /* Single industry representative */
  .node-finance {
    top: 12%;
    right: 10%;
  }  /* Hide all other nodes on mobile */
  .node-healthcare, .node-retail, .node-manufacturing, 
  .node-agentic, .node-marketing, .node-media, 
  .node-travel, .node-education, .node-technology, 
  .node-predictive, .node-supply-chain, .node-risk,
  .node-cloud-computing, .node-cybersecurity, .node-iot,
  .node-blockchain, .node-quantum, .node-robotics,
  .node-nlp, .node-computer-vision, .node-deep-learning,
  .node-neural-networks, .node-data-science, .node-machine-vision,
  .node-edge-computing, .node-digital-transformation,
  .node-process-optimization, .node-smart-analytics {
    display: none;
  }
}

/* ===== NODE VISUAL STYLING ===== */

.node-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  border-radius: 50%;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: nodeCorePulse 4s ease-in-out infinite;
}

/* Industry Node Cores */
.industry-core {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(59, 130, 246, 0.2)) !important;
  border: 1px solid rgba(236, 72, 153, 0.3) !important;
  width: 55px !important;
  height: 55px !important;
}

.industry-core:hover {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(59, 130, 246, 0.4)) !important;
  box-shadow: 0 0 35px rgba(236, 72, 153, 0.5) !important;
}

/* Specialty Node Core */
.specialty-core {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2)) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  width: 55px !important;
  height: 55px !important;
}

.specialty-core:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(59, 130, 246, 0.4)) !important;
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.5) !important;
}

.node-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 32px;
  height: 32px;
}

.node-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.node-label {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ===== ANIMATIONS ===== */

@keyframes nodeFloat {
  0%, 100% { 
    transform: translateY(0px) translateX(0px);
  }
  25% { 
    transform: translateY(-8px) translateX(3px);
  }
  50% { 
    transform: translateY(-15px) translateX(-2px);
  }
  75% { 
    transform: translateY(-10px) translateX(4px);
  }
}

@keyframes nodeCorePulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
  50% { 
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
  }
}

/* ===== INTERACTION EFFECTS ===== */

.data-node:hover {
  transform: scale(1.1);
  z-index: 15;
}

.data-node:hover .node-core {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
}

.data-node:hover .node-label {
  opacity: 1;
}

/* Hover glow effect */
.data-node:hover {
  filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
}

/* ===== MORPHING GEOMETRIC PATTERNS ===== */

.geometric-morphs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.morph-shape {
  position: absolute;
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
  border-radius: 20px;
  animation: morphTransform 20s ease-in-out infinite;
}

/* Optimized morph positioning to avoid node collision zones */
.morph-1 {
  top: 5%;
  left: 5%;
  width: 50px;
  height: 50px;
  animation-delay: 0s;
}

.morph-2 {
  top: 8%;
  left: 85%;
  width: 35px;
  height: 70px;
  animation-delay: 4s;
}

.morph-3 {
  bottom: 15%;
  left: 5%;
  width: 70px;
  height: 35px;
  animation-delay: 8s;
}

.morph-4 {
  bottom: 8%;
  left: 85%;
  width: 45px;
  height: 45px;
  animation-delay: 12s;
}

.morph-5 {
  top: 40%;
  left: 1%;
  width: 25px;
  height: 80px;
  animation-delay: 16s;
}

@keyframes morphTransform {
  0%, 100% { 
    transform: rotate(0deg) scale(1);
    border-radius: 20px;
  }
  25% { 
    transform: rotate(90deg) scale(1.2);
    border-radius: 50%;
  }
  50% { 
    transform: rotate(180deg) scale(0.8);
    border-radius: 10px;
  }
  75% { 
    transform: rotate(270deg) scale(1.1);
    border-radius: 30px;
  }
}

/* ===== DATA STREAMS ===== */

.data-streams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.stream {
  position: absolute;
  width: 2px;
  background: linear-gradient(to bottom, 
    transparent, 
    rgba(59, 130, 246, 0.6), 
    rgba(139, 92, 246, 0.4), 
    transparent
  );
  animation: streamFlow 8s linear infinite;
}

/* Optimized stream positioning to complement node scatter */
.stream-1 {
  left: 25%;
  height: 180px;
  animation-delay: 0s;
}

.stream-2 {
  left: 40%;
  height: 120px;
  animation-delay: 2s;
}

.stream-3 {
  left: 70%;
  height: 160px;
  animation-delay: 4s;
}

.stream-4 {
  left: 85%;
  height: 100px;
  animation-delay: 6s;
}

@keyframes streamFlow {
  0% {
    top: -200px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* ===== RESPONSIVE CORE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .neural-network-container {
    height: 500px;
  }
  
  .node-core, .industry-core, .specialty-core {
    width: 45px !important;
    height: 45px !important;
  }
  
  .node-icon {
    width: 28px;
    height: 28px;
  }
  
  .node-label {
    font-size: 11px;
    bottom: -20px;
  }
  
  /* Reduce morph shapes on mobile */
  .morph-shape {
    display: none;
  }
  
  .morph-1, .morph-3 {
    display: block;
    opacity: 0.3;
  }
}

@media (max-width: 480px) {
  .neural-network-container {
    height: 450px;
  }
  
  .node-core, .industry-core, .specialty-core {
    width: 40px !important;
    height: 40px !important;
  }
  
  .node-icon {
    width: 24px;
    height: 24px;
  }
} */