/* Первый экран: имя, фото в форме папки, плитки со снимками.
   Фото и плитки вытянуты 1 : 1.2, у фото срезан левый верхний угол.
   Фон «тёмная бумага» общий для всех страниц и живёт в base.css.
   Раскладка снята с референса — см. комментарий в tokens.css. */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden; /* фото выступает влево за бокс заголовка */

  /* Холст 100x120, отсюда пропорция фото 1 : 1.2. Скруглённый
     прямоугольник, у которого левый верхний угол срезан наискось:
     прямая от точки 35 на верхней кромке до точки 34 на левой —
     скос уходит вниз почти на треть высоты. Места стыка скоса
     с кромками скруглены радиусом 9. Радиус больше, чем у углов
     карточки (5), потому что углы у скоса тупые: при равном
     радиусе скругление на них почти не читается.
     Точки касания пересчитаны под эти радиусы: на верхней кромке
     35 + 9/tg(67.9°) = 38.6, на левой 34 + 9/tg(67.1°) = 37.8. */
  --folder-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M38.6 0L95 0A5 5 0 0 1 100 5L100 115A5 5 0 0 1 95 120L5 120A5 5 0 0 1 0 115L0 37.8A9 9 0 0 1 2.7 31.4L32.4 2.5A9 9 0 0 1 38.6 0Z'/%3E%3C/svg%3E");

  /* Ширина фото выводится из высоты: высота равна высоте прописных,
     пропорция держится 1 : 1.2 под холст маски. */
  --photo-width: calc(var(--photo-size) / 1.2);
}

/* Шапка — общий блок .header, стили в sections/header.css.
   Здесь её нет: на главной она стоит ровно там же, где на остальных
   страницах, и ничего специфичного для первого экрана не требует. */

/* Плитки с фотографиями справа: противовес портрету слева.
   Позиции сняты с наброска Руслана. overflow: hidden обрезает снимок
   по форме плитки. */
/* Форма и размер те же, что у фото, но без скоса: плитки рифмуются
   с фотографией. Радиус скругления — те же 5% ширины, что у углов
   карточки в маске фото. */
.hero__tile {
  position: absolute;
  width: var(--photo-width);
  height: var(--photo-size);
  overflow: hidden;
  border-radius: calc(var(--photo-width) * 0.05);
  background-color: var(--color-surface);
}

.hero__tile:nth-child(1) { left: 68.5vw; top: 17svh; }
.hero__tile:nth-child(2) { left: 82vw;   top: 6svh; }
.hero__tile:nth-child(3) { left: 79.5vw; top: 33svh; }
/* Вторая порция по наброску: два уходят за кромку экрана
   (сверху и справа), .hero их обрезает. */
.hero__tile:nth-child(4) { left: 47vw;   top: 6.5svh; }
.hero__tile:nth-child(5) { left: 62.5vw; top: -5svh; }
.hero__tile:nth-child(6) { left: 94vw;   top: 25.5svh; }
.hero__tile:nth-child(7) { left: 85vw;   top: 59svh; }


/* object-fit: cover кадрирует снимок под пропорцию плитки
   независимо от исходного размера. */
.hero__tile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* На мобильном правой зоны нет — прячем плитки, чтобы не мешали тексту. */
@media (max-width: 767px) {
  .hero__tiles {
    display: none;
  }
}


/* Роль над заголовком: блок выключен вправо, его правая кромка чуть
   левее левой кромки имени, низ — чуть выше первой строки имени.
   Привязка через top + translateY(-100%), чтобы не зависеть от
   высоты блока. */
.hero__role {
  position: absolute;
  right: calc(100% - var(--name-left) + 1.15vw);
  top: calc(var(--name-top) - 0.8vw);
  transform: translateY(-100%);
  margin: 0;
  font-size: var(--role-size);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}

/* На мобильном справа от имени места нет — роль встаёт над именем
   по его же левой кромке. */
@media (max-width: 767px) {
  .hero__role {
    right: auto;
    left: var(--name-left);
    top: calc(var(--name-top) - 3vw);
    text-align: left;
  }
}

/* Блок «имя + подзаголовок» позиционируется по левому краю текста.
   Фото выходит за него влево отрицательным отступом. */
.hero__intro {
  position: absolute;
  top: calc(var(--name-top) - var(--name-cap-offset));
  left: var(--name-left);
}

.hero__name {
  font-size: var(--name-size);
  font-weight: var(--name-weight);
  line-height: var(--name-leading);
  letter-spacing: var(--name-tracking);
}

.hero__line {
  display: block;
  white-space: nowrap;
}

/* Оптическая компенсация: у R боковой отступ в глифе ~0.07em, у V почти
   ноль, из-за чего строки кажутся невыровненными. Сдвигаем первую строку
   на разницу, чтобы краска R и V начиналась по одной вертикали.
   Величина зависит от языка — см. --name-optical в tokens.css. */
.hero__line--optical {
  margin-left: var(--name-optical);
}

/* Вторая строка — флекс, чтобы фото село нижним краем ровно на базовую линию. */
.hero__line--photo {
  display: flex;
  align-items: baseline;
}

/* Фото в форме папки с выкусанным углом.
   По высоте ровно с букву V: --photo-size — это высота прописных,
   низ лежит на базовой линии. Ширина выводится из высоты, чтобы
   держать пропорцию 1 : 1.2. Соотношение сторон элемента совпадает
   с соотношением сторон маски, поэтому скругления не плющит. */
.hero__photo {
  flex: none;
  width: var(--photo-width);
  height: var(--photo-size);
  /* Вытягиваем фото влево за пределы бокса ровно на свою ширину плюс
     зазор: текст остаётся на одной вертикали с первой строкой. */
  margin-left: calc(-1 * (var(--photo-width) + var(--photo-gap)));
  margin-right: var(--photo-gap);
  object-fit: cover;
  -webkit-mask-image: var(--folder-mask);
  mask-image: var(--folder-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Проекты столбиком в левом нижнем углу. Каждый — «папка»: контур
   со срезанным правым верхним углом, внутри иконка и название.
   При наведении папка заливается белым, содержимое чернеет. */
.hero__projects {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) * 0.75);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55em;
  font-size: var(--subtitle-size);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Сама папка — общий компонент .folder в components.css. Здесь только
   ширина: контур рисуется растянутым SVG, и одинаковый срез угла у всех
   трёх ссылок выходит только при одинаковой пропорции бокса. */
.hero__project {
  width: 8.2em;
}

/* Подзаголовок в вайбе референса: некрупный текст у самого низа
   экрана, с той же левой кромки, что и заголовок. */
.hero__subtitle {
  position: absolute;
  left: var(--name-left);
  bottom: calc(var(--gutter) * 0.75);
  margin: 0;
  /* Колонка с локацией начинается на 64vw — держим предел чуть левее,
     чтобы более длинный русский текст не заезжал на неё. Предел
     подобран так, чтобы он тоже укладывался в две строки:
     меньше 22.1vw — и перевод разбивается на три. */
  max-width: min(36ch, calc(62vw - var(--name-left)));
  font-size: var(--subtitle-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Вторая надпись внизу, правее подзаголовка — как второй блок мелкого
   текста в референсе (~75.6% ширины канвы). Стиль тот же. */
.hero__location {
  position: absolute;
  left: 64vw;
  bottom: calc(var(--gutter) * 0.75);
  margin: 0;
  font-size: var(--subtitle-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Кнопка контакта в правом нижнем углу. Внешний вид — общий компонент
   .talk в components.css, здесь только место на экране. */
.hero__talk {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) * 0.75);
}

/* На мобильном правой колонки нет — надпись встаёт над подзаголовком
   по общей левой кромке. */
@media (max-width: 767px) {
  /* В tokens.css отступ считается от квадратного фото первого варианта.
     Здесь фото уже, поэтому пересчитываем — иначе левый край фото
     не встанет по колонке отступа. */
  .hero {
    --name-left: calc(var(--gutter) + var(--photo-width) + var(--photo-gap));
  }

  /* Русский текст длиннее английского и на узком экране упирается
     в правый край — держим колонку отступа справа. Предел ширины
     нужен только на десктопе, где рядом стоит колонка с локацией. */
  .hero__subtitle,
  .hero__location {
    right: var(--gutter);
  }

  .hero__subtitle {
    max-width: none;
  }

  /* Внизу слева три блока стоят друг над другом абсолютно, поэтому
     отступы считаются от числа строк подзаголовка (интерлиньяж 1.4).
     По-русски он длиннее и занимает на строку больше. */
  .hero {
    --subtitle-lines: 2;
  }

  .hero:lang(ru) {
    --subtitle-lines: 3;
  }

  .hero__location {
    left: var(--name-left);
    bottom: calc(var(--gutter) * 0.75 + var(--subtitle-size) * 1.4 * var(--subtitle-lines) + 1.25rem);
  }


  /* Правый верхний угол на мобильном занят кнопкой контакта — опускаем
     переключатель языка под неё, ниже строки соцсетей слева. Смещение
     читает общая шапка, страница только задаёт величину. Правило на
     :root, а не на .hero: шапка лежит вне первого экрана, и переменная
     с .hero до неё не дошла бы. hero.css подключается только на главной,
     поэтому другие страницы это не заденет. */
  :root {
    --header-lang-offset: calc(var(--subtitle-size) * 6.2);
  }

  /* Внизу справа кнопка столкнулась бы с текстом —
     на мобильном уводим её в правый верхний угол. */
  .hero__talk {
    right: var(--gutter);
    top: calc(var(--gutter) * 0.5); /* по одной линии с логотипом слева */
    bottom: auto;
  }

  /* Внизу слева всё встаёт в один столбец: проекты поднимаем
     над блоком с локацией и подзаголовком. */
  .hero__projects {
    left: var(--name-left);
    /* Над локацией: её две строки плюс строки подзаголовка. */
    bottom: calc(var(--gutter) * 0.75 + var(--subtitle-size) * 1.4 * (var(--subtitle-lines) + 2) + 2.75rem);
  }
}