/* First, add the filter definitions to the top of your CSS */
@keyframes pulse {
    0% { filter: url(#glow-soft); }
    50% { filter: url(#glow-strong); }
    100% { filter: url(#glow-soft); }
}

/* Update your existing styles */
.border-line {
    stroke: #6AFFAF;
    stroke-width: 6;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
    filter: url(#glow-soft); /* Apply the soft glow filter */
    stroke-linecap: round;
}

.vertex-dot {
    fill: #6AFFAF;
    shape-rendering: geometricPrecision;
    r: 4; /* Make dots slightly bigger */
    filter: url(#glow-soft); /* Apply the soft glow filter */
}

.vertex-dot:hover {
    fill: #00EDB5;
    cursor: pointer;
    filter: url(#glow-strong); /* Stronger glow on hover */
    r: 6; /* Make it slightly bigger on hover */
    transition: fill 0.2s, r 0.2s;
}

/* Optional: add subtle animation to make it more lively */
.animate-glow {
    animation: pulse 3s infinite ease-in-out;
}

#clippedShapeFill {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #6AFFAF;
    clip-path: polygon(200px 50px, 350px 150px, 300px 300px, 100px 300px, 50px 150px);
    opacity: 0; /* Hidden by default */
    transition: clip-path 0.2s linear;
}

.category-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #6AFFAF;
    padding: 8px 12px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(106, 255, 175, 0.5);
    border: 1px solid #6AFFAF;
    transform: translateX(-50%); /* Center horizontally */
    text-align: center;
    min-width: 100px;
    display: none;
}

.category-tooltip:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.tooltip-category {
    font-weight: bold;
    margin-bottom: 4px;
}

.tooltip-score {
    font-size: 1.2em;
}

/* Style for highlighted dots */
.vertex-dot.highlight {
    fill: #FFF;
    filter: url(#glow-strong);
    r: 6; /* Make it a bit bigger when highlighted */
    transition: fill 0.2s, r 0.2s;
}