.scroll-nav {
    transition: transform 0.3s ease;
    will-change: transform;
    z-index: 1000;
}

.scroll-nav--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.scroll-nav--hidden {
    transform: translateY(-100%);
}

/* Optional: Shadow when fixed */
.scroll-nav--fixed {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Optional: Prevent content jump when fixing */
.scroll-nav--fixed + * {
    margin-top: var(--scroll-nav-height, 0px);
}