/* Connector animations */
.bg-size-200 {
    background-size: 200% 100%;
}

.connector-line {
    animation: gradient-flow 3s ease infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Add pulsing dot to connectors */
.connector-line::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #EE4266;
    top: -1px;
    animation: dot-travel 3s linear infinite;
    box-shadow: 0 0 4px 1px rgba(238, 66, 102, 0.5);
}

@keyframes dot-travel {
    0% {
        left: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}