Features
- Active pill follows selected item with elastic easing
- Responsive behavior: horizontal on desktop, vertical on mobile
- CSS-first animation, JS only updates active state
How It Works
- This demo directly reuses `src/components/NavLinks.astro` from the real site header.
- Active route state is computed from `window.location.pathname` and synchronized on `astro:page-load`.
- The active item exposes an anchor (`anchor-name`), and `.nav::before` is attached via `position-anchor`.
- Indicator geometry comes from `anchor(top/left/right/bottom)` so CSS can animate the pill motion.
- For cross-page navbar animations, keep the nav DOM stable with `transition:persist` and split persist keys by locale.