@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 8px var(--green);
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 4px var(--green);
    }
}

@keyframes bounce-hint {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

@keyframes spin-ring {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes bar-grow {
    to {
        transform: scaleX(1);
    }
}