/* Первый экран: один вход для клиентов и компаний.

   Появление сделано лесенкой — логотип, заголовок, описание, форма.
   Смещение маленькое (8px): движение должно ощущаться, а не бросаться
   в глаза. Гасится общим правилом «меньше движения» в base.css. */

/* Логотип прижат к верху отдельной строкой — это шапка экрана.
   Ниже заголовок, ниже форма, и промежутки между ними одинаковые:
   над заголовком ровно столько же воздуха, сколько под ним.

   Раньше здесь стояли автоматические отступы, они центрировали
   заголовок с формой как группу — и весь запас высоты уходил
   в один промежуток над заголовком. Теперь запас забирает общий
   gap, поэтому он растёт вместе с высотой окна, оставаясь
   одинаковым сверху и снизу. */
/* Промежуток в долях ширины колонки, как и всё остальное. Раньше он
   считался от высоты окна (7vh) и рос быстрее колонки: на высоком
   мониторе три таких промежутка переставали помещаться, и низ экрана
   уезжал под край. Единица здесь должна быть той же, что у содержимого,
   иначе пропорция расходится ровно там, где её никто не проверяет. */
.screen--entry {
  justify-content: flex-start;
  gap: 8cqw;   /* 31 при ширине 390 */
  padding-inline: var(--sp-3);
}

/* Шапка экрана: логотип слева, выбор языка справа. Список языков
   всплывает поверх содержимого — раздвигать колонку ему нельзя,
   экран и так помещается ровно. */
.screen--entry .entry__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.screen--entry .brand { flex: none; }

.screen--entry > * { animation: entry-rise .45s var(--ease) both; }

/* Ряд платформ стоит внутри формы, а не отдельным блоком экрана:
   иначе он получил бы общий промежуток в 8cqw и оторвался бы
   от кнопок, к которым относится. */
.screen--entry .platforms { margin-top: var(--sp-6); }

.screen--entry .entry__top { animation-delay: 0ms; }
.screen--entry .hero    { animation-delay: 70ms; }
.screen--entry .entry   { animation-delay: 130ms; }
.screen--entry .version { animation-delay: 190ms; }

/* Номер выкладки. Стоит на экране затем, чтобы на «у меня не работает»
   можно было спросить, что человек видит внизу, и сразу понять — его
   версия отстала или сломались мы.

   Вынут из потока намеренно. Строка в общей колонке становится ещё одним
   блоком и получает общий промежуток экрана — до 68px сверху при своих
   16px высоты. Содержимое перестаёт помещаться, и строка уезжает
   за нижний край: именно так и вышло с первого раза.

   Прижат к низу колонки, нажатия пропускает сквозь себя. */
.screen--entry .version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: .04em;
  pointer-events: none;
}

@keyframes entry-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Логотип ───────────────────────────────────────────────── */

.screen--entry .brand__mark {
  width: 12cqw;
  height: 12cqw;
  border-radius: 2.8cqw;   /* 11 — заметно меньше, чем у полей */
  font-size: var(--fs-lg);
  box-shadow:
    0 6px 18px var(--cta-glow-near),
    inset 0 1px 0 var(--accent-hi);
}

.screen--entry .brand__name {
  font-size: var(--fs-lg);
  font-weight: 750;
}

/* ── Заголовок ─────────────────────────────────────────────── */

.screen--entry .hero__title {
  /* Предел задаёт длинная вторая строка: «пластиковых карт» — это
     около 8.4 em с учётом отрицательного трекинга, и она обязана
     умещаться в одну строку при ширине колонки минус отступы. */
  font-size: clamp(28px, 9.7cqw, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* Вторая строка золотая: градиент слева направо, чтобы конец
   строки уходил в более тёмное золото. */
.screen--entry .hero__title em {
  font-style: normal;
  background: linear-gradient(90deg,
    var(--accent-hi) 0%, var(--accent) 45%, var(--accent-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.screen--entry .hero__lead {
  margin-top: var(--sp-5);
  font-size: 4.36cqw;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ── Форма ─────────────────────────────────────────────────── */

/* Поля и подписи общие с экранами регистрации — они в field.css
   и auth.css. Здесь только то, что отличает вход: он короче, и кнопке
   можно дать больше воздуха. */
.screen--entry .btn--primary { margin-top: var(--sp-5); }

.screen--entry .entry__actions { margin-top: var(--sp-6); }