/* KS Datawall Animation Styles - Redesign */
#ks-datawall-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#ks-datawall-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    /* Optional: background radial gradient for depth */
    /* background: radial-gradient(circle at center, rgba(30,30,30,0.5) 0%, rgba(0,0,0,0) 70%); */
}

/* Text Styles */
.ks-dw-text {
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px; /* Base size inside SVG coordinate system */
    fill: #ffffff;
    pointer-events: none;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.ks-dw-text-center {
    font-size: 16px;
    fill: #ffffff;
    font-weight: bold;
    letter-spacing: 1px;
}

.ks-dw-text-right {
    font-size: 22px;
    fill: #28a745; /* Green for construction site */
}

/* Paths */
.ks-dw-path {
    stroke: #ffffff;
    stroke-width: 1.5;
    fill: none;
    stroke-opacity: 0.15;
}

/* Shield */
.ks-dw-shield-ring {
    fill: none;
    stroke: #df1238;
    stroke-width: 2;
    stroke-dasharray: 20, 10;
    stroke-opacity: 0.6;
    transform-origin: center;
    animation: rotateShield 20s linear infinite;
}

.ks-dw-shield-inner {
    fill: rgba(223, 18, 56, 0.2);
    stroke: #df1238;
    stroke-width: 2;
    filter: drop-shadow(0 0 10px rgba(223, 18, 56, 0.5));
}

.ks-dw-pulse {
    animation: pulseShield 3s ease-in-out infinite;
}

/* Nodes */
.ks-dw-node-dot {
    fill: #888;
    stroke: none;
    transition: fill 0.3s;
}

.ks-dw-site-icon {
    stroke: #28a745;
    stroke-width: 3;
    filter: drop-shadow(0 0 5px rgba(40, 167, 69, 0.4));
}

/* Particles */
.ks-dw-particle {
    fill: #cccccc;
    transition: fill 0.3s ease;
}

.ks-dw-particle.valid {
    fill: #28a745;
    filter: drop-shadow(0 0 4px #28a745);
}

.ks-dw-particle.invalid {
    fill: #df1238;
    filter: drop-shadow(0 0 4px #df1238);
}

/* Animations */
@keyframes rotateShield {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulseShield {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}