/**
 * D3 Globe Visualization Styles
 * CSP-compliant external stylesheet
 */

.d3-globe-svg {
    background: #0a0a0a;
    border: 1px solid #00f8c8;
    border-radius: 8px;
}

.globe-ocean {
    fill: #0a0a0a;
    stroke: #00f8c8;
    stroke-width: 2px;
}

.globe-graticule {
    fill: none;
    stroke: #00f8c8;
    stroke-width: 0.5px;
    stroke-opacity: 0.3;
}

.globe-land {
    fill: #1a1a1a;
    stroke: #00f8c8;
    stroke-width: 0.5px;
}

.globe-land-fallback {
    fill: none;
    stroke: #00f8c8;
    stroke-width: 1px;
    stroke-dasharray: 5,5;
}

.marker {
    fill: #00f8c8;
    stroke: #00d4aa;
    stroke-width: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
}

.marker.marker-hidden {
    opacity: 0;
    pointer-events: none;
}

.marker:hover,
.marker.marker-hover {
    r: 6;
    fill: #00d4ff;
    stroke: #fff;
    stroke-width: 3px;
}

@keyframes marker-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.marker-pulse {
    animation: marker-pulse 2s infinite;
}

.marker-pulse.marker-hidden {
    animation: none;
}