Yarn Hero

Design a hero section with a centered editorial headline and a product frame below the fold.

Use a near-black base with a single violet accent, a 64px display face, and 15px body copy. Keep the layout on a 12-column grid with generous negative space.

Motion: one masked headline reveal, one restrained hover lift, and a scroll-linked ease on the media frame. Respect prefers-reduced-motion.

Include semantic HTML, visible focus states, and WCAG AA contrast.