Advanced Prompt for Responsive Scroll-Driven Navbar Shrink

Develop a professional navigation component in React. Use Framer Motion's useScroll to track the vertical scroll position. As the user moves away from the top of the page, the navbar should transition from [INITIAL_HEIGHT] to [COLLAPSED_HEIGHT]. Simultaneously, the background should change to [BG_TRANSITION_COLOR] and the logo should scale to [LOGO_SCALE]. Use useSpring to ensure the transition is buttery smooth. Add a 'hidden' state that triggers when scrolling down and a 'visible' state when scrolling up (head-up display pattern). Ensure the component is accessible with appropriate ARIA labels and focus management.