/* ============================================
   SCROLL PROGRESS BAR STYLES
   Modern, smooth, eye-catching design
   ============================================ */

/* Progress Bar Container */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 9999;
    transition: height 0.3s ease, opacity 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Progress Bar Fill */
.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4FD1C5 0%, #FFD700 50%, #4FD1C5 100%);
    background-size: 200% 100%;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(79, 209, 197, 0.5);
    animation: shimmer 3s ease-in-out infinite;
    position: relative;
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Glow effect on progress bar */
.scroll-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
    animation: glow 1.5s ease-in-out infinite;
}

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

/* Milestone color variations */
.scroll-progress-container.milestone-start .scroll-progress-bar {
    background: linear-gradient(90deg, #4FD1C5 0%, #5FDDD1 100%);
}

.scroll-progress-container.milestone-quarter .scroll-progress-bar {
    background: linear-gradient(90deg, #4FD1C5 0%, #67E5DD 100%);
}

.scroll-progress-container.milestone-half .scroll-progress-bar {
    background: linear-gradient(90deg, #67E5DD 0%, #FFD700 100%);
}

.scroll-progress-container.milestone-three-quarters .scroll-progress-bar {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
}

.scroll-progress-container.milestone-complete .scroll-progress-bar {
    background: linear-gradient(90deg, #4FD1C5 0%, #FFD700 50%, #4FD1C5 100%);
    animation: celebrate 0.5s ease;
}

@keyframes celebrate {
    0%, 100% {
        height: 4px;
    }
    50% {
        height: 6px;
    }
}

/* Hover effect - make bar slightly taller */
.scroll-progress-container:hover {
    height: 5px;
}

/* Hide on very small screens if needed */
@media (max-width: 480px) {
    .scroll-progress-container {
        height: 3px;
    }
}

/* Smooth appearance on page load */
.scroll-progress-container {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Percentage indicator (optional - shown on hover) */
.scroll-progress-container::before {
    content: attr(data-progress) '%';
    position: absolute;
    right: 20px;
    top: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #4FD1C5;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scroll-progress-container:hover::before {
    opacity: 1;
}

/* Pulse effect when reaching milestones */
@keyframes milestone-pulse {
    0% {
        box-shadow: 0 0 10px rgba(79, 209, 197, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(79, 209, 197, 0.8), 
                    0 0 30px rgba(255, 215, 0, 0.4);
    }
    100% {
        box-shadow: 0 0 10px rgba(79, 209, 197, 0.5);
    }
}

.scroll-progress-container.milestone-quarter .scroll-progress-bar,
.scroll-progress-container.milestone-half .scroll-progress-bar,
.scroll-progress-container.milestone-three-quarters .scroll-progress-bar {
    animation: shimmer 3s ease-in-out infinite, milestone-pulse 1s ease;
}

/* Ensure it's above header but below modals */
.scroll-progress-container {
    z-index: 9999;
}

/* Optional: Dark mode support */
@media (prefers-color-scheme: dark) {
    .scroll-progress-container {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scroll-progress-bar,
    .scroll-progress-bar::after,
    .scroll-progress-container {
        animation: none !important;
        transition: none !important;
    }
}