/* ===================================
   STOMP EFFECT ANIMATIONS 💥
   Visit Flow Style Premium Effects
   =================================== */

/* Stomp Animation for Calculator Numbers */
.stomp-animate {
    animation: stompEffect 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stompEffect {
    0% {
        transform: scale(1) translateY(0);
    }

    30% {
        transform: scale(1.15) translateY(-4px);
    }

    50% {
        transform: scale(0.95) translateY(2px);
    }

    70% {
        transform: scale(1.05) translateY(-1px);
    }

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

/* Number Counter Pulse Animation */
.counter-number {
    display: inline-block;
    transition: all 0.3s ease;
}

.counter-number.counting-up {
    animation: countPulse 0.6s ease;
}

@keyframes countPulse {

    0%,
    100% {
        transform: scale(1);
        color: inherit;
    }

    50% {
        transform: scale(1.2);
        color: var(--color-accent);
        text-shadow: 0 0 8px rgba(0, 184, 148, 0.4);
    }
}

/* Enhanced Savings Amount Glow */
#savingsAmount.stomp-animate {
    color: var(--color-accent);
    text-shadow: 0 2px 12px rgba(0, 184, 148, 0.3);
    font-weight: 800;
}

#totalAmount.stomp-animate {
    color: var(--color-primary);
    text-shadow: 0 2px 8px rgba(26, 43, 74, 0.2);
    font-weight: 800;
}