/* Clean header scroll effects aligned with design system */
.header-transparent {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

.header-scrolled {
    /* Glassmorphism effect when scrolled */
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    /* Add significant margin on all sides when scrolled */
    margin: 0.75rem 2rem !important; /* 12px top/bottom, 32px left/right */
    border-radius: 1rem !important; /* 16px - rounded corners for the floating effect */
}

/* Header container base state - transparent by default */
.header-container {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

/* Allow header-scrolled to override the base transparent state */
.header-container.header-scrolled {
    /* Fallback background for browsers that don't support backdrop-filter */
    background: rgba(255, 255, 255, 0.95) !important;
    
    /* Modern glassmorphism effect */
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    
    /* Enhanced glassmorphism with better background for blur support */
    background: rgba(255, 255, 255, 0.8) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    margin: 0.75rem 2rem !important;
    border-radius: 1rem !important;
}

/* Allow scroll-triggered styling to work properly */

/* Mobile responsiveness */
@media (max-width: 768px) {
    .header-container.header-scrolled {
        margin: 0.5rem 0.75rem !important; /* 8px 12px on mobile */
        border-radius: 0.75rem !important; /* 12px - smaller radius on mobile */
    }
}

/* Clean transitions following design system */
.header-container {
    transition: 
        background 0.3s ease,
        backdrop-filter 0.3s ease,
        border 0.3s ease,
        border-radius 0.3s ease,
        margin 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

/* Removed gradient shimmer effect to align with design system minimalist approach */

/* Clean hover effects following design system */
.header-scrolled .group:hover img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: filter 0.2s ease;
}