/* Header Background Scroll Effect */

.header {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.scrolled {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 4px 20px rgba(0, 212, 255, 0.1),
        0 0 40px rgba(0, 212, 255, 0.05);
}

/* Smooth transition for header elements */
.header.scrolled .header-title {
    color: var(--text-primary);
}

.header.scrolled .header-subtitle {
    opacity: 0.8;
}

.header.scrolled .nav-link {
    color: var(--text-secondary);
}

.header.scrolled .nav-link:hover {
    color: var(--text-primary);
}

.header.scrolled::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--accent-primary), 
        var(--accent-secondary), 
        transparent);
    animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}