.radar {
    width: 80px;
    height: 80px;
    margin: 6px auto 22px;
    position: relative;
    border-radius: 50%;
    background: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar svg.sweep {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: radarSpin 1.1s linear infinite;
}

.radar svg.sweep .track {
    fill: none;
    stroke: var(--border);
    stroke-width: 4;
}

.radar svg.sweep .arc {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 60 240;
}

.radar .dotc {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-light);
    position: relative;
    z-index: 1;
}

.radar svg.tick {
    position: absolute;
    width: 32px;
    height: 32px;
    color: var(--on-accent);
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    transition: stroke-dashoffset .35s ease .1s;
    opacity: 0;
}

.radar.done {
    animation: radarPop .35s cubic-bezier(.2, .9, .3, 1.4);
    background: var(--accent);
}

.radar.done svg.sweep {
    display: none;
}

.radar.done .dotc {
    display: none;
}

.radar.done svg.tick {
    opacity: 1;
    stroke-dashoffset: 0;
}

@keyframes radarSpin {
    to { transform: rotate(360deg); }
}

@keyframes radarPop {
    0% { transform: scale(.88); }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); }
}