/* =====================================================
   CYBERPUNK COMMAND CENTER
   RADAR SWEEP
===================================================== */

.radar-section{

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-md);

    margin-top:var(--space-lg);

}


/*
    Scope
*/

.radar-scope-wrapper{

    position:relative;

    width:100%;
    max-width:420px;

}

.radar-scope{

    width:100%;
    height:auto;

    display:block;

}

.radar-ring{

    fill:none;

    stroke:rgba(0, 247, 255, 0.18);
    stroke-width:1;

}

.radar-crosshair{

    stroke:rgba(0, 247, 255, 0.12);
    stroke-width:1;

}


/*
    Sweep beam
*/

.radar-sweep{

    fill:rgba(0, 247, 255, 0.12);
    pointer-events:none;

}

/*
    Threat Scanner modifier — same sweep, danger-red tint
    instead of cyan. Blips/ping-rings set their own color
    directly (threat-scanner.js), same as radar.js's nodes.
*/

.threat-sweep{

    fill:rgba(255, 75, 110, 0.14);

}


/*
    Blips
*/

.radar-blip{

    stroke:var(--bg-color);
    stroke-width:1.5;

    cursor:pointer;

    transition:
        r var(--transition-fast),
        filter var(--transition-fast);

}

.radar-blip:hover{

    r:8;

    filter:drop-shadow(0 0 6px currentColor);

}


/*
    Ping ring — one-shot on sweep contact
*/

@keyframes radar-ping{

    from{

        r:4;
        opacity:0.9;

    }

    to{

        r:26;
        opacity:0;

    }

}

.radar-ping-ring{

    fill:none;
    stroke-width:2;

    animation:radar-ping 0.7s ease-out forwards;

    pointer-events:none;

}


/*
    Signal pulse — recurring wave broadcast from the
    scope's center, expanding well past the outer ring
    before fading. Same expand-and-fade language as the
    ping ring above, just bigger and slower.
*/

@keyframes radar-pulse{

    from{

        r:0;
        stroke-width:3;
        opacity:0.8;

    }

    to{

        r:195;
        stroke-width:0.5;
        opacity:0;

    }

}

.radar-pulse-ring{

    fill:none;
    stroke:rgba(0, 247, 255, 0.8);

    animation:radar-pulse 3s ease-out forwards;

    pointer-events:none;

}

.threat-pulse{

    stroke:rgba(255, 75, 110, 0.8);

}


/*
    Tooltip
*/

.radar-tooltip{

    position:absolute;
    top:var(--space-sm);
    left:50%;
    transform:translateX(-50%);

    color:var(--text-color);
    font-family:var(--font-title);
    font-size:0.85rem;
    letter-spacing:.5px;

    background:var(--panel-bg);
    backdrop-filter:var(--glass-blur);

    padding:.4rem 1rem;
    border-radius:var(--radius-sm);
    border:var(--panel-border);

    pointer-events:none;
    opacity:0;

    transition:opacity var(--transition-fast);

}

.radar-tooltip.show{

    opacity:1;

}