/* Earnings Dashboard Animations */
@keyframes coinPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes progressGlow {
    0%,
    100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
    }
}

.coin-pulse {
    animation: coinPulse 2s ease-in-out infinite;
}

.progress-glow {
    animation: progressGlow 2s ease-in-out infinite;
}

#earningsDashboard .bg-gradient-to-r {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Earning indicator animations */
.earnings-indicator {
    transition: all 0.3s ease;
}

.earnings-indicator.earning {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Stats counter animation */
.stats-counter {
    transition: all 0.5s ease;
}

.stats-counter.updated {
    transform: scale(1.1);
    color: #10b981;
}

/* Progress bar enhancements */
#playTimeProgress {
    transition: width 0.5s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
}

#playTimeProgress::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Dashboard card hover effects */
.earnings-card {
    transition: all 0.3s ease;
}

.earnings-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}