/* Animations for node transmission effects */

/* Signal line styling */
.signal-line {
    position: absolute;
    height: 2px;
    background-color: transparent;
    transform-origin: left center;
    pointer-events: none;
    z-index: 1;
}

/* Signal particle styling */
.signal-particle {
    position: absolute;
    margin : -3px 0 0 -3px; /* Center the particle */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 8px var(--primary-color);
}

/* Primary signals - match the border color */
.signal-particle-primary {
    width: 8px;
    height: 8px;
    opacity: 0.9;
}

/* Secondary signals - match the fill color */
.signal-particle-secondary {
    opacity: 0.7;
}

/* Animation for signal particles */
@keyframes signal-travel {
    0% {
        left: 0%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Animation for signal paths to glow */
@keyframes signal-path-glow {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0.2;
    }
    20% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.5;
    }
    80% {
        opacity: 0.4;
    }
    95% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
    }
}

/* Transmission container */
.transmission-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}