/* ============================================
   GLAVNAYA — Главная страница (корневой index.html)
   ============================================
   Только то, чего нет на страницах моделей:
   переливающаяся спичка логотипа, первый экран с четырьмя
   батарейками, раскладка подбора. Акцент (кнопки, меню) —
   серый по умолчанию из variables.css. Остальное — существующие классы сайта
   (.header, .battery-code-form, .devices-v2, .other-models,
   .comparison, .footer).
   Подключается последним, после responsive.css.
   Точки адаптива как у сайта: 480 / 768 / 1024.
   ============================================ */


/* ────────────────────────────────────────────
   Логотип главной: спичка перебирает цвета четырёх моделей
   glavnaya.js заменяет <img> логотипа на inline SVG,
   даёт палочке и искре класс .logo__spark, искре — ещё .logo__spark-rays,
   а самому SVG — режим data-spark-mode (full / rays / static)
   и inline-переменные --logo-spark-cycle и --logo-spark-static
   (из glavnayaData.logo или из пульта).
   Надпись и подпись остаются цвета из файла (#2C2C2C).
   ──────────────────────────────────────────── */
body[data-page="glavnaya"] .logo {
  --logo-spark-1: #4CAF50;                  /* Lite */
  --logo-spark-2: #ED8B55;                  /* Energy */
  --logo-spark-3: #48ADEB;                  /* Ultimate */
  --logo-spark-4: #C8102E;                  /* Ultra Max */
  --logo-spark-cycle: 16s;                  /* полный круг: 4 с на цвет */
  --logo-spark-static: #C8102E;             /* без переливов */
}

/* Что переливается: вся спичка или только искра */
.logo__image[data-spark-mode="full"] .logo__spark,
.logo__image[data-spark-mode="rays"] .logo__spark-rays {
  fill: var(--logo-spark-1);
  animation: logo-spark var(--logo-spark-cycle) ease-in-out infinite;
}

/* Без переливов: вся спичка одного цвета */
.logo__image[data-spark-mode="static"] .logo__spark {
  fill: var(--logo-spark-static);
  animation: none;
}

/* На каждый цвет четверть круга: 60 % цвет держится, 40 % плавно перетекает в следующий
   (без остановок спичка большую часть круга была бы смесью двух цветов) */
@keyframes logo-spark {
  0%,
  15%,
  100% { fill: var(--logo-spark-1); }
  25%,
  40%  { fill: var(--logo-spark-2); }
  50%,
  65%  { fill: var(--logo-spark-3); }
  75%,
  90%  { fill: var(--logo-spark-4); }
}


/* ────────────────────────────────────────────
   Первый экран главной
   ──────────────────────────────────────────── */
.glavnaya-hero {
  /* — Фон и геометрия (как .hero) — */
  --gh-bg: var(--color-grey-light);
  --gh-radius: 0 0 70px 70px;
  --gh-padding-top: var(--spacing-2xl);
  --gh-padding-bottom: var(--spacing-4xl);
  --gh-content-min-height: clamp(360px, 42vw, 560px);
  --gh-columns-gap: var(--spacing-xl);
  --gh-text-gap: var(--spacing-xl);
  --gh-text-align: left;

  /* — Заголовок (как .hero__title) — */
  --gh-title-font: var(--font-heading);
  --gh-title-size: clamp(52px, 7vw, var(--font-size-6xl));
  --gh-title-weight: var(--font-weight-semibold);
  --gh-title-color: var(--color-black);
  --gh-title-line-height: 1.1;

  /* — Подпись под заголовком (как .hero__label) — */
  --gh-label-size: var(--font-size-sm);
  --gh-label-weight: var(--font-weight-bold);
  --gh-label-color: var(--color-black);
  --gh-label-padding-left: 7px;

  /* — Подзаголовок (как .hero__subtitle) — */
  --gh-subtitle-font: var(--font-heading);
  --gh-subtitle-size: clamp(40px, 5vw, var(--font-size-4xl-plus));
  --gh-subtitle-weight: var(--font-weight-light);
  --gh-subtitle-color: var(--color-black);

  /* — Описание (как .hero__description) — */
  --gh-desc-size: var(--font-size-base);
  --gh-desc-color: var(--color-text);
  --gh-desc-max-width: 450px;

  /* — Четыре батарейки — */
  --gh-battery-width: clamp(60px, 5.5vw, 76px);
  --gh-battery-gap: clamp(14px, 2vw, 28px);
  --gh-battery-lift: -10px;                 /* подъём картинки при наведении */
  --gh-battery-speed: 0.25s;
  /* Тень — размытый эллипс на «полу» под батарейкой:
     чуть шире батарейки, высотой в треть её ширины, центр — у нижнего края */
  --gh-shadow-width: calc(var(--gh-battery-width) * 1.3);
  --gh-shadow-height: calc(var(--gh-battery-width) * 0.32);
  --gh-shadow-color: rgba(0, 0, 0, 0.18);   /* в центре… */
  --gh-shadow-color-mid: rgba(0, 0, 0, 0.1); /* …на середине радиуса, к краю — прозрачно */
  --gh-shadow-blur: 3px;
  --gh-shadow-lift-scale: 1.08;             /* при подъёме тень шире… */
  --gh-shadow-lift-opacity: 0.7;            /* …и бледнее */
  --gh-battery-focus-color: var(--color-primary); /* рамка фокуса на картинке */

  /* — Форма кода: переменные компонента .battery-code-form (как в .hero) — */
  --hero-form-bg: var(--color-white);
  --hero-form-radius: var(--radius-xl);
  --hero-form-shadow: var(--shadow-lg);
  --hero-form-margin-top: 20px;
  --hero-form-padding-y: 45px;
  --hero-form-padding-x: 45px;
  --hero-form-title-size: var(--font-size-lg);
  --hero-form-title-weight: var(--font-weight-semibold);
  --hero-form-title-color: var(--color-text);
  --hero-form-input-max-width: 500px;

  /* — Стили секции — */
  width: 100%;
  background-color: var(--gh-bg);
  border-radius: var(--gh-radius);
  padding: var(--gh-padding-top) 0 var(--gh-padding-bottom);
  position: relative;
}

.glavnaya-hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gh-columns-gap);
  min-height: var(--gh-content-min-height);
}

.glavnaya-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--gh-text-gap);
  text-align: var(--gh-text-align);
  min-width: 0;
}

.glavnaya-hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.glavnaya-hero__title {
  font-family: var(--gh-title-font);
  font-size: var(--gh-title-size);
  font-weight: var(--gh-title-weight);
  color: var(--gh-title-color);
  line-height: var(--gh-title-line-height);
  margin: 0;
  white-space: nowrap;
}

.glavnaya-hero__label {
  font-size: var(--gh-label-size);
  font-weight: var(--gh-label-weight);
  color: var(--gh-label-color);
  padding-left: var(--gh-label-padding-left);
}

.glavnaya-hero__subtitle {
  font-family: var(--gh-subtitle-font);
  font-size: var(--gh-subtitle-size);
  font-weight: var(--gh-subtitle-weight);
  color: var(--gh-subtitle-color);
  line-height: var(--gh-title-line-height);
  margin: 0;
  white-space: nowrap;
}

.glavnaya-hero__description {
  font-size: var(--gh-desc-size);
  line-height: var(--line-height-relaxed);
  color: var(--gh-desc-color);
  max-width: var(--gh-desc-max-width);
  margin: 0;
}

/* Четыре батарейки в ряд, по нижнему краю.
   Батарейка — ссылка с картинкой; тень — псевдоэлемент ссылки под картинкой.
   Поднимается только картинка, тень остаётся на месте и бледнеет.
   Ни у картинки, ни у предков нет filter, overflow, clip-path, contain,
   isolation, will-change: браузеру нечего обрезать. */
.glavnaya-hero__batteries {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gh-battery-gap);
}

.glavnaya-hero__battery {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--gh-battery-width);
}

.glavnaya-hero__battery::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: calc((100% - var(--gh-shadow-width)) / 2);
  bottom: calc(var(--gh-shadow-height) / -2);
  width: var(--gh-shadow-width);
  height: var(--gh-shadow-height);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--gh-shadow-color), var(--gh-shadow-color-mid) 45%, transparent);
  filter: blur(var(--gh-shadow-blur));
  pointer-events: none;
  transition: transform var(--gh-battery-speed) ease, opacity var(--gh-battery-speed) ease;
}

.glavnaya-hero__battery-image {
  position: relative;
  z-index: 1;                               /* картинка над тенью */
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--gh-battery-speed) ease;
}

.glavnaya-hero__battery:hover .glavnaya-hero__battery-image,
.glavnaya-hero__battery:focus-visible .glavnaya-hero__battery-image {
  transform: translateY(var(--gh-battery-lift));
}

.glavnaya-hero__battery:hover::after,
.glavnaya-hero__battery:focus-visible::after {
  transform: scale(var(--gh-shadow-lift-scale));
  opacity: var(--gh-shadow-lift-opacity);
}

/* Рамка фокуса — по картинке */
.glavnaya-hero__battery:focus-visible {
  outline: none;
}

.glavnaya-hero__battery:focus-visible .glavnaya-hero__battery-image {
  outline: 2px solid var(--gh-battery-focus-color, var(--color-primary));
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}


/* ────────────────────────────────────────────
   Подбор — вид секции .devices-v2 (меню + карточка)
   Пункты меню — плитки .feature-item, как особенности
   в разделе «О продукте» страницы модели (рамка, скругление,
   шрифт заголовка), но в одну строку: название уровня и стрелка.
   Меню и карточка — две колонки одной сетки одной высоты;
   четыре пункта делят высоту карточки поровну.
   Цвет активного пункта — цвет модели (JS ставит inline --pick-color).
   ──────────────────────────────────────────── */
.glavnaya-pick {
  --gp-margin-top: var(--spacing-4xl);
  --gp-columns-gap: var(--spacing-xl);      /* между меню и карточкой */
  --dv2-menu-gap: var(--spacing-md);        /* между пунктами, как между плитками особенностей */

  /* — Плитки: те же значения, что у .product-info на этой ширине — */
  --fi-title-size: 15px;
  --fi-padding-y: 16px;
  --fi-padding-x: 18px;

  /* — Карточка модели — */
  --gp-card-gap: var(--spacing-xl);
  --gp-info-gap: var(--spacing-md);
  --gp-media-radius: var(--radius-lg);
  --gp-suits-size: var(--font-size-base);
  --gp-suits-color: var(--color-text-muted);
  --gp-facts-gap: var(--spacing-md) var(--spacing-lg);
  --gp-fact-label-size: var(--font-size-xs);
  --gp-fact-label-weight: var(--font-weight-medium);
  --gp-fact-label-color: var(--color-text-muted);
  --gp-fact-value-size: var(--font-size-base);
  --gp-fact-value-weight: var(--font-weight-bold);
  --gp-fact-value-color: var(--color-text);
  --gp-suits-label-color: var(--color-text);

  /* — Переменные компонентов внутри карточки — */
  --om-image-height: 280px;                 /* цветной блок, как карточка «Других моделей» */
  --om-image-bg: var(--color-grey-light);
  --om-card-title-size: var(--font-size-xl);
  --om-card-title-weight: var(--font-weight-semibold);
  --btn-padding-x: var(--spacing-2xl);      /* кнопка «Перейти к модели» компактнее, чем на первом экране */

  margin-top: var(--gp-margin-top);
}

/* Размеры плиток по ширине экрана — копия --fi-* из .product-info (responsive.css) */
@media (min-width: 481px) {
  .glavnaya-pick {
    --fi-title-size: clamp(13px, calc(13px + 2 * ((100vw - 481px) / 287)), 15px);
    --fi-padding-y: 16px;
    --fi-padding-x: 24px;
  }
}

@media (min-width: 769px) {
  .glavnaya-pick {
    --fi-title-size: 15px;
    --fi-padding-y: 16px;
    --fi-padding-x: 24px;
  }
}

@media (min-width: 1025px) {
  .glavnaya-pick {
    --fi-title-size: clamp(15px, calc(15px + 3 * ((100vw - 1024px) / 226)), 18px);
    --fi-padding-y: clamp(16px, calc(16px + 8 * ((100vw - 1024px) / 226)), 24px);
    --fi-padding-x: clamp(24px, calc(24px + 8 * ((100vw - 1024px) / 226)), 32px);
  }
}

@media (min-width: 1250px) {
  .glavnaya-pick {
    --fi-title-size: var(--font-size-lg);
    --fi-padding-y: var(--spacing-lg);
    --fi-padding-x: var(--spacing-xl);
  }
}

/* Меню слева, карточка справа — на всех десктопных ширинах
   (у .devices-v2 меню уходит наверх уже с 1200px).
   Сетка тянет обе колонки на одну высоту: верх меню — по верху карточки,
   низ — по низу. Ширина меню — по самому длинному названию уровня. */
.glavnaya-pick .devices-v2__wrapper {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
  gap: var(--gp-columns-gap);
}

/* Пункты делят высоту колонки поровну */
.glavnaya-pick .devices-v2__menu {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  width: auto;
  gap: var(--dv2-menu-gap);
}

/* Пункт уровня: высота от сетки, текст по центру по вертикали;
   цвет модели — для рамки, заголовка и подложки */
.glavnaya-pick__level {
  --fi-active-border: var(--pick-color);
  --fi-active-color: var(--pick-color);
  --fi-active-bg: color-mix(in srgb, var(--pick-color) 6%, transparent);
  display: flex;
  align-items: center;
  min-width: 0;
  margin-bottom: 0;                         /* промежутки задаёт меню */
  text-align: left;
}

.glavnaya-pick__level .feature-item__header {
  flex: 1;
  min-width: 0;
  gap: var(--spacing-md);                   /* название не прилипает к стрелке */
}

/* Название уровня — одной строкой */
.glavnaya-pick__level .feature-item__title {
  white-space: nowrap;
}

.glavnaya-pick__level:focus-visible {
  outline: 2px solid var(--pick-color, var(--color-primary));
  outline-offset: 2px;
}

/* Карточка выбранной модели */
.glavnaya-pick__card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-card-gap);
  transition: opacity var(--transition-fast);
}

.glavnaya-pick__card-inner.is-switching {
  opacity: 0;
}

.glavnaya-pick__media {
  border-radius: var(--gp-media-radius);
  transition: background-color var(--transition-base);
}

.glavnaya-pick__info {
  display: flex;
  flex-direction: column;
  gap: var(--gp-info-gap);
  min-width: 0;
}

.glavnaya-pick__title {
  margin: 0;
}

/* Стопка: тексты всех уровней (название модели, «Подходит для:») лежат
   в одной клетке, виден текущий. Высота блока — по самому длинному тексту,
   поэтому карточка не меняет высоту при смене модели */
.glavnaya-pick__stack {
  display: grid;
}

.glavnaya-pick__stack-item {
  grid-area: 1 / 1;
  visibility: hidden;
}

.glavnaya-pick__stack-item.is-current {
  visibility: visible;
}

.glavnaya-pick__suits {
  font-size: var(--gp-suits-size);
  color: var(--gp-suits-color);
  line-height: 1.6;
}

.glavnaya-pick__suits-item {
  margin: 0;
}

.glavnaya-pick__suits-label {
  font-weight: var(--font-weight-semibold);
  color: var(--gp-suits-label-color, var(--color-text));
}

.glavnaya-pick__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-facts-gap);
}

.glavnaya-pick__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.glavnaya-pick__fact-label {
  font-size: var(--gp-fact-label-size);
  font-weight: var(--gp-fact-label-weight);
  color: var(--gp-fact-label-color);
}

.glavnaya-pick__fact-value {
  font-size: var(--gp-fact-value-size);
  font-weight: var(--gp-fact-value-weight);
  color: var(--gp-fact-value-color);
}

.glavnaya-pick__btn {
  margin-top: auto;
  align-self: flex-start;
}


/* ────────────────────────────────────────────
   Адаптив главной
   ──────────────────────────────────────────── */

/* Планшет: меню подбора над карточкой, пункты в две колонки */
@media (max-width: 1024px) {
  .glavnaya-hero {
    --gh-radius: 0 0 40px 40px;
    --gh-padding-top: var(--spacing-xl);
    --gh-padding-bottom: var(--spacing-2xl);
    --gh-content-min-height: 0;
  }

  .glavnaya-pick {
    --gp-columns-gap: var(--spacing-lg);
  }

  /* Меню над карточкой, пункты 2 × 2, каждый в одну строку */
  .glavnaya-pick .devices-v2__wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .glavnaya-pick .devices-v2__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Название — в одну строку, пока входит в половину ширины;
     самое длинное на узком планшете (уже ~830px) и на телефоне переносится,
     пункты остаются одной высоты (по самому высокому) */
  .glavnaya-pick__level .feature-item__title {
    white-space: normal;
  }
}

/* Телефон широкий: первый экран в одну колонку, батарейки под текстом */
@media (max-width: 768px) {
  .glavnaya-hero {
    --gh-text-align: center;
    --gh-text-gap: var(--spacing-lg);
    --gh-subtitle-size: clamp(32px, 6vw, 40px);
    --gh-battery-width: clamp(48px, 13vw, 60px);
    --gh-battery-gap: var(--spacing-md);
  }

  .glavnaya-hero__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .glavnaya-hero__text {
    align-items: center;
  }

  .glavnaya-hero__label {
    padding-left: 0;
  }

  .glavnaya-pick {
    --gp-margin-top: var(--spacing-2xl);
    --om-image-height: 220px;
  }

  .glavnaya-pick__card-inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .glavnaya-pick__btn {
    align-self: stretch;
  }
}

/* Телефон */
@media (max-width: 480px) {
  .glavnaya-hero {
    --gh-radius: 0 0 24px 24px;
    --gh-padding-top: var(--spacing-lg);
    --gh-padding-bottom: var(--spacing-lg);
    --gh-title-size: clamp(36px, 12vw, 52px);
    --gh-subtitle-size: clamp(26px, 8vw, 32px);
    --gh-desc-size: var(--font-size-sm);
    --gh-battery-width: clamp(44px, 13vw, 52px);
  }

  .glavnaya-pick {
    --om-image-height: 180px;
    --gp-facts-gap: var(--spacing-sm) var(--spacing-md);
    --dv2-menu-gap: var(--spacing-sm);      /* как у особенностей на телефоне */
  }

  /* У особенностей на телефоне рамка светло-серая (они лежат на белой карточке);
     здесь плитки на сером фоне секции — рамка обычная серая, иначе её не видно */
  .glavnaya-pick__level {
    border-color: var(--fi-border-color, var(--color-grey));
  }

  /* Пункты 2 × 2 на телефоне: в половину ширины слово «Экстремальное»
     со стрелкой не входит. Стрелку прячем — выбранный пункт и так
     виден по рамке и цвету; поля плитки — поуже */
  .glavnaya-pick {
    --fi-padding-x: var(--spacing-md);
  }

  .glavnaya-pick__level .feature-item__icon {
    display: none;
  }

  .glavnaya-hero__actions {
    align-self: stretch;
  }

  .glavnaya-hero__btn {
    width: 100%;
  }
}

/* Без анимаций, если человек отключил их в системе */
@media (prefers-reduced-motion: reduce) {
  /* Спичка не переливается: то, что переливалось бы, — цвета «без переливов» */
  .logo__image[data-spark-mode="full"] .logo__spark,
  .logo__image[data-spark-mode="rays"] .logo__spark-rays {
    animation: none;
    fill: var(--logo-spark-static);
  }

  .glavnaya-hero__battery::after,
  .glavnaya-hero__battery-image,
  .glavnaya-pick__card-inner,
  .glavnaya-pick__media {
    transition: none;
  }

  /* Батарейки не поднимаются, тень не меняется */
  .glavnaya-hero__battery:hover .glavnaya-hero__battery-image,
  .glavnaya-hero__battery:focus-visible .glavnaya-hero__battery-image,
  .glavnaya-hero__battery:hover::after,
  .glavnaya-hero__battery:focus-visible::after {
    transform: none;
    opacity: 1;
  }
}