.menu
{

}

.anchor .anchor
{
    visibility:     hidden;
    pointer-events: none;
}

.anchor:hover > .menu > .anchor
{
    visibility:     visible;
    pointer-events: auto;
}

.anchor:hover > .svg-bridge
{
    visibility: visible;
    opacity:    0%;
}

.anchor > .menu
{
    visibility:                 hidden;
    opacity:                    0%;
    transition-property:        opacity,visibility;
    transition-duration:        0.3s;
    transition-timing-function: ease-in;
    transition-delay:           0s;

    transition-behavior:        normal;
}

.anchor:hover > .menu
{
    visibility: visible;
    opacity:    100%;

}

/* --- Overlay SVG bridge (per anchor) ---------------------------------- */
.svg-bridge
{
    position:       absolute; /* we place it with JS (left/top) */
    top:            0;
    left:           0;
    z-index:        10;
    display:        block; /* must be renderable for getBBox() */
    visibility:     hidden; /* hidden until the anchor is hovered */
    pointer-events: none; /* pointer passes through except on path */
}

.svg-bridge__path
{
    pointer-events: auto; /* e.g., for hover effects on the path */
    fill:           rgba(0, 170, 85, 0.15);
    stroke:         #00AA55;
    stroke-width:   3;
}