Watch the navbar as you scroll
Past a small scroll threshold the pill narrows, gains a blurred, translucent background and a soft shadow, and settles a touch further from the top edge. Scroll back to the top and it expands back to full width.
One attribute, no animation library
A passive scroll listener toggles a single `data-scrolled` attribute on the host element; every visual change is a plain CSS transition reacting to that attribute.
Shrink to grow on narrow screens
Below the desktop breakpoint the links and buttons collapse behind a hamburger button. Resize the window under 1024px, or scroll back up, to see the mobile menu.