/* game-like current flow animation (dots moving on solid line) */
@keyframes flowDotAnimation {
    from {
        stroke-dashoffset: 45;
        /* Pattern is 45 (0 + 45), offset by 45 for perfect seamless loop */
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Base dot style */
.energy-flow-dot-base {
    stroke-dasharray: 0 45;
    /* 0 dash with round cap = circle, spaced further apart */
    animation: flowDotAnimation 3s linear infinite;
    /* slower, 3 seconds */
    stroke-linecap: round !important;
    pointer-events: none;
    /* Do not block mouse events on base line */
}

/* Base dot style reverse */
.energy-flow-dot-reverse-base {
    stroke-dasharray: 0 45;
    animation: flowDotAnimation 3s linear infinite reverse;
    stroke-linecap: round !important;
    pointer-events: none;
}

/* Green (Low current) */
.flow-green {
    stroke: #4CAF50 !important;
    filter: drop-shadow(0 0 4px #4CAF50);
}

/* Yellow (Medium current) */
.flow-yellow {
    stroke: #FFEB3B !important;
    filter: drop-shadow(0 0 5px #FFEB3B);
}

/* Red (High current) */
.flow-red {
    stroke: #F44336 !important;
    filter: drop-shadow(0 0 6px #F44336);
}