/**
 * Scroll Progress Bar Styles
 */

.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(
        90deg,
        rgba(255, 120, 80, 1) 0%,
        rgba(255, 177, 66, 1) 50%,
        rgba(255, 107, 129, 1) 100%
    );
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 20px rgba(255, 120, 80, 0.5),
                0 0 40px rgba(255, 177, 66, 0.3);
}

/* Add glow animation */
@keyframes progress-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 120, 80, 0.5),
                    0 0 40px rgba(255, 177, 66, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 120, 80, 0.7),
                    0 0 60px rgba(255, 177, 66, 0.5);
    }
}

.scroll-progress-bar {
    animation: progress-glow 3s ease-in-out infinite;
}