/*
 * Стартовая страница студии. Задача 07, часть Д2, экран 1.
 * Близко к принятому макету `docs/maket_startovaya/maket_vhod.png`.
 *
 * Из картинки берётся только иллюстрация: логотип, заголовок,
 * подпись и кнопки — живые, в разметке.
 *
 * Значений здесь нет: всё из `tokens.css`.
 *
 * Телефон (макет, 390): шапка, заголовок, подпись, две кнопки,
 * под ними иллюстрация, у которой верх плавно переходит в белый.
 * Компьютер (макет, 1440): текст и кнопки слева, иллюстрация справа
 * и уходит левым краем в белый; сетка с крестиками — фоном.
 */

/* --- Сетка с крестиками -------------------------------------- */

/*
 * Отдельные файлы SVG (`images/setka.svg`,
 * `images/setka-krestiki.svg`), нарисованные по образцу
 * `docs/maket_startovaya/setka_fragment.png`.
 *
 * Почему картинкой, а не правилами CSS: линия в один пиксель
 * остаётся линией в один пиксель, а крестик — крестиком, на любом
 * экране и при любом увеличении. Повторяющимися градиентами
 * получалась именно разлинованная сетка на весь экран, а нужны
 * редкие обрывающиеся пометки, как на чертеже.
 *
 * **Слой декоративный и лежит под содержимым.** `z-index: 0`
 * против `z-index: 1` у текста и кнопок: даже если пометки
 * окажутся под заголовком геометрически, нарисованы они будут
 * ниже. `pointer-events: none` — они не перехватывают нажатия.
 * Для программ чтения экрана их нет (`aria-hidden` в разметке,
 * пустой `alt`).
 *
 * Размеры не задаются: у картинки свой размер в пикселях, и
 * растягивать её незачем — тонкие линии от этого только толстеют.
 */
.marks {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/*
 * Верхняя часть: над заголовком и в промежутке между текстом
 * и иллюстрацией. На телефоне её нет — там остаются только
 * крестики у края иллюстрации.
 */
.marks--top {
  display: none;
  top: 0;
  left: var(--marks-top-left);
}

/*
 * Пара крестиков у края иллюстрации. На телефоне — у верхнего
 * края, там, где она переходит в белый; на компьютере (ниже)
 * переносится к нижнему.
 */
.marks--edge {
  top: var(--marks-inset);
  right: var(--marks-inset);
}

/* --- Первый экран -------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

/*
 * Содержимое — над декоративным слоем и над иллюстрацией. Ради
 * этих строк у сетки и стоит `z-index: 0`: логотип, ссылка
 * в шапке, заголовок, подпись и кнопки рисуются поверх при любом
 * расположении.
 *
 * Шапка названа отдельно: на большом экране иллюстрация доходит
 * до верхнего края окна и проходит под ней.
 */
.hero .masthead,
.hero__inner > .stack,
.hero__art {
  position: relative;
  z-index: 1;
}

.hero__display {
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.hero__dot {
  color: var(--color-accent);
}

.hero__lead {
  max-width: var(--measure);
  font-size: var(--size-subtitle);
  line-height: var(--leading-text);
}

/*
 * Кнопка и ссылка — одна под другой, как на макете. На телефоне
 * кнопка «Войти» во всю ширину колонки, на большом экране —
 * в свою ширину (`--action-width`), а не на всю колонку.
 */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.hero__actions mc-button {
  width: 100%;
}

/* --- Иллюстрация --------------------------------------------- */

/*
 * На телефоне иллюстрация стоит **под кнопками** и грузится лениво:
 * текст и кнопки видны сразу, картинка догружается следом.
 * Во всю ширину экрана — отрицательными полями против отступов
 * страницы.
 *
 * Верх исходного файла не белый, поэтому переход в белый делается
 * маской — средствами CSS, а не правкой файла (часть Д2).
 */
.hero__art {
  margin-left: calc(-1 * var(--page-gutter));
  margin-right: calc(-1 * var(--page-gutter));
}

.hero__art img {
  width: 100%;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--color-ink) 18%,
    var(--color-ink) 100%
  );
}

@media (min-width: 62rem) {
  /*
   * Большой экран: текстовая колонка слева на белом, иллюстрация —
   * вся правая часть окна.
   *
   * `position: static` у внутренней обёртки — намеренно. Обёртка
   * ограничена шириной страницы (`--page-width`) и отступами;
   * пока она была точкой отсчёта, иллюстрация упиралась в её край,
   * и справа на широком экране оставалась белая полоса. Теперь
   * точка отсчёта — сам первый экран, и картинка доходит
   * до верхнего, правого и нижнего краёв окна.
   */
  .hero__inner {
    position: static;
    display: block;
    min-height: var(--hero-height);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .hero__inner > .stack {
    max-width: var(--hero-text-width);
  }

  /* Верхняя часть сетки появляется только на большом экране. */
  .marks--top {
    display: block;
    top: var(--marks-top);
  }

  /*
   * Иллюстрация: больше половины ширины, по краям окна, без полей
   * и без видимого края. `object-fit: cover` с привязкой к левому
   * краю показывает левую часть кадра — ту, где оранжевые
   * плоскости, поэтому они и заходят к середине экрана.
   *
   * `z-index: 0` против `z-index: 1` у текста: подпись заходит
   * на растворённый край картинки, и читаться она должна поверх,
   * а не из-под неё.
   */
  .hero__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 0;
    width: var(--hero-art-width);
    margin: 0;
  }

  .hero__art picture {
    display: block;
    height: 100%;
  }

  /* Левый край растворяется в белом — так на макете. Маской,
   * файл не трогаем. */
  .hero__art img {
    height: 100%;
    object-fit: cover;
    object-position: left center;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      var(--color-ink) var(--hero-art-fade),
      var(--color-ink) 100%
    );
  }

  /* Крестики — у нижнего края иллюстрации, в её растворённой
   * части: на белом, а не поверх фотографии. */
  .marks--edge {
    top: auto;
    right: auto;
    bottom: var(--marks-inset);
    left: var(--marks-inset);
  }

  .hero__actions mc-button {
    width: var(--action-width);
  }
}