Sticky Header with Scroll Behavior

Create a sticky header section for my Shopify theme that remains fixed at the top of the viewport when the customer scrolls past [SCROLL_THRESHOLD] pixels. The header should contain three areas: a logo on the [LOGO_POSITION] side using an image_picker setting, a navigation menu in the center pulled from the [MENU_HANDLE] menu handle, and a utility bar on the right with cart icon, search icon, and account icon. When the header becomes sticky, it should shrink in height from [INITIAL_HEIGHT] to [STICKY_HEIGHT] pixels with a smooth CSS transition of [TRANSITION_SPEED] milliseconds. Include settings for background color [HEADER_BG_COLOR], sticky background color [STICKY_BG_COLOR], text color [TEXT_COLOR], and a toggle to enable or disable a bottom border shadow when sticky. The header should add a CSS class [STICKY_CLASS] to the header element when in sticky mode. On mobile viewports below [MOBILE_BREAKPOINT] pixels, replace the navigation with a hamburger menu icon that opens a slide-out drawer from the [DRAWER_DIRECTION] side. Include an optional announcement bar slot above the header that hides when scrolling down and reappears when scrolling up. Provide the complete Liquid section file with schema, CSS, and JavaScript.