/* ============================================
   HERO SECTION - REFACTORED
   Mobile-first, no !important, clean code
   Совместимость со старыми классами для JS
   ============================================ */

/* ===== BASE STYLES (MOBILE) ===== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-4);
  padding-top: calc(var(--header-height-mobile) + var(--space-8));
  overflow: hidden;
  background: transparent; /* Прозрачный! Фон идет от .site-bg */
}

/* Overlay для затемнения уже есть в main.css (.hero::after) */
/* Не добавляем свой, чтобы не было двойного затемнения */


/* ===== 3D BACKGROUND ===== */

/* Сохраняем старые классы для совместимости с JS */
.hero-3d-bg {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-base) + 1);
  overflow: hidden;
  pointer-events: none;
}

.hero-3d-bg__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-3d-bg__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(227, 19, 191, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.hero-3d-bg__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Ленты с карточками - СОХРАНЯЕМ СТАРЫЕ КЛАССЫ */
.belt {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200px; /* Меньше на мобилке */
  display: flex;
  overflow: hidden;
}

.belt--back {
  top: 15%;
  left: -5%;
  width: 120%;
  opacity: 0.9;
  transform: rotate(-2deg);
}

.belt--front {
  bottom: 15%;
  right: -5%;
  width: 130%;
  opacity: 0.95;
  transform: rotate(2deg);
}

.belt__mask {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.belt__track {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Анимация ТОЛЬКО для лент внутри hero */
.hero .belt__track {
  animation: scroll-belt linear infinite;
}

.hero .belt--back .belt__track {
  animation-duration: 150s;
}

.hero .belt--front .belt__track {
  animation-duration: 135s;
  animation-direction: reverse;
}

.belt__set {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1);
}

.belt img {
  height: 160px; /* Меньше на мобилке */
  width: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  flex-shrink: 0;
}

@keyframes scroll-belt {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Анимация для subscribe (используется в main.css) */
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== CONTENT ===== */

.hero-content-wrapper {
  position: relative;
  z-index: calc(var(--z-base) + 100);
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
}

.hero-content {
  text-align: center;
  padding: 0;
  /* Glassmorphism эффект */
  background: rgba(15, 15, 30, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hero-content h1,
.hero h1 {
  font-size: var(--font-size-4xl); /* 36px на мобилке */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
  color: white;
  /* Glow эффект для заголовка */
  text-shadow:
    0 0 40px rgba(227, 19, 191, 0.5),
    0 0 80px rgba(227, 19, 191, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: -0.02em;
}

.hero-content > p,
.hero-content p:first-of-type {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-8);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== BUTTONS ===== */

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Сохраняем старые классы кнопок */
.btn-primary,
.btn-wb {
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.btn-wb {
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.btn-wb:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
  background: rgba(227, 19, 191, 0.06);
}

/* ===== SEARCH ===== */

.hero-search {
  margin: var(--space-10) auto var(--space-6);
  max-width: 680px;
}

.search-wrapper {
  display: flex;
  align-items: center;
  background: white;
  border-radius: var(--radius-full);
  padding: var(--space-2);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
}

#globalSearch {
  flex: 1;
  min-width: 0;
  border: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  outline: none;
  background: transparent;
  color: var(--color-text);
}

#globalSearch::placeholder {
  color: var(--color-text-lighter);
}

.search-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.search-btn:hover {
  background: var(--color-primary-dark);
}

.search-hint {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-top: var(--space-3);
}

/* ===== RESPONSIVE ===== */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .hero {
    padding: var(--space-12) var(--space-6);
    padding-top: calc(var(--header-height-desktop) + var(--space-12));
  }

  .hero-content {
    padding: var(--space-12) var(--space-8); /* Больше padding на планшете */
  }

  .belt {
    height: 240px;
  }

  .belt img {
    height: 200px;
  }

  .hero-content h1,
  .hero h1 {
    font-size: var(--font-size-5xl); /* 48px на планшете */
  }

  .hero-content > p,
  .hero-content p:first-of-type {
    font-size: var(--font-size-xl);
  }

  .hero-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .btn-primary,
  .btn-wb {
    min-width: 200px;
    width: auto;
  }

  #globalSearch {
    font-size: var(--font-size-lg);
  }
}

/* Mobile - меньше padding для glassmorphism */
@media (max-width: 767px) {
  .hero-content {
    padding: var(--space-6) var(--space-4);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .hero-content h1,
  .hero h1 {
    font-size: var(--font-size-6xl); /* 60px на десктопе */
  }

  .hero-content {
    max-width: 900px;
    margin: 0 auto;
  }

  .btn-primary,
  .btn-wb {
    padding: var(--space-5) var(--space-12);
    font-size: var(--font-size-lg);
  }
}

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {
  .hero .belt--back .belt__track {
    animation-duration: 180s; /* Медленнее на больших экранах */
  }

  .hero .belt--front .belt__track {
    animation-duration: 165s;
  }
}

/* ===== UTILITIES ===== */

/* Scroll hint (анимированная стрелка) */
.scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: white;
  opacity: 0.7;
  cursor: pointer;
  animation: bounce 2s infinite;
  z-index: calc(var(--z-base) + 100);
}

@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* Скрыть scroll hint на маленьких экранах */
@media (max-width: 640px) {
  .scroll-hint {
    display: none;
  }
}

/* ===== PARTICLES (ЧАСТИЦЫ) ===== */

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden; /* ВАЖНО: не даём частицам создавать скролл */
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  animation: float 20s infinite linear;
}

/* Розовые частицы */
.particle:nth-child(3n) {
  background: radial-gradient(circle, rgba(227, 19, 191, 0.8) 0%, transparent 70%);
  box-shadow: 0 0 12px rgba(227, 19, 191, 0.6);
}

/* Синие частицы */
.particle:nth-child(3n+1) {
  background: radial-gradient(circle, rgba(102, 126, 234, 0.7) 0%, transparent 70%);
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

/* Анимация плавания */
@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(-100vh) translateX(50px);
  }
}

/* Меньше частиц на мобилке (управляется из JS) */
@media (max-width: 768px) {
  .particle {
    width: 6px;
    height: 6px;
  }
}

/* ===== NOTES ===== */

/*
ИЗМЕНЕНИЯ:

✅ Mobile-first подход
✅ CSS-переменные вместо магических чисел
✅ БЕЗ !important (ноль использований!)
✅ Стандартные breakpoints (768, 1024, 1280)
✅ СОХРАНЕНЫ старые классы для совместимости с JS
✅ Относительные единицы (rem, %, vh)
✅ Правильная специфичность
✅ Добавлены стили для частиц (.hero-particles, .particle)
✅ Исправлена совместимость с .subscribe анимацией

СОХРАНЕННЫЕ КЛАССЫ (для JS и совместимости):
- .hero-3d-bg, .hero-3d-bg__stage, .hero-3d-bg__glow, .hero-3d-bg__noise
- .belt, .belt--back, .belt--front, .belt--subscribe
- .belt__track, .belt__set, .belt__mask
- .hero-content-wrapper, .hero-content
- .btn-primary, .btn-wb
- .search-wrapper, #globalSearch, .search-btn
- .hero-particles, .particle

СПЕЦИФИЧНОСТЬ АНИМАЦИЙ:
- .hero .belt__track - анимация только для hero лент
- .belt--subscribe .belt__track - своя анимация (в main.css)

РЕЗУЛЬТАТ:
- Легче читать
- Легче менять
- Легче тестировать
- Меньше багов
- Работает со старым JS
- Все визуальные эффекты на месте
*/