Практика адаптивных sticky header и hero в реальных проектах

Подготовь практический документ на русском языке о реализации двух паттернов адаптивного дизайна: sticky header и hero. Материал должен быть полезен разработчику, который хочет взять решения и сразу внедрить их в проект.

Структура ответа:
1. Краткое вступление: 1-2 предложения о подходе к адаптивности, включая mobile-first, прогрессивное улучшение, производительность и доступность.
2. Sticky header:
- опиши желаемое поведение;
- покажи минимальную реализацию на чистом HTML и CSS с position: sticky;
- добавь пример поведения "скрывается вниз, показывается вверх" на небольшом JavaScript или с использованием IntersectionObserver;
- объясни адаптивные правила для mobile, tablet и desktop;
- опиши вопросы доступности, семантики, фокуса, якорных ссылок и CLS;
- перечисли типичные ошибки и способы их устранения.
3. Hero:
- опиши желаемое поведение и адаптивную композицию;
- приведи пример реализации с responsive images через picture или srcset;
- сравни фоновые изображения и img или picture с точки зрения SEO, доступности и загрузки;
- объясни, как сохранить контрастность текста, настроить вертикальное выравнивание и высоту на малых экранах;
- затронь производительность: AVIF, WebP, lazy-loading, preload, размеры по брейкпоинтам;
- расскажи, как тестировать паттерн и какие метрики смотреть, включая CLS и LCP.
4. Краткий чек-лист из 8-12 пунктов: кроссбраузерность, доступность, производительность, поведение без JavaScript, fallback, тестирование на медленных сетях.
5. Примеры кода:
- добавь 2-4 компактных завершенных фрагмента HTML, CSS и JavaScript;
- каждый фрагмент не длиннее 40-60 строк;
- перед каждым фрагментом коротко объясни, что он делает и куда его вставлять.

Ограничения:
- Объем: примерно 400-900 слов плюс код.
- Язык: русский.
- Используй одну надежную реализацию для каждого паттерна, без длинного перечисления альтернатив.
- Можно кратко упомянуть адаптацию под React или Vue в 1-2 предложениях.
- Не задавай встречных вопросов и не описывай внутренний процесс написания.