.animate-detection {
    animation: detection 12s ease-in-out infinite;
}


@keyframes detection {

    0% {
        filter: blur(6px);
        opacity: .25;
        transform: scale(.98);
    }

    35% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }

    75% {
        filter: blur(0);
        opacity: 1;
    }

    100% {
        filter: blur(6px);
        opacity: .25;
        transform: scale(.98);
    }
}



.animate-progress {
    animation: progress 3s linear infinite;
}


@keyframes progress {

    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(250%);
    }
}



.animate-vehicle-frame {
    animation: vehicleFrame 8s ease-in-out infinite;
}


@keyframes vehicleFrame {

    0% {
        opacity: .3;
        transform: scale(.97);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: .8;
    }

    100% {
        opacity: .3;
        transform: scale(.97);
    }
}



.animate-scan-line {
    animation: scanLine 5s ease-in-out infinite alternate;
}


@keyframes scanLine {

    from {
        transform: translateY(-20%);
        opacity: .35;
    }

    to {
        transform: translateY(250%);
        opacity: .95;
    }
}



.animate-scan-area {
    animation: scanArea 8s ease-in-out infinite;
}


@keyframes scanArea {

    0%,100% {
        opacity: .25;
    }

    50% {
        opacity: .55;
    }
}
