/* Stats Counter Animation Styles */

.hero-stats .stat-item {
    transition: transform 0.3s ease-out;
}

.hero-stats .stat-item:hover {
    transform: translateY(-5px);
}

/* Achievement items transition */
.achievement-item {
    transition: transform 0.3s ease-out;
}

.achievement-item:hover {
    transform: translateY(-5px);
}

/* Shared counter styles for both stat numbers and achievement numbers */
.stat-number,
.achievement-number {
    display: inline-block;
    font-weight: 800;
    font-size: 1.2em;
    transition: all 0.3s ease;
    position: relative;
}

/* Add a subtle highlight effect when the counter reaches its target */
.stat-number.completed,
.achievement-number.completed {
    animation: highlightComplete 0.5s ease-in-out;
}

@keyframes highlightComplete {
    0% {
        color: inherit;
    }
    50% {
        color: #4A90E2;
    }
    100% {
        color: inherit;
    }
}

/* Add a subtle pulse effect during counting */
.stat-number.counting,
.achievement-number.counting {
    animation: pulseDuringCount 0.7s infinite alternate;
}

@keyframes pulseDuringCount {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Special styling for achievement numbers */
.achievement-number {
    font-size: 2rem;
    color: #4A90E2;
    margin-bottom: 0.5rem;
}

.achievement-number.completed {
    animation: achievementHighlight 0.8s ease-in-out;
}

@keyframes achievementHighlight {
    0% {
        color: inherit;
    }
    50% {
        color: #6C63FF;
        text-shadow: 0 0 10px rgba(108, 99, 255, 0.5);
    }
    100% {
        color: #4A90E2;
    }
}