/* Data Visualization Component Styles */
.data-visualization {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    opacity: var(--opacity, 0.2);
    pointer-events: none;
}

/* Flow Visualization */
.data-visualization-flow .flow-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.data-visualization-flow .data-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bg-color, var(--bs-primary));
    opacity: 0.6;
    animation: flowAnimation 8s infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes flowAnimation {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    50% {
        transform: translate(calc(100vw * 0.3), calc(100vh * 0.3)) scale(1);
    }
    95% {
        opacity: 0.4;
    }
    100% {
        transform: translate(calc(100vw * 0.5), calc(100vh * 0.5)) scale(0.5);
        opacity: 0;
    }
}

/* Particles Visualization */
.data-visualization-particles .particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.data-visualization-particles .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bg-color, var(--bs-primary));
    opacity: 0.6;
    left: var(--x, 50%);
    top: var(--y, 50%);
    animation: floatAnimation 15s infinite ease-in-out;
    animation-delay: var(--delay, 0s);
}

@keyframes floatAnimation {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -30px) scale(1.2);
    }
    50% {
        transform: translate(60px, 0) scale(0.8);
    }
    75% {
        transform: translate(30px, 30px) scale(1.1);
    }
}

/* Network Visualization */
.data-visualization-network .network-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.data-visualization-network .network-node {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bg-color, var(--bs-primary));
    opacity: 0.8;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(-50%, -50%);
    animation: pulseAnimation 3s infinite ease-in-out;
}

.data-visualization-network .network-connection {
    position: absolute;
    height: 2px;
    background-color: var(--bg-color, var(--bs-primary));
    opacity: 0.3;
    transform-origin: 0 0;
}

@keyframes pulseAnimation {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

/* SVG specific styles */
.data-visualization-flow circle.data-particle {
    fill: var(--bg-color, var(--bs-primary));
    opacity: 0.6;
    animation: svgFlowAnimation 8s infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes svgFlowAnimation {
    0% {
        r: 2;
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    50% {
        r: 4;
    }
    95% {
        opacity: 0.4;
    }
    100% {
        r: 2;
        opacity: 0;
    }
}