/* Pop → settle - GPU optimized */
@keyframes popUpClick {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    25% {
        transform: translate3d(0, 0, 0) scale(0.95);
    }
    75% {
        transform: translate3d(0, 0, 0) scale(1.02);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeSlideDigit {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    50% {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }

    51% {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes flipDown {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }

    50% {
        transform: translate3d(0, 0, 0) rotateX(90deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }
}

@keyframes bounce-arrow {

    0%,
    100% {
        transform: translate3d(-50%, 0, 0);
    }

    50% {
        transform: translate3d(-50%, 10px, 0);
    }
}

@keyframes pulse-step {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 0 0 0 rgba(44, 90, 160, 0.4);
    }

    50% {
        transform: translate3d(0, 0, 0) scale(1.05);
        box-shadow: 0 0 0 8px rgba(44, 90, 160, 0);
    }
}

@keyframes spin {
    to {
        transform: translate3d(0, 0, 0) rotate(360deg);
    }
}