Создайте премиум-сайт для наушников с 3D-анимациями и интерактивными эффектами**

Концепция:
Визуальное путешествие по миру звука, стиля и инноваций. Пользователь погружается в детали дизайна через динамичные 3D-трансформации и плавные переходы.
---

## 📐 Структура страницы
**1. Главный экран (Hero Section)**
— Заголовок: «Почувствуйте звук. Ощутите инновации»
— Подзаголовок: «Премиум наушники нового поколения»
— CTA-кнопка: «Открыть для себя»
— 3D-модель наушников в центре с медленным вращением

**2. Секция «Дизайн в деталях»**
— Заголовок: «Каждая деталь имеет значение»
— Крупные планы: амбушюры, оголовье, элементы управления
— Текст: описание материалов (кожа, металл, текстиль)

**3. Секция «Цветовая палитра»**
— Заголовок: «Выберите свой стиль»
— 5-7 цветовых вариантов с названиями на русском
— Интерактивный переключатель цветов

**4. Секция «Технологии»**
— Заголовок: «Инновации внутри»
— Иконки с текстом: шумоподавление, время работы, качество звука
— Анимированные иконки при скролле

**5. Секция «В комплекте»**
— Заголовок: «Всё необходимое в элегантном кейсе»
— Анимация складывания наушников в чехол
— Список комплектации

**6. Футер**
— Контакты, соцсети, кнопка «Купить сейчас»
---

## 🎬 Ключевые анимационные сцены

**Сцена 1: Вступление**
— Наушники появляются из глубины (translateZ от -1000px до 0)
— Плавное вращение на 360° вокруг оси Y (rotateY)
— Длительность: 3 секунды, easing: cubic-bezier

**Сцена 2: Погружение в кейс**
— Наушники складываются и помещаются в чехол
— Используется последовательность keyframes
— Чехол закрывается с эффектом глубины (perspective: 1000px)

**Сцена 3: Цветовые переходы**
— Смена цвета наушников через gradient overlay
— Фоновое освещение меняется синхронно с цветом
— Transition: 0.8s ease-in-out

**Сцена 4: Детали мастерства**
— Zoom-эффект на детали (scale от 1 до 2.5)
— Параллакс-эффект при скролле
— Подсветка текстур через градиентные маски

---

## ⚙️ Технические требования

**CSS Transform (строго):**
```
transform: translateX() translateY() translateZ() 
           rotateX() rotateY() rotateZ() 
           scale() perspective();
transform-style: preserve-3d;
perspective: 1000px;
```

**Запрещено использовать:**
— Свойство z (устаревшее)
— Проблемные webpack-коллбэки
— Тяжелые JavaScript-библиотеки

**Разрешено:**
— CSS Animations и Transitions
— Intersection Observer API для триггеров
— requestAnimationFrame для плавности
— GSAP (опционально, если поддерживается)

---

## 🎨 Визуальные эффекты

**1. 3D-трансформации**
— Все карточки и элементы с preserve-3d
— Эффект параллакса при движении мыши
— Тени с учетом положения в 3D-пространстве

**2. Динамическое освещение**
— Градиенты меняются при выборе цвета
— Ambient-подсветка синхронизирована с элементами
— Световые блики на поверхности наушников

**3. Система частиц**
— Частицы появляются при скролле
— Реакция на движение курсора (parallax)
— Цвет частиц соответствует выбранной теме

**4. Микроанимации**
— Hover-эффекты на кнопках (scale, shadow)
— Плавное появление текста (fade-in + translateY)
— Пульсация CTA-кнопок

---

## 🎨 Цветовая палитра (минимум 5 вариантов)

1. **Полночный чёрный** — #1a1a1a
2. **Космический серый** — #4a4a4a
3. **Арктический белый** — #f5f5f5
4. **Глубокий синий** — #1e3a8a
5. **Закатный красный** — #dc2626
6. **Лесной зелёный** — #059669 (опционально)
7. **Розовое золото** — #e879f9 (опционально)

---

## 🎭 Настроение и стиль

— **Премиум**: чистые линии, минимализм, качественная типографика
— **Технологичный**: футуристичные элементы, точные анимации
— **Динамичный**: постоянное движение, живой интерфейс
— **Современный**: актуальные тренды веб-дизайна 2025-2026

---

## 📝 Текстовое наполнение (примеры на русском)

**Заголовки:**
— «Почувствуйте звук. Ощутите инновации»
— «Дизайн, который вдохновляет»
— «Технологии будущего уже здесь»

**Описания:**
— «Премиум материалы: натуральная кожа и авиационный алюминий»
— «40 часов автономной работы без подзарядки»
— «Активное шумоподавление нового поколения»

**CTA:**
— «Открыть для себя»
— «Купить сейчас»
— «Узнать больше»

---

## ✅ Чек-лист перед экспортом

- [ ] Все тексты на русском языке
- [ ] Используется только корректный CSS Transform
- [ ] Нет свойства z в transform
- [ ] Все 3D-элементы имеют preserve-3d
- [ ] Анимации плавные (60 FPS)
- [ ] Нет ошибок webpack/runtime
- [ ] Адаптивность для мобильных устройств
- [ ] Все цвета из палитры представлены...