/* ==========================================================================
   ОГЛАВЛЕНИЕ (block-01-hero.css) — Блок 1: Главный экран (hero)
   HTML: index.html → секция #block-01
   JS:  js/block-01-hero.js (видео, звёзды, высота видео)

   1.  Высота секции 80vh
   2.  Фоновый свет от луны (.block-01__moon-glow)
   3.  Canvas звёздочек (.block-01__twinkles) — рисует JS
   4.  Внутренний контейнер (.block-01__inner)
   5.  Сетка: левая колонка + видео (.block-01__main)
   6.  Левая колонка: текст + кнопки (.block-01__col-left)
   7.  Луна в углу (.block-01__moon-corner, .block-01__moon)
   8.  Шапка сверху (.block-01__header)
   9.  Кнопка бренда слева (.block-01__brand)
   10. Кнопки «Написать», «Блог», «Меню» (.block-01__link-btn, .block-01__header-*)
   11. Текст: eyebrow, заголовок, подзаголовок
   12. Градиент «онлайн-школа парикмахеров»
   13. Кнопки «Выбрать курс» / «Подробнее о мастере»
   14. Видео справа (.block-01__media)
   15. Мобильная версия (@media max-width 900px)
   16. Анимация появления при скролле ([data-reveal])
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ВЫСОТА СЕКЦИИ 80vh
   Селекторы: .block-01, #block-01
   За что отвечает: размер всего первого экрана. 80vh = 80% высоты окна,
   чтобы снизу был виден кусочек следующего блока.
   Не трогать, если не меняете высоту hero-экрана.
   -------------------------------------------------------------------------- */
.block-01.section-block,
#block-01 {
  min-height: 90vh;       /* минимум — 80% экрана */
  height: 90vh;           /* фиксированная высота */
  max-height: 90vh;     /* не растягивать выше 80vh */
  display: flex;
  flex-direction: column;
  background: #030408; /* fallback под перелив (как подвал) */
  position: relative;     /* для абсолютных детей: луна, свет, звёзды */
  overflow: hidden;       /* обрезать луну/звёзды по краям блока */
}

/* Перелив подвала — слои внутри #block-01 (см. block-08-footer.css) */
#block-01 > .block-08__aurora,
#block-01 > .block-08__stars {
  z-index: 0;
}

/* --------------------------------------------------------------------------
   2. СВЕТ ОТ ЛУНЫ (фон, не сама луна)
   Селектор: .block-01__moon-glow
   За что отвечает: мягкое свечение в левом верхнем углу (~30% блока).
   Менять: at 120px 120px — центр света; rgba(...) — яркость и цвет.
   Не путать с .block-01__moon — это отдельный круг-луна.
   -------------------------------------------------------------------------- */
.block-01__moon-glow {
  position: absolute;
  inset: 0;               /* на весь блок */
  z-index: 1;             /* над фоном, под текстом */
  pointer-events: none;   /* клики проходят сквозь */
  background:
    radial-gradient(
      ellipse 75% 65% at 120px 120px,  /* центр света ≈ позиция луны */
      rgba(255, 235, 200, 0.18) 0%,   /* яркий центр */
      rgba(255, 190, 120, 0.08) 30%,
      rgba(255, 140, 60, 0.03) 48%,
      transparent 70%                  /* дальше — прозрачно */
    );
}

/* --------------------------------------------------------------------------
   3. CANVAS ЗВЁЗДОЧЕК
   Селектор: .block-01__twinkles
   За что отвечает: только позиция слоя. Сами звёзды рисует block-01-hero.js.
   Менять анимацию звёзд → js/block-01-hero.js, функция initTwinkles().
   -------------------------------------------------------------------------- */
.block-01__twinkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   4. ВНУТРЕННИЙ КОНТЕЙНЕР
   Селектор: .block-01__inner
   За что отвечает: отступы контента от шапки и низа блока.
   padding-top: 88px — место под фиксированную шапку.
   -------------------------------------------------------------------------- */
.block-01__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* вертикально по центру внутри 80vh */
  min-height: 0;
  padding-top: 88px;       /* отступ под шапку */
  padding-bottom: var(--gap-lg);
  position: relative;
  z-index: var(--z-content); /* выше луны и звёзд */
}

/* --------------------------------------------------------------------------
   5. СЕТКА: ЛЕВАЯ КОЛОНКА | ВИДЕО
   Селектор: .block-01__main
   За что отвечает: две колонки 50/50. Слева текст+кнопки, справа видео.
   align-items: start — колонки не растягиваются принудительно вниз.
   -------------------------------------------------------------------------- */
.block-01__main {
  display: grid;
  grid-template-columns: 1fr 1fr; /* две равные колонки */
  gap: var(--gap-xl);               /* расстояние между колонками */
  align-items: center;              /* левый текст и правое видео — по одной линии по вертикали */
}

@media (max-width: 900px) {
  /* На телефоне — одна колонка: текст, кнопки, видео друг под другом */
  .block-01__main { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6. ЛЕВАЯ КОЛОНКА (текст + кнопки)
   Селектор: .block-01__col-left
   За что отвечает: обёртка всего левого столбца.
   Высота этой колонки используется в JS для высоты видео (block-01-hero.js).
   -------------------------------------------------------------------------- */
.block-01__col-left {
  display: flex;
  flex-direction: column; /* сверху вниз: текст → кнопки */
  justify-content: center;
}

/* Правая колонка: eyebrow + видео */
.block-01__col-right {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  justify-content: center;
  min-width: 0;
}

.block-01__col-right .block-01__eyebrow {
  text-align: center;
  padding-left: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. ЛУНА В ЛЕВОМ ВЕРХНЕМ УГЛУ
   .block-01__moon-corner — точка привязки (отступ от края блока)
   .block-01__moon — сам круг луны + анимация движения
   left/top — отступ от верха и слева блока (сейчас 100px).
   z-index ниже шапки — луна «под» кнопкой бренда.
   Движение: @keyframes block01MoonFloat — только вправо/вниз, до ~100px.
   -------------------------------------------------------------------------- */
.block-01__moon-corner {
  position: absolute;
  left: 100px;            /* ← менять отступ слева */
  top: 100px;             /* ← менять отступ сверху */
  z-index: calc(var(--z-header) - 1);
  pointer-events: none;
  width: 48px;
  height: 48px;
}

.block-01__moon {
  width: 42px;            /* ← размер луны */
  height: 42px;
  border-radius: 50%;
  /* градиент «шар» — светлая точка + тень */
  background: radial-gradient(circle at 32% 28%, #fff8ee 0%, #e8dcc8 35%, #a8a0b0 75%, #6a6478 100%);
  box-shadow:
    0 0 24px rgba(255, 230, 190, 0.75),  /* свечение вокруг */
    0 0 55px rgba(255, 180, 100, 0.4),
    inset -4px -4px 8px rgba(0, 0, 0, 0.15); /* объём */
  animation: block01MoonFloat 16s ease-in-out infinite; /* ← скорость: 16s */
}

/* Траектория луны: от (0,0) только вправо (+X) и вниз (+Y), потом обратно */
@keyframes block01MoonFloat {
  0%, 100% { transform: translate(0, 0); }
  20%  { transform: translate(45px, 25px); }
  45%  { transform: translate(80px, 55px); }  /* ← max вправо ~100px */
  70%  { transform: translate(60px, 65px); }     /* ← max вниз ~95px */
  85%  { transform: translate(25px, 40px); }
}

/* --------------------------------------------------------------------------
   8. ШАПКА (фиксированная сверху)
   Селектор: .block-01__header
   За что отвечает: полоска сверху: слева бренд, справа «Меню».
   position: fixed — шапка не уезжает при скролле.
   pointer-events: none на header, auto на детях — клики только по кнопкам.
   -------------------------------------------------------------------------- */
.block-01__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  justify-content: space-between; /* бренд слева, меню справа */
  align-items: flex-start;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  pointer-events: none;
}
.block-01__header > * { pointer-events: auto; }

/* --------------------------------------------------------------------------
   9. КНОПКА БРЕНДА (Максим Воробьёв)
   Селекторы: .block-01__brand, .block-01__brand-text, .block-01__brand img
   За что отвечает: левый верхний «чип» с фото и текстом, ссылка на страницу.
   HTML: <a class="block-01__brand"> в index.html
   -------------------------------------------------------------------------- */
.block-01__brand {
  position: relative;
  z-index: 1;             /* поверх луны */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(237, 245, 244, 0.151); /* ← рамка бренда */
  transition: transform var(--duration-normal), box-shadow var(--duration-normal);
}
.block-01__brand:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(255, 107, 26, 0.2);
}
.block-01__brand img {
  width: 44px;            /* ← размер аватара */
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
/* Имя «Максим Воробьёв» */
.block-01__brand-text {
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.2;
}
/* Подпись «Онлайн-школа для парикмахеров» */
.block-01__brand-text small {
  display: block;
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   10. КНОПКИ «НАПИСАТЬ», «БЛОГ», «МЕНЮ»
   -------------------------------------------------------------------------- */
.block-01__header-left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.block-01__header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Текстовая кнопка: оранжевый градиент, фон при hover */
.block-01__link-btn {
  position: relative;
  z-index: 0;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(120deg, #ff6b1a 0%, #ff9f3d 50%, #ffb347 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition:
    border-color var(--duration-normal),
    box-shadow var(--duration-normal),
    transform var(--duration-normal);
}
.block-01__link-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 107, 26, 0.14);
  opacity: 0;
  transition: opacity var(--duration-normal);
}
.block-01__link-btn:hover,
.block-01__link-btn:focus-visible {
  border-color: rgba(255, 159, 61, 0.35);
  box-shadow: 0 4px 20px rgba(255, 107, 26, 0.18);
  transform: translateY(-1px);
}
.block-01__link-btn:hover::before,
.block-01__link-btn:focus-visible::before {
  opacity: 1;
}

.block-01__nav-wrap {
  position: relative; /* для позиции выпадашки */
}

/* Кнопка «Меню» — правый верхний угол */
.block-01__nav-trigger {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-md);
  background: rgba(42, 42, 52, 0.88);   /* ← фон кнопки (серее фона страницы) */
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.116); /* ← белая рамка */
  color: #fff;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all var(--duration-normal);
}
.block-01__nav-wrap:hover .block-01__nav-trigger,
.block-01__nav-wrap:focus-within .block-01__nav-trigger {
  background: rgba(52, 52, 62, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.08);
}

/* Выпадающее меню — по умолчанию скрыто */
.block-01__nav {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 280px;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: rgba(12, 12, 18, 0.98);
  border: 1px solid rgba(255, 158, 61, 0.514);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: all var(--duration-normal);
}
/* Показ меню при наведении на область .nav-wrap */
.block-01__nav-wrap:hover .block-01__nav,
.block-01__nav-wrap:focus-within .block-01__nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.block-01__nav-group + .block-01__nav-group {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 159, 61, 0.14);
}
.block-01__nav a {
  display: block;
  padding: 0.32rem 0.75rem;
  margin-left: 15px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.block-01__nav a:hover {
  background: rgba(226, 182, 159, 0.226);
  color: var(--color-accent-light);
}
.block-01__nav-link--highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 0.55rem;
  background: rgba(255, 107, 26, 0.06);
}
.block-01__nav-link--highlight:hover {
  background: rgba(255, 107, 26, 0.14);
  color: var(--color-accent-light);
}
.block-01__nav-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  line-height: 0;
  color: #ffc857;
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.85));
  animation: block01NavStar 2.4s ease-in-out infinite;
}
.block-01__nav-star svg {
  display: block;
  width: 18px;
  height: 18px;
}
@keyframes block01NavStar {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.92; }
  50% { transform: scale(1.12) rotate(8deg); opacity: 1; }
}
.block-01__nav-label {
  font-size: var(--text-xs);
  color: var(--color-accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.35rem;
  padding: 0 0.75rem;
}
.block-01__nav-group--courses .block-01__nav-label {
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   11. ТЕКСТ ЛЕВОЙ КОЛОНКИ
   .block-01__content — обёртка текстового блока
   .block-01__eyebrow — строка «Hair Hacking · 10+ лет»
   .block-01__title — главный заголовок h1
   .block-01__subtitle — два абзаца описания
   -------------------------------------------------------------------------- */
.block-01__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Подпись над видео (правая колонка) */
.block-01__eyebrow {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Общий стиль h1 (размер, жирность) — цвет задаётся дочерними span */
.block-01__title {
  font-size: var(--text-hero);  /* ← размер заголовка — variables.css */
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: var(--gap-md);
  padding-bottom: 15px;
}

/* --------------------------------------------------------------------------
   12. ГРАДИЕНТ «онлайн-школа парикмахеров»
   Селектор: .block-01__title-gradient
   За что отвечает: переливающийся текст (белый → оранжевый → жёлтый → белый).
   background-size + animation block01TitleShine — движение градиента.
   Текст в HTML: <span class="block-01__title-gradient">
   -------------------------------------------------------------------------- */
.block-01__title-gradient {
  display: inline;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ff6b1a 18%,
    #ffb347 36%,
    #fff5e8 50%,
    #ff7a1f 64%,
    #e8c547 78%,
    #ffffff 100%
  );
  background-size: 300% 100%;       /* ширина градиента для анимации */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;               /* виден только градиент */
  animation: block01TitleShine 12s ease-in-out infinite;
}
@keyframes block01TitleShine {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* «Максима Воробьёва» — обычный белый текст */
.block-01__title-white {
  color: var(--color-text);
  display: inline;
}

/* Подзаголовок — две строки (в HTML <br> между span) */
.block-01__subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 48ch;        /* ← ширина текста в символах */
  margin-bottom: 0;
}
.block-01__subtitle-line {
  display: inline;
}

/* --------------------------------------------------------------------------
   13. КНОПКИ ПОД ТЕКСТОМ
   Селектор: .block-01__actions
   Две кнопки в одну строку, поровну на ширину левой колонки.
   Базовые стили кнопок — global.css (.btn, .btn--primary, .btn--ghost).
   Здесь — только переопределения для блока 1.

   «Выбрать курс»     → .btn--primary (оранжевый фон, тёмный текст)
   «Подписаться»      → .btn--ghost (прозрачная, белая рамка) + модалка
   -------------------------------------------------------------------------- */
.block-01__actions {
  display: flex;
  flex-direction: row;    /* в одну строку */
  flex-wrap: nowrap;
  gap: var(--gap-md);     /* зазор между кнопками */
  margin-top: var(--gap-lg); /* отступ от текста выше */
  width: 80%;             /* ← ширина блока кнопок (% левой колонки) */
  padding-top: 10px;
}

/* Обе кнопки одинаковой ширины */
.block-01__actions .btn {
  flex: 1 1 0;            /* делят ширину поровну */
  min-width: 0;
  min-height: 48px;
  padding: 0.9rem 1rem;
  font-size: var(--text-sm);
  text-align: center;
}

/* Оранжевая кнопка «Выбрать курс» — только в блоке 1 */
.block-01__actions .btn--primary {
  color: #0a0a0f;         /* текст всегда тёмный (не оранжевый при hover) */
  box-shadow: 0 2px 12px rgba(255, 107, 26, 0.18); /* слабое свечение */
}
.block-01__actions .btn--primary:hover {
  color: #0a0a0f;
  font-size: calc(var(--text-sm) + 1px); /* чуть крупнее при наведении */
  box-shadow: 0 8px 32px rgba(255, 107, 26, 0.5); /* ярче при hover */
  transform: translateY(-2px) scale(1.02);
}

/* Прозрачная кнопка «Подписаться» */
.block-01__actions .btn--ghost {
  border-color: rgba(255, 255, 255, 0.28);
}
.block-01__actions .btn--ghost:hover,
.block-01__actions .btn--ghost:focus-visible {
  color: var(--color-accent-light);
  border-color: rgba(255, 159, 61, 0.5);
}

/* --------------------------------------------------------------------------
   14. ВИДЕО СПРАВА
   .block-01__media — рамка и тень
   .block-01__media video — само видео
   .block-01__media-glow — оранжевое свечение вокруг видео

   Высота .block-01__media задаётся в JS (block-01-hero.js → syncVideoHeight)
   по высоте .block-01__col-left. Не задавайте height здесь на десктопе.
   -------------------------------------------------------------------------- */
.block-01__media {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.block-01__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* обрезка по рамке без искажений */
  object-position: center;
}
.block-01__media-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.15), transparent 60%);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   15. МОБИЛЬНАЯ ВЕРСИЯ (экран уже 900px)
   Отключает фикс 80vh, видео — фикс. пропорции 16:10, луна ближе к углу.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .block-01.section-block,
  #block-01 {
    height: auto;
    max-height: none;
    min-height: 80vh;
  }
  .block-01__media {
    aspect-ratio: 16 / 10;
    height: auto !important; /* JS-высота отключена на мобиле */
  }
  .block-01__moon-corner {
    left: 1.5rem;
    top: 5.5rem;
  }
}

/* --------------------------------------------------------------------------
   16. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   Элементы с атрибутом data-reveal в HTML.
   Логика добавления класса .is-visible — global.js (IntersectionObserver).
   -------------------------------------------------------------------------- */
.block-01 [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}
.block-01 [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.block-01__nav-en {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.25;
  background: linear-gradient(120deg, #ffb347 0%, #ff6b1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 1;
}