/* ═══════════════════════════════════════════════════════════
   UPLOAD PROGRESS BAR — COLOR ANIMATION
   ═══════════════════════════════════════════════════════════ */

/* Animated gradient flow */
@keyframes upload-gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Pulse glow effect */
@keyframes upload-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5),
                    0 0 10px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.8),
                    0 0 25px rgba(6, 182, 212, 0.5);
    }
}

/* Shimmer effect */
@keyframes upload-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Base progress bar */
.upload-progress-bar {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #3b82f6 0%,
        #06b6d4 25%,
        #8b5cf6 50%,
        #06b6d4 75%,
        #3b82f6 100%
    );
    background-size: 200% 100%;
    animation: upload-gradient-flow 3s ease infinite;
    transition: width 0.3s ease;
    overflow: hidden;
}

/* Glow effect on active upload */
.upload-progress-bar.status-uploading {
    animation: 
        upload-gradient-flow 3s ease infinite,
        upload-glow-pulse 2s ease-in-out infinite;
}

/* Shimmer overlay on active upload */
.upload-progress-bar.status-uploading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: upload-shimmer 2s ease-in-out infinite;
}

/* Paused — static gray */
.upload-progress-bar.status-paused {
    background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
    animation: none;
    box-shadow: none;
}

.upload-progress-bar.status-paused::after {
    display: none;
}

/* Processing — orange flow */
.upload-progress-bar.status-saving {
    background: linear-gradient(
        90deg,
        #f59e0b 0%,
        #f97316 50%,
        #f59e0b 100%
    );
    background-size: 200% 100%;
    animation: upload-gradient-flow 1.5s ease infinite;
}

/* Complete — green */
.upload-progress-bar.status-complete {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    animation: none;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.upload-progress-bar.status-complete::after {
    display: none;
}

/* Error — red */
.upload-progress-bar.status-error {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    animation: none;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.upload-progress-bar.status-error::after {
    display: none;
}

/* Progress track (background) */
.upload-progress-track {
    position: relative;
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0;
}

/* Percentage text animation */
.upload-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #64748b;
    margin-top: 6px;
}

.upload-percentage {
    font-weight: 700;
    color: #3b82f6;
    transition: color 0.3s ease;
}

.upload-progress-bar.status-uploading ~ .upload-item-meta .upload-percentage,
.upload-item-meta .upload-percentage.active {
    color: #3b82f6;
    animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}