/* TeDaCo Technical Network Animation */

.tech-animation-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  opacity: 0.6;
}

.network-grid {
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
}

/* Network Nodes */
.network-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #3fcdc7;
  border-radius: 50%;
  box-shadow: 0 0 20px #3fcdc7;
  animation: pulse-node 3s ease-in-out infinite;
}

.network-node.large {
  width: 12px;
  height: 12px;
  background: #e98e06;
  box-shadow: 0 0 30px #e98e06;
  animation: pulse-node-large 2.5s ease-in-out infinite;
}

.network-node.hub {
  width: 16px;
  height: 16px;
  background: #ff689b;
  box-shadow: 0 0 40px #ff689b;
  animation: pulse-hub 2s ease-in-out infinite;
}

/* Network Connections */
.network-connection {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, #3fcdc7, transparent);
  transform-origin: left center;
  opacity: 0.4;
  animation: connection-pulse 4s ease-in-out infinite;
}

.network-connection.active {
  background: linear-gradient(90deg, transparent, #e98e06, #3fcdc7, #e98e06, transparent);
  opacity: 0.8;
  animation: data-flow 2s linear infinite;
}

/* Data Packets */
.data-packet {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff88;
  animation: packet-travel 3s linear infinite;
}

.data-packet.fast {
  background: #ff4444;
  box-shadow: 0 0 15px #ff4444;
  animation: packet-travel-fast 1.5s linear infinite;
}

/* Circuit Board Pattern */
.circuit-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(90deg, rgba(63, 205, 199, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(63, 205, 199, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: circuit-glow 6s ease-in-out infinite;
}

/* Brain/Neural Network Pattern */
.neural-network {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 300px;
  height: 300px;
  opacity: 0.3;
}

.neuron {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #3fcdc7;
  border-radius: 50%;
  box-shadow: 0 0 15px #3fcdc7;
}

.synapse {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, #3fcdc7, transparent);
  animation: neural-pulse 2s ease-in-out infinite;
}

/* Floating Tech Elements */
.tech-element {
  position: absolute;
  font-family: 'Courier New', monospace;
  color: #3fcdc7;
  font-size: 12px;
  opacity: 0.6;
  animation: float-tech 8s linear infinite;
}

/* Animations */
@keyframes pulse-node {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes pulse-node-large {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.9;
  }
  50% { 
    transform: scale(1.3);
    opacity: 1;
  }
}

@keyframes pulse-hub {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }
  50% { 
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
}

@keyframes connection-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

@keyframes data-flow {
  0% { 
    background-position: 0% 50%;
  }
  100% { 
    background-position: 200% 50%;
  }
}

@keyframes packet-travel {
  0% { 
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { 
    transform: translateX(300px) translateY(-50px);
    opacity: 0;
  }
}

@keyframes packet-travel-fast {
  0% { 
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0;
  }
  10% { opacity: 1; }
  50% { transform: translateX(150px) translateY(-25px) scale(1.2); }
  90% { opacity: 1; }
  100% { 
    transform: translateX(400px) translateY(-80px) scale(0.8);
    opacity: 0;
  }
}

@keyframes circuit-glow {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

@keyframes neural-pulse {
  0%, 100% { 
    opacity: 0.2;
    transform: scaleX(1);
  }
  50% { 
    opacity: 0.8;
    transform: scaleX(1.1);
  }
}

@keyframes float-tech {
  0% { 
    transform: translateY(100vh) translateX(0px);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { 
    transform: translateY(-100px) translateX(50px);
    opacity: 0;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .neural-network {
    width: 200px;
    height: 200px;
    top: 30%;
    right: 5%;
  }
  
  .tech-element {
    font-size: 10px;
  }
  
  .network-node {
    width: 6px;
    height: 6px;
  }
  
  .network-node.large {
    width: 8px;
    height: 8px;
  }
  
  .network-node.hub {
    width: 10px;
    height: 10px;
  }
}