/* Pure-CSS sticky header (replaces the Alpine x-data scroll logic).
   Base styles render the "scrolled / compact" header. Browsers with
   scroll-driven-animation support animate these back to the expanded
   transparent look at the very top of the page over the first 100px
   of scroll (the previous JS threshold), then hold the scrolled state.
   Selectors intentionally mirror the shared header markup. */

#menu {
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}

#menu > div {
    max-width: 100%;
}

#menu header {
    background-color: #fff;
}

#menu nav {
    margin-top: 0;
}

#menu-logo {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

@supports (animation-timeline: scroll()) and (animation-range: 0 100px) {
    #menu {
        animation-name: menu-shadow;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }

    #menu > div {
        animation-name: menu-width;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }

    #menu header {
        animation-name: menu-bg;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }

    #menu nav {
        animation-name: menu-mt;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }

    #menu-logo {
        animation-name: menu-logo;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root);
        animation-range: 0 100px;
    }
}

@keyframes menu-shadow {
    from {
        box-shadow: 0 0 #0000;
    }
    to {
        box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    }
}

@keyframes menu-width {
    from {
        max-width: 42rem;
    }
    to {
        max-width: 100%;
    }
}

@keyframes menu-bg {
    from {
        background-color: transparent;
    }
    to {
        background-color: #fff;
    }
}

@keyframes menu-mt {
    from {
        margin-top: 2.5rem;
    }
    to {
        margin-top: 0;
    }
}

@keyframes menu-logo {
    0%, 99.9% {
        display: none;
        margin-left: auto;
        margin-right: auto;
    }
    100% {
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
}