app/editor.css

/* Node editor custom styles and animations */

/* Animated connection lines */
@keyframes flow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20;
  }
}

.connection-animated {
  animation: flow 1s linear infinite;
  stroke-dasharray: 5, 5;
}

/* Processing pulse effect */
@keyframes processingPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.connection-processing {
  animation: processingPulse 1.5s ease-in-out infinite;
  stroke: #22c55e;
  stroke-width: 3;
  filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.5));
}

/* Flow particles effect */
@keyframes flowParticle {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.flow-particle {
  animation: flowParticle 2s linear infinite;
}

/* Node processing state */
.nb-node.processing {
  animation: processingPulse 1.5s ease-in-out infinite;
}

.nb-node.processing .nb-header {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
}