/* Node editor custom styles and animations */

/* ========================================
   CONNECTION LINE ANIMATIONS
   ======================================== */

/* Animation for regular connection lines when dragging - now truly continuous */
@keyframes flow {
  from {
    stroke-dashoffset: 10;   /* Start offset equal to one complete dash cycle */
  }
  to {
    stroke-dashoffset: 0;    /* Move to next cycle, creating seamless continuous flow */
  }
}

/* Applied to connection lines when user is actively dragging to connect nodes */
.connection-animated {
  animation: flow 0.8s linear infinite;  /* Smooth continuous animation, slightly faster */
  stroke-dasharray: 5, 5;               /* Create dashed line: 5px dash, 5px gap pattern */
}

/* Animation for processing connections - shows data flowing through active connections - now truly continuous */
@keyframes processingFlow {
  from {
    stroke-dashoffset: 12;   /* Start offset equal to one complete dash cycle (8+4=12) */
  }
  to {
    stroke-dashoffset: 0;    /* Move to next cycle, creating seamless continuous flow */
  }
}

/* Applied to connection lines when nodes are actively processing data */
.connection-processing {
  animation: processingFlow 1.0s linear infinite;  /* Smooth continuous animation, optimized timing */
  stroke: #22c55e;                                 /* Green color to indicate active processing */
  stroke-width: 3;                                 /* Thicker line to make it more prominent */
  stroke-dasharray: 8, 4;                          /* Longer dashes (8px) with smaller gaps (4px) for better visibility */
}

/* ========================================
   PARTICLE FLOW EFFECT (EXPERIMENTAL)
   ======================================== */

/* Animation for particles flowing along paths - uses CSS motion path */
@keyframes flowParticle {
  0% {
    offset-distance: 0%;     /* Start at beginning of path */
    opacity: 0;              /* Fade in from transparent */
  }
  10% {
    opacity: 1;              /* Fully visible after 10% of animation */
  }
  90% {
    opacity: 1;              /* Stay visible until 90% of animation */
  }
  100% {
    offset-distance: 100%;   /* End at end of path */
    opacity: 0;              /* Fade out to transparent */
  }
}

/* Class for individual particles flowing along connection paths */
.flow-particle {
  animation: flowParticle 2s linear infinite;  /* 2 second cycle for particle to travel full path */
}

/* ========================================
   NODE PROCESSING STATES
   ======================================== */

/* Animation for nodes themselves when they're processing */
.nb-node.processing {
  animation: processingPulse 1.5s ease-in-out infinite;  /* Gentle pulsing effect */
}

/* Special styling for processing node headers */
.nb-node.processing .nb-header {
  /* Subtle green gradient background to indicate processing state */
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
}