/* ============================================
   HOW IT WORKS ANIMATIONS
   ============================================ */


/* ============================================
   STEP 1 — RADAR SCAN
   ============================================ */

#radar-beam {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

#radar-beam.radar-active {
    animation: radarScan 1.8s linear infinite;
}

@keyframes radarScan {
    0% {
        opacity: 0;
        transform: rotate(0deg);
    }

    5% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: rotate(360deg);
    }
}


/* ============================================
   STEP 2 — DATA TRANSFER
   ============================================ */

#arrow-left,
#arrow-right {
    transform-box: fill-box;
}

.move-left {
    animation: moveLeft 1.5s ease-in-out infinite;
}

.move-right {
    animation: moveRight 1.5s ease-in-out infinite;
}

@keyframes moveLeft {
    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(18px);
    }
}

@keyframes moveRight {
    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-18px);
    }
}


/* ============================================
   STEP 3 — TALENT MAPPING
   ============================================ */

/* ============================================
   STEP 3 — CURATED SHORTLIST
   ============================================ */

/* Линии видны всегда */

.mapping-line {
    opacity: .45;
    transition: opacity .3s ease;
}

.mapping-line.animate {
    animation: flowLine .8s ease;
}

@keyframes flowLine {

    0% {
        opacity: .45;
        stroke-width: .6;
    }

    50% {
        opacity: 1;
        stroke-width: 1.6;
    }

    100% {
        opacity: .45;
        stroke-width: .6;
    }
}


/* Серые точки слева */

.source-node {
    transform-box: fill-box;
    transform-origin: center;
}

.source-node.animate {
    animation: sourcePulse .45s ease;
}

@keyframes sourcePulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}


/* Жёлтые точки справа */

.target-node {
    opacity: .4;
    transform-box: fill-box;
    transform-origin: center;
}

.target-node.animate {
    animation: targetPulse .6s ease;
}

@keyframes targetPulse {

    0% {
        transform: scale(1);
        opacity: .4;
    }

    50% {
        transform: scale(1.8);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   STEP 4 — SHORTLIST / DELIVERY
   ============================================ */

/* сюда потом добавим анимацию для step-4 */