/* ============================================================
   «Из наброска в профессию» — первый экран

   Как это устроено
   ----------------
   Экран всегда равен высоте устройства (100svh) — прокрутки внутри блока нет.
   Картинка заполняет экран целиком (cover).
   Текст лежит на «сцене» — это макет 2560×1440, вписанный в экран целиком.
   Все координаты текста заданы в пикселях макета через переменную --u,
   поэтому числа в этом файле — ровно те же, что в исходном макете.
   На экране 16:9 совпадение с макетом пиксельное.

   На вертикальном экране (телефон) включается другая раскладка —
   блок «ТЕЛЕФОН» в самом низу файла.
   ============================================================ */

/* ---------- Шрифты ---------- */
@font-face {
  font-family: "Aquarelle";
  src: url("../fonts/Aquarelle.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Champagne & Limousines";
  src: url("../fonts/ChampagneLimousines-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Champagne & Limousines";
  src: url("../fonts/ChampagneLimousines-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: block;
}

/* ---------- Переменные ---------- */
:root {
  --navy:  #0b1222;   /* фон макета */
  --cream: #f5f0d2;   /* цвет всего текста на обложке */
  --wine:  #6c0006;   /* глубокий красный из иллюстрации */

  --ease: cubic-bezier(.22, .9, .28, 1);
}

/* ---------- База ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--navy);
  color: var(--cream);
  font-family: "Champagne & Limousines", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;          /* устойчиво к панелям браузера на телефоне */
  overflow: hidden;
  background: var(--navy);
  container-type: size;    /* от размера экрана считается масштаб макета --u */
}

/* картинка кроет экран целиком */
.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* сцена = макет 2560×1440, целиком вписанный в экран и отцентрованный */
.hero__layer {
  position: absolute;
  top: 50%;
  left: 50%;
  --u: min(calc(100cqw / 2560), calc(100cqh / 1440));
  width:  calc(2560 * var(--u));
  height: calc(1440 * var(--u));
  transform: translate(-50%, -50%);
}

/* --- общий вид текстовых слоёв --- */
.hero__title,
.hero__lead,
.hero__facts {
  position: absolute;
  color: var(--cream);
  font-weight: 400;
  white-space: nowrap;
}

/* Поля по краям выровнены между собой: весь левый столбец сдвинут
   на 129 px левее макета, цифры справа — на 20 px правее.
   Внутренняя композиция заголовка при этом сохранена целиком. */

/* ---------- Заголовок ----------
   Собран из 4 слоёв: две рукописные буквы (Aquarelle)
   и два слова (Champagne & Limousines). Каждый — со своей координатой. */
.hero__title { inset: 0; }
.hero__title .t-line { display: contents; }

.hero__title .t-script,
.hero__title .t-word {
  position: absolute;
  display: block;
  white-space: nowrap;
}

.t-script {                       /* рукописные «Из» и «В» */
  font-family: "Aquarelle", cursive;
  font-size: calc(235 * var(--u));
  line-height: 1;
  /* 🔴 НЕ УБИРАТЬ. У Aquarelle верхушка «И» и росчерк «В» выходят за высоту,
     которую шрифт объявляет своей. Браузер считает рамку буквы по этой
     объявленной высоте и, как только буква попадает в отдельный слой
     (любой filter, will-change, анимация), срезает всё, что вылезло, —
     те самые «три пикселя сверху». Запас в 0.4em кладёт росчерки внутрь
     рамки, а отрицательный margin возвращает букву на прежнее место,
     поэтому координаты выше править не нужно. */
  padding: .4em;
  margin: -.4em;
}
.t-word {                         /* «наброска» и «профессию» */
  font-family: "Champagne & Limousines", sans-serif;
  font-size: calc(134 * var(--u));
  letter-spacing: calc(2 * var(--u));
  line-height: 1;
}

.t-script--iz     { left: calc(300 * var(--u)); top: calc(179.5 * var(--u)); }
.t-word--nabroska { left: calc(695 * var(--u)); top: calc(248   * var(--u)); }
.t-script--v      { left: calc(104 * var(--u)); top: calc(397.5 * var(--u)); }
.t-word--prof     { left: calc(342 * var(--u)); top: calc(435   * var(--u)); }

/* ---------- Описание слева ---------- */
.hero__lead {
  left: calc(98 * var(--u));
  top:  calc(782.25 * var(--u));
  font-size: calc(63 * var(--u));
  line-height: calc(72.5 * var(--u));
  font-weight: 700;
}
.hero__lead .ln { display: block; }
.hero__lead .ln--gap { height: calc(72.5 * var(--u)); }

/* ---------- Цифры справа сверху ---------- */
.hero__facts {
  right: calc(12 * var(--u));
  top:   calc(106.75 * var(--u));
  font-size: calc(56 * var(--u));
  line-height: calc(64.5 * var(--u));
  font-weight: 700;
  text-align: right;
}
.hero__facts .ln { display: block; }

/* ---------- Кнопка ---------- */
.hero__cta {
  position: absolute;
  left: calc(100 * var(--u));
  top:  calc(1200 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(30 * var(--u)) calc(66 * var(--u));
  font-family: "Champagne & Limousines", sans-serif;
  font-size: calc(44 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(1.5 * var(--u));
  white-space: nowrap;
  color: var(--navy);
  background: var(--cream);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .34);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              background-color .45s var(--ease), color .45s var(--ease);
}
.hero__cta:hover,
.hero__cta:focus-visible {
  background: #fffdf2;
  transform: translateY(calc(-4 * var(--u)));
  box-shadow: 0 calc(18 * var(--u)) calc(46 * var(--u)) rgba(0, 0, 0, .45);
}
.hero__cta:active { transform: translateY(0); }
.hero__cta:focus-visible { outline: calc(3 * var(--u)) solid var(--cream); outline-offset: calc(6 * var(--u)); }

/* ============================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
   Задержки собраны здесь — правятся одним числом на элемент.
   Появление стартует, когда подгрузились шрифты (класс .is-ready).
   ============================================================ */

/* стартовое состояние */
.hero__bg            { opacity: 0; transform: scale(1.055); }
.hero__title .t-script,
.hero__title .t-word,
.hero__lead .ln,
.hero__facts .ln,
.hero__cta           { opacity: 0; }

/* 🔴 .t-script здесь НЕТ намеренно: will-change выносит букву в отдельный слой,
   а слой режет росчерки по объявленной высоте шрифта. */
.t-word, .hero__lead .ln, .hero__facts .ln, .hero__cta { will-change: transform, opacity; }

/* 🔴 Рукописные буквы проявляются ЦЕЛИКОМ — никаких развёрток и масок.
   Пробовали «письмо» слева направо: буква в середине показа неизбежно
   выглядит обрезанной, а маска вдобавок срезала росчерки за пределами строки.
   Здесь буква просто выходит из расфокуса — в любой момент она целая. */

.hero.is-ready .hero__bg { animation: bgIn 1.7s var(--ease) forwards; }
.hero.is-ready .t-script { animation: letterIn 1.35s var(--ease) forwards; animation-delay: var(--d, 0s); }
.hero.is-ready .t-word,
.hero.is-ready .hero__lead .ln,
.hero.is-ready .hero__facts .ln,
.hero.is-ready .hero__cta { animation: riseIn 1.05s var(--ease) forwards; animation-delay: var(--d, 0s); }

@keyframes bgIn   { to { opacity: 1; transform: scale(1); } }
/* 🔴 Без filter и без scale — только прозрачность и лёгкий подъём.
   Любой filter создаёт слой, а слой срезает росчерки (см. .t-script). */
@keyframes letterIn {
  from { opacity: 0; transform: translateY(.09em); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(var(--rise, 1.1em)); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);                  filter: blur(0); }
}

/* очерёдность появления */
.t-script--iz     { --d: .20s; }
.t-word--nabroska { --d: .50s; --rise: .38em; }
.t-script--v      { --d: .68s; }
.t-word--prof     { --d: .92s; --rise: .38em; }

.hero__facts .ln:nth-child(1) { --d: 1.05s; --rise: .8em; }
.hero__facts .ln:nth-child(2) { --d: 1.14s; --rise: .8em; }
.hero__facts .ln:nth-child(3) { --d: 1.23s; --rise: .8em; }

.hero__lead .ln:nth-child(1) { --d: 1.20s; }
.hero__lead .ln:nth-child(2) { --d: 1.31s; }
.hero__lead .ln:nth-child(4) { --d: 1.46s; }
.hero__lead .ln:nth-child(5) { --d: 1.57s; }

.hero__cta { --d: 1.80s; --rise: .9em; }

/* ============================================================
   ТЕЛЕФОН И ЛЮБОЙ ВЕРТИКАЛЬНЫЙ ЭКРАН
   Экран по-прежнему ровно в высоту устройства, прокрутки нет:
   текст сверху занимает столько, сколько нужно, картинка забирает остаток.
   ============================================================ */
@media (orientation: portrait) {

  .hero {
    display: flex;
    flex-direction: column;
    container-type: normal;
  }

  /* картинка — нижняя часть экрана */
  .hero__bg {
    position: relative;
    inset: auto;
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  /* приближаем кадр к фигуре: у вертикального экрана иначе сверху
     остаётся пустое небо, а героиня уезжает вниз.
     Картинка выше своего окна и прижата к низу — верх обрезается. */
  .hero__bg img {
    inset: auto 0 0 0;
    height: 112%;
    object-position: 92% 100%;
  }

  /* текст — верхняя часть */
  .hero__layer {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    height: auto;
    order: 1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 3.4vw, 26px);
    padding: clamp(26px, 8vw, 54px) clamp(22px, 6.5vw, 46px) clamp(10px, 3vw, 22px);
    z-index: 2;
  }

  .hero__title,
  .hero__lead,
  .hero__facts,
  .hero__cta {
    position: static;
    white-space: normal;
    left: auto; top: auto; right: auto;
    text-align: left;
  }

  /* цифры — одной строкой сверху */
  .hero__facts {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(12px, 3.4vw, 19px);
    line-height: 1.2;
    letter-spacing: .02em;
    opacity: .9;
  }
  .hero__facts .ln { display: inline; }
  .hero__facts .ln + .ln::before { content: "·"; margin: 0 .55em; opacity: .55; }

  /* заголовок — две строки, рукописная буква перед словом.
     Отступ сверху опускает весь текст с кнопкой ниже, а строку
     «2 курса · 60+ уроков · старт» оставляет на месте. */
  .hero__title {
    order: 2;
    margin-top: clamp(22px, 6vw, 48px);
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, .6vw, 8px);
  }
  .hero__title .t-line {
    display: flex;
    align-items: baseline;
    gap: clamp(3px, 1.1vw, 9px);
  }
  .hero__title .t-script,
.hero__title .t-word {
    position: static;
    display: inline-block;
    left: auto; top: auto;
  }
  .t-script { font-size: clamp(50px, 15vw, 104px); line-height: .9; }
  .t-word   { font-size: clamp(28px, 8.4vw, 58px); letter-spacing: .012em; line-height: 1; }

  /* описание */
  .hero__lead {
    order: 3;
    font-size: clamp(14px, 4.05vw, 27px);
    line-height: 1.34;
  }
  .hero__lead .ln--gap { height: .5em; }

  /* кнопка */
  .hero__cta {
    order: 4;
    padding: clamp(13px, 3.7vw, 22px) clamp(28px, 8vw, 48px);
    font-size: clamp(14px, 4vw, 24px);
    letter-spacing: .03em;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  }
  .hero__cta:hover,
  .hero__cta:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .46); }
}

/* Планшет в вертикали: экран высокий, текста столько же — между кнопкой
   и иллюстрацией копилась пустота. Отдаём картинке фиксированную долю,
   текст центрируем в оставшейся части. Телефона это не касается. */
@media (orientation: portrait) and (min-width: 700px) {
  .hero__bg   { flex: 0 0 58%; }
  .hero__layer { flex: 1 1 auto; justify-content: center; }
}

/* Планшет горизонтально: экран меньше десктопного, и цифры справа
   при том же поле наезжали на самый край. Отодвигаем их только здесь —
   компьютерная версия остаётся как есть. */
@media (orientation: landscape) and (max-width: 1400px),
       (orientation: landscape) and (pointer: coarse) {
  .hero__facts { right: calc(70 * var(--u)); }
}

/* очень низкий экран в альбомной ориентации — ужимаем поля кнопки,
   чтобы она не наезжала на нижний край сцены */
@media (orientation: landscape) and (max-height: 420px) {
  .hero__cta { padding: calc(26 * var(--u)) calc(58 * var(--u)); }
}

/* ============================================================
   Если человек отключил анимации в системе — показываем сразу
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { opacity: 1; transform: none; animation: none !important; }
  .hero__title .t-script,
  .hero__title .t-word,
  .hero__lead .ln,
  .hero__facts .ln,
  .hero__cta { opacity: 1; animation: none !important; }
  .t-script { transform: none; filter: none; }
  .hero__cta { transition: background-color .2s linear; }
}