/* Circuit Animation Styles */
.animated-circuit {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.animated-circuit svg {
  width: 100%;
  height: 100%;
}

/* Base circuit styles */
.circuit-path {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  filter: url(#glow);
  animation: 
    circuitFlow 3s linear infinite,
    colorCycle 6s linear infinite;
}

.circuit-path.vertical {
  animation-delay: -1.5s;
}

.circuit-node {
  filter: url(#glow);
  animation: nodePulse 2s ease-in-out infinite,
             colorCycle 6s linear infinite;
}

/* Animation keyframes */
@keyframes circuitFlow {
  0% {
    stroke-dashoffset: 150;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -150;
  }
}

@keyframes nodePulse {
  0%, 100% {
    r: 3;
    opacity: 0.7;
  }
  50% {
    r: 4;
    opacity: 1;
  }
}

@keyframes colorCycle {
  0% {
    stroke: #4B92FF; /* Blue */
    fill: #4B92FF;
  }
  33% {
    stroke: #22D3BE; /* Cyan */
    fill: #22D3BE;
  }
  66% {
    stroke: #9D6EF6; /* Purple */
    fill: #9D6EF6;
  }
  100% {
    stroke: #4B92FF; /* Back to Blue */
    fill: #4B92FF;
  }
}

/* Pattern color overrides */
#circuit {
  color: #4B92FF;
}

/* Optimizations for different screen sizes */
@media (max-width: 768px) {
  .circuit-path {
    stroke-width: 1.5;
  }
  .circuit-node {
    r: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-path,
  .circuit-node {
    animation: colorCycle 6s linear infinite;
  }
  .circuit-path {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
  }
  .circuit-node {
    r: 3;
  }
}