/* Particles animation */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      2px 2px at 20px 30px,
      var(--primary-cyan),
      transparent
    ),
    radial-gradient(2px 2px at 40px 70px, var(--primary-teal), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--primary-cyan), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particles 20s linear infinite;
  opacity: 0.6;
}

@keyframes particles {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-200px, -100px);
  }
}

/* Pulse animation */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
    box-shadow: 0 0 10px rgba(0, 212, 170, 0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 212, 170, 1);
  }
}

.pulse-indicator {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Data flow animation */
@keyframes dataFlow {
  0%,
  100% {
    opacity: 0.4;
    box-shadow: 0 0 3px rgba(0, 212, 170, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.8);
  }
}

.connection-line {
  animation: dataFlow 2s ease-in-out infinite;
}

/* Scroll animations */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.scroll-left {
  animation: scrollLeft 30s linear infinite;
}

.scroll-right {
  animation: scrollRight 35s linear infinite;
}