/*
  Hero — первый экран страницы, во всю высоту вьюпорта, начинается с
  самого верха страницы (y=0) — плавающие хедер/футер (оба position:
  fixed) лежат НАД ним, а не над отступом перед ним. .hero лежит первым
  ребёнком внутри .page-works, у которой (и у body на моб/планшете)
  есть свой padding-top под хедер (см. header.css/index.html) — тот же
  отступ, что резервирует место для первого ряда галереи. Здесь он
  ровно компенсируется отрицательным margin-top той же формулой, чтобы
  .hero перекрыл его и стартовал от истинного верха экрана.

  Ширина — на весь вьюпорт, а не по .container: классический full-bleed
  трюк 100vw + отрицательный margin, работает независимо от паддингов/
  max-width родителя.

  Фон — прозрачный, читает --color-bg сайта (меняется вместе с темой);
  фиксированная (не --color-*) остаётся только сама палитра кругов —
  как в анимациях карточек галереи works/*, чтобы контраст текста был
  стабильным на любом из ярких цветов круга.
*/

@font-face {
  font-family: "Valisca";
  src: url("Valisca 4.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.hero {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Компенсирует padding-top под хедер у body/.page-works (см. шапку
     файла) — та же формула, что и там, иначе рассинхронизируются. */
  margin-top: calc(-1 * (var(--page-px, 10px) + var(--header-h, 3.5rem) + 10px));
  margin-bottom: var(--page-px, 10px);
  height: 100svh;
  min-height: 34rem;
  max-height: 56rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* var(--color-bg), а не буквально transparent: та же цветовая цель
     (совпадает с фоном страницы и меняется с темой), но с реальной
     заливкой — в просветах между кругами SVG-маска ничего не рисует
     (там честная прозрачность), и без своей заливки здесь блендить
     заголовку/подзаголовку было бы не с чем — просто прозрачность,
     эффект пропадал бы (в светлой теме буквы становились не видны:
     белый на белом просвете, см. чат). */
  background: var(--color-bg);
  /* Заголовок/подзаголовок ниже блендятся (mix-blend-mode) с этим SVG-
     фоном — isolate держит блендинг внутри .hero, не давая ему утечь
     на остальную страницу за его пределами. */
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* Мягкий переход в фон страницы снизу — вместо резкого обреза кругов
   маской. var(--color-bg) — та же цель, что у самого .hero, поэтому
   переход неотличим на глаз от реального фона в любой теме. */
.hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(4rem, 12%, 9rem);
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.hero__content {
  /* БЕЗ position/z-index: они создали бы свой стек-контекст и обрубили
     бы mix-blend-mode текста внутри от SVG-фона снаружи (тексту стало
     бы не с чем блендиться, см. чат) — здесь просто div, наверх кладёт
     сам DOM-порядок (идёт после .hero__bg). */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 42rem;
  padding-inline: var(--page-px, 10px);
  pointer-events: none; /* сама плашка не ловит клики — только кнопка ниже */
}

.hero__content > * {
  pointer-events: auto;
}

/*
  Текст поверх кругов — вместо подсветки тенью/ореолом (не сочеталось с
  тёмной темой, см. чат) буквы сами инвертируют то, что под ними:
  mix-blend-mode: difference с белым текстом даёт разный видимый цвет
  на каждом круге и на фоне (фон тоже посчитан — тёмный/светлый читает
  --color-bg, см. .hero) без всякой ручной подгонки под тему.
*/
.hero__title,
.hero__subtitle {
  color: #fff;
  mix-blend-mode: difference;
}

.hero__title {
  font-family: "Valisca", var(--font-family-heading);
  text-transform: uppercase;
  /* .text-h1 даёт --letter-spacing-tight (-0.01em) — в этом шрифте
     буквы от него слипаются, перебиваем на wide. */
  letter-spacing: var(--letter-spacing-wide, 0.04em);
}

.hero__subtitle {
  margin-top: var(--space-stack-heading-lead);
}

/*
  Кнопка "Смотреть работы" — --color-ink/--color-ink-contrast (белая в
  тёмной теме, чёрная в светлой — тот же инвертирующийся токен, что и
  у монохромных иконок/контролов сайта, см. theme.css). Форма/отступы
  свои (кнопка гораздо крупнее компактных плашек хедера/футера), но
  hover/focus/press-фидбек — тот же общий механизм, что у остальных
  контролов сайта (розовое пятно из точки курсора — layout-chrome.js
  добавляет .hero__cta в тот же список, что и "Резюме PDF", см. общие
  :is(...)-списки button-hover.css), а не своя копия анимации.
*/
.hero__cta {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 1rem;
  padding-inline: 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  text-decoration: none;
  white-space: nowrap;
}

.hero__cta .icon {
  width: 1.125rem;
  height: 1.125rem;
}

@media (max-width: 640px) {
  .hero {
    min-height: 30rem;
  }
}