/* ==========================================================================
   Anmol Digital — Transparent Header on Scroll
   ========================================================================== */

/*
 * Default state remains unchanged.
 * navigation.js adds .is-scrolled after the page moves more than 12px.
 */

.site-header.is-scrolled {
    border-bottom-color: rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .20) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .08) !important;
    backdrop-filter: blur(20px) saturate(165%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.08) !important;
}

/*
 * Keep the menu capsule readable while the header surface is transparent.
 */
.site-header.is-scrolled .desktop-navigation__list {
    border-color: rgba(255, 255, 255, .44) !important;
    background: rgba(255, 255, 255, .66) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.site-header.is-scrolled .desktop-navigation__link.is-active:not(
    .desktop-navigation__link--button
) {
    background: rgba(255, 255, 255, .92) !important;
}

.site-header.is-scrolled .mobile-menu-toggle {
    border-color: rgba(255, 255, 255, .48) !important;
    background: rgba(255, 255, 255, .74) !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/*
 * Smooth transition between the normal white header and transparent state.
 */
.site-header {
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        backdrop-filter 220ms ease !important;
}

.site-header .desktop-navigation__list,
.site-header .mobile-menu-toggle {
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease !important;
}

@media (max-width: 576px) {
    .site-header.is-scrolled {
        background: rgba(255, 255, 255, .24) !important;
        backdrop-filter: blur(18px) saturate(155%) brightness(1.08) !important;
        -webkit-backdrop-filter: blur(18px) saturate(155%) brightness(1.08) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header .desktop-navigation__list,
    .site-header .mobile-menu-toggle {
        transition: none !important;
    }
}