/* Scroll-based Header Visibility */

/* Logo and company name container */
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

/* When scrolled past hero section */
.scrolled .header-brand {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hide brand at top of page */
.at-top .header-brand {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Smooth transition for the entire nav */
.glass-nav {
    transition: all 0.3s ease-in-out;
}

/* Header completely transparent at top of page */
.glass-nav.at-top {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid transparent !important;
}

/* Header with background when scrolled */
.glass-nav.scrolled {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ensure nav items stay visible */
.glass-nav nav {
    opacity: 1 !important;
}

/* Nav links with subtle shadow for visibility on transparent background */
.glass-nav.at-top a {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Remove text shadow when scrolled (background provides contrast) */
.glass-nav.scrolled a {
    text-shadow: none;
}

/* Social icons also need shadow when at top */
.glass-nav.at-top .header-social a {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .header-brand {
        /* On mobile, you might want different behavior */
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    
    .at-top .header-brand {
        /* Optional: Keep visible on mobile even at top */
        opacity: 0;
        transform: translateY(-10px);
    }
    
    .scrolled .header-brand {
        opacity: 1;
        transform: translateY(0);
    }
}