Build a Ken Burns Effect Hero

Generate the Liquid, CSS, and JavaScript for a hero section with a Ken Burns zoom-and-pan effect on the background image, that I can paste into my theme as a custom section on my homepage. Use [IMAGE_URL] as the background. Apply a slow zoom-and-pan animation that gradually scales the image from [SCALE_START] to [SCALE_END] over [DURATION_SECONDS] seconds and then reverses. The animation should loop continuously and feel cinematic. Overlay the heading [HEADLINE_TEXT] in [TEXT_COLOR] at [HEADING_SIZE] pixels, centered on the section. Add a subheadline [SUBHEADLINE_TEXT] and a CTA button labeled [CTA_TEXT] linking to [CTA_URL] in [BUTTON_COLOR]. Apply a [OVERLAY_COLOR] overlay at [OVERLAY_OPACITY] percent opacity. Set the section height to [HEIGHT] pixels. Use CSS animations rather than JavaScript for smooth performance. On mobile, reduce the animation scale range for better performance. Finally, tell me exactly which section file to create and how to add it to my homepage through the Shopify theme editor.