/* SynapFuse — Synaptic Edge Compute Pulses
 *
 * Animated edge styles for React Flow graphs.
 * .edge-aligned  — cyan→emerald, slow consistent pulses
 * .edge-dissonant — amber→coral, irregular flicker
 */

/* -----------------------------------------------------------------------
   Aligned state — calm data flow
   ----------------------------------------------------------------------- */

.edge-aligned .react-flow__edge-path {
  stroke: var(--sf-alignment);
  stroke-width: 1.8;
  stroke-dasharray: 8 16;
  animation: edge-pulse-aligned 3s linear infinite;
  filter: drop-shadow(0 0 4px rgba(79, 227, 193, 0.25));
}

@keyframes edge-pulse-aligned {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -48;
  }
}

/* Glow shimmer on aligned edges */
.edge-aligned .react-flow__edge-path::after {
  stroke: rgba(34, 227, 164, 0.4);
}

/* -----------------------------------------------------------------------
   Dissonant state — irregular flicker
   ----------------------------------------------------------------------- */

.edge-dissonant .react-flow__edge-path {
  stroke: var(--sf-dissonance);
  stroke-width: 1.8;
  stroke-dasharray: 4 8 12 6;
  animation: edge-pulse-dissonant 1.8s linear infinite,
             edge-flicker 0.3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px rgba(255, 159, 67, 0.3));
}

@keyframes edge-pulse-dissonant {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -60;
  }
}

@keyframes edge-flicker {
  0% {
    opacity: 1;
    stroke-width: 1.8;
  }
  50% {
    opacity: 0.6;
    stroke-width: 1.2;
  }
  100% {
    opacity: 0.9;
    stroke-width: 1.6;
  }
}

/* -----------------------------------------------------------------------
   Shared edge transitions
   ----------------------------------------------------------------------- */

.react-flow__edge-path {
  transition: stroke 0.4s var(--sf-ease),
              stroke-width 0.3s var(--sf-ease),
              filter 0.4s var(--sf-ease);
}