/*
 * Страница ввода кода активации.
 *
 * Свёрстана по макету Figma (Abbott — FSL main, экран «Обучение»).
 * Эталоны: десктоп 1920x1263, мобильный 390x844 — размеры и цвета сняты
 * с экспортов 2x, поэтому на этих ширинах вёрстка совпадает с макетом.
 * Между ними всё масштабируется пропорционально ширине окна.
 *
 * Состояний ошибки и блокировки в макете нет — они добавлены по ТЗ_Редирект
 * и стилизованы под ту же палитру.
 */

:root {
    --bg-base: #C8E0F8;
    --accent: #EB664B;
    --accent-hover: #D8492C;
    --ink: #000000;
    --field-bg: #EDF1F7;
    /* В макете вся вторичная типографика — чёрный с прозрачностью 50%. */
    --secondary-ink: rgba(0, 0, 0, 0.5);
    --danger: #C8281A;

    --font: 'Helvetica Web', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;

    /* Ширина контента: 1764 из 1920. */
    --container: 91.6667%;
    --container-max: 1760px;

    /* Кегли и размеры: значение при 1920px совпадает с макетом. */
    --title-size: clamp(36px, 5.2083vw, 100px);
    --title-leading: clamp(36px, 6.25vw, 120px);
    --title-tracking: 0;
    --subtitle-size: clamp(13px, 1.8750vw, 36px);
    --subtitle-leading: clamp(15px, 1.8750vw, 36px);
    --light: 300;
    --subtitle-weight: var(--light);
    --hint-size: clamp(12px, 1.2500vw, 24px);
    --input-size: clamp(12px, 1.0417vw, 20px);
    --field-height: clamp(48px, 5.2083vw, 100px);
    --field-radius: clamp(10px, 1.0417vw, 20px);
    /* В новом варианте кнопка шире поля по высоте: 150x100. */
    --button-width: clamp(56px, 7.8125vw, 150px);
    --footer-height: clamp(48px, 6.25vw, 120px);
    --footer-size: clamp(12px, 1.25vw, 24px);

    /* Вертикальные отступы. */
    --pad-top: clamp(28px, 8.5208vw, 163.6px);
    --gap-title: clamp(12px, 0.8594vw, 16.5px);
    --gap-subtitle: clamp(20px, 6.3281vw, 121.5px);
    --gap-hint: clamp(10px, 2.0312vw, 39.0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font);
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;

    /* На десктопе фон собирается слоями в .scene, здесь только подложка. */
    background-color: var(--bg-base);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
 * Фоновая сцена.
 *
 * Единица --uw — один пиксель макета по ширине окна. В ней живут и контент,
 * и все иллюстрации, поэтому пропорции между ними всегда как в макете.
 *
 * Отдельного масштаба для нижнего ряда сознательно нет. Пробовали ужимать
 * его под высоту окна — получалось, что капсула и перо стоят в одном
 * масштабе, а телефон, салат и бутылёк на треть мельче, и это бросалось
 * в глаза. Теперь ряд сохраняет размер и просто подрезается нижней кромкой
 * окна: в макете кадр 1263px, а реальное окно браузера около 937px.
 */
:root {
    /* Ограничение сверху обязательно: кегли, ширина контейнера и высота поля
       упираются в размеры макета на 1920, дальше не растут. Без потолка на
       мониторах шире 1920 расчёт сцены уезжал вниз — на 34-дюймовом ультравайде
       граница текста получалась 1254px при высоте окна 1250px, и нижний ряд
       иллюстраций просто уходил за экран. */
    --uw: min(calc(100vw / 1920), 1px);
    /* Один масштаб на всё: иллюстрации не расходятся между собой. */
    --ub: var(--uw);
}

.scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Волны абстрактные, поэтому растягиваются на всё окно: так они всегда
   закрывают его целиком, независимо от пропорции экрана. */
.scene__waves {
    position: absolute;
    inset: 0;
    background-image: image-set(
        url('../../img/start/waves-desktop.webp') type('image/webp'),
        url('../../img/start/waves-desktop.png') type('image/png'));
    background-image: -webkit-image-set(
        url('../../img/start/waves-desktop.webp') type('image/webp'),
        url('../../img/start/waves-desktop.png') type('image/png'));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Верхние элементы прижаты к углам окна. */
.scene__top {
    position: absolute;
    height: auto;
}

.scene__pill {
    left: calc(90 * var(--uw));
    top: calc(74 * var(--uw));
    width: calc(164 * var(--uw));
}

.scene__feather {
    right: 0;
    top: calc(46 * var(--uw));
    width: calc(252 * var(--uw));
}

/*
 * Нижний ряд. На высоком окне прижат к низу, на невысоком встаёт на своё
 * место из макета (y = 716) и подрезается нижней кромкой. Выше 716 не
 * поднимается никогда, поэтому на текст не наезжает: подсказка кончается
 * на 661.
 */
.scene__bottom {
    position: absolute;
    left: 0;
    right: 0;
    top: max(calc(716 * var(--uw)), calc(100% - 547 * var(--ub)));
    height: calc(547 * var(--ub));
}

.scene__bottom img {
    position: absolute;
    height: auto;
}

/* Координаты внутри сцены — из макета, отсчёт от y = 716. */
/* Крайние элементы держатся за края окна, средние стоят пропорционально
   его ширине: так композиция не сползает к центру на низких окнах. */
.scene__branch {
    left: 0;
    top: calc(13 * var(--ub));
    width: calc(276 * var(--ub));
}

.scene__phone {
    left: 18.229%;
    top: calc(13 * var(--ub));
    width: calc(317 * var(--ub));
}

.scene__salad {
    left: 51.823%;
    top: calc(115 * var(--ub));
    width: calc(288 * var(--ub));
}

.scene__pills {
    right: calc(39 * var(--ub));
    top: 0;
    width: calc(329 * var(--ub));
}

/* Поле ввода, подсказка и подвал — над сценой, как в макете. */
.code-form,
.page__footer,
.error-page__action {
    position: relative;
    z-index: 2;
}

/* Контент прижат к верху: нижнюю часть экрана в макете занимают
   иллюстрации фона, перекрывать их нельзя. */
.page__main {
    flex: 1 1 auto;
    width: min(var(--container), var(--container-max));
    margin: 0 auto;
    padding-top: var(--pad-top);
    text-align: center;
}

/* ---------- Заголовки ---------- */

.title {
    margin: 0;
    color: var(--accent);
    font-size: var(--title-size);
    font-weight: 700;
    line-height: var(--title-leading);
    letter-spacing: var(--title-tracking);
    text-transform: uppercase;
}

.subtitle__line {
    display: block;
}

/*
 * В макете первая строка подзаголовка набрана с концевым пробелом, и при
 * центрировании он сдвигает её влево на половину своей ширины. Обычный
 * пробел в конце строки браузер схлопывает, поэтому воспроизводим неразрывным.
 * В мобильном макете этого пробела нет, так что правило только для десктопа.
 */
@media (min-width: 768px) {
    .subtitle__line:first-child::after {
        content: '\00a0';
    }
}

.subtitle {
    margin: var(--gap-title) 0 0;
    font-size: var(--subtitle-size);
    font-weight: var(--subtitle-weight);
    line-height: var(--subtitle-leading);
}

/* ---------- Форма ---------- */

.code-form {
    margin-top: var(--gap-subtitle);
}

.code-form__field {
    display: flex;
    align-items: stretch;
    height: var(--field-height);
    background: var(--field-bg);
    border-radius: var(--field-radius);
    box-shadow: 0 3px 5px rgba(38, 51, 61, 0.1);
    transition: box-shadow 0.15s ease;
}

.code-form__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 clamp(14px, 3.125vw, 60px);
    border: none;
    border-radius: var(--field-radius);
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--input-size);
    font-weight: var(--light);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    outline: none;
}

.code-form__input::placeholder {
    color: var(--secondary-ink);
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

.code-form__input::-ms-clear {
    display: none;
}

.code-form__input:disabled {
    color: var(--secondary-ink);
    cursor: not-allowed;
}

.code-form__field:focus-within {
    box-shadow: 0 3px 5px rgba(38, 51, 61, 0.1), inset 0 0 0 2px var(--accent);
}

.code-form--invalid .code-form__field {
    box-shadow: 0 3px 5px rgba(38, 51, 61, 0.1), inset 0 0 0 2px var(--danger);
}

/* Квадратная кнопка со стрелкой, вжатая в правый край поля. */
.code-form__submit {
    position: relative;
    flex: 0 0 auto;
    width: var(--button-width);
    border: none;
    border-radius: var(--field-radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.code-form__submit:hover:not(:disabled) {
    background: var(--accent-hover);
}

.code-form__submit:focus-visible {
    outline: 3px solid var(--accent-hover);
    outline-offset: -7px;
}

.code-form__submit:disabled {
    background: #C4C9CF;
    cursor: not-allowed;
}

.code-form__arrow {
    width: clamp(24px, 1.8359vw, 35.25px);
    height: auto;
}

.code-form__spinner {
    display: none;
    position: absolute;
    width: clamp(18px, 2.2vw, 42px);
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.code-form--busy .code-form__arrow {
    visibility: hidden;
}

.code-form--busy .code-form__spinner {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .code-form__spinner {
        animation-duration: 2s;
    }
}

/* ---------- Подсказка и ошибка ---------- */

.code-form__hint,
.code-form__error {
    margin: var(--gap-hint) 0 0;
    font-size: var(--hint-size);
    font-weight: var(--light);
    line-height: 1.2;
}

.code-form__hint {
    color: var(--secondary-ink);
}

.code-form__error {
    /* Не flex: при переносе на две строки иконка отрывалась от текста
       и висела отдельно слева. Инлайновая иконка едет вместе с первой строкой. */
    display: block;
    text-align: center;
    color: var(--danger);
}

.code-form__error::before {
    content: '';
    display: inline-block;
    vertical-align: -0.15em;
    margin-right: 0.4em;
    width: 1.05em;
    height: 1.05em;
    background: var(--danger);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.code-form__error[hidden],
.code-form__hint[hidden] {
    display: none;
}

/* ---------- Страница ошибки ---------- */

/* Заголовок здесь длиннее, чем «Обучение», поэтому кегль меньше
   и строка переносится. */
.title--error {
    font-size: clamp(26px, 4.4vw, 84px);
    line-height: 1.1;
}

.error-page__action {
    margin: var(--gap-subtitle) 0 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--field-height) * 0.62);
    padding: 0 clamp(20px, 2.6vw, 50px);
    border-radius: var(--field-radius);
    background: var(--accent);
    color: #fff;
    font-size: var(--hint-size);
    text-decoration: none;
    box-shadow: 0 3px 5px rgba(38, 51, 61, 0.1);
    transition: background-color 0.15s ease;
}

.button:hover {
    background: var(--accent-hover);
}

.button:focus-visible {
    outline: 3px solid var(--accent-hover);
    outline-offset: 3px;
}

/* ---------- Подвал ---------- */

.page__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--footer-height);
    background: #fff;
    color: var(--secondary-ink);
    font-size: var(--footer-size);
    font-weight: var(--light);
}

.page__footer > * {
    width: min(var(--container), var(--container-max));
    margin: 0 auto;
    text-align: left;
}

/* ---------- Мобильный макет (эталон 390x844) ---------- */

@media (max-width: 767px) {
    :root {
        --container: 89.7436%;
        --subtitle-weight: var(--light);
        --title-size: clamp(40px, 15.3846vw, 60px);
        --title-tracking: 0;
        --title-leading: clamp(30px, 15.3846vw, 60px);
        --subtitle-size: clamp(12px, 4.6154vw, 18px);
        --subtitle-leading: clamp(14px, 4.6154vw, 18px);
        --hint-size: clamp(11px, 4.6154vw, 18px);
        --input-size: clamp(12px, 4.6154vw, 18px);
        --field-height: clamp(64px, 23.0769vw, 90px);
        --field-radius: clamp(10px, 5.1282vw, 20px);
        /* На мобильном кнопка квадратная, как в макете. */
        --button-width: var(--field-height);
        --footer-height: clamp(44px, 15.3846vw, 60px);
        --footer-size: clamp(11px, 4.1026vw, 16px);

        --pad-top: clamp(60px, 58.2051vw, 227.0px);
        --gap-title: clamp(-14px, 0.7692vw, 3.0px);
        --gap-subtitle: clamp(20px, 9.8718vw, 38.5px);
        --gap-hint: clamp(8px, 3.8462vw, 15.0px);
    }

    /* На мобильном композиция другая и по высоте помещается: там остаётся
       одна фоновая картинка, послойная сцена не нужна. */
    .scene {
        display: none;
    }

    body {
        background-image: image-set(
            url('../../img/start/bg-mobile.webp') type('image/webp'),
            url('../../img/start/bg-mobile.png') type('image/png'));
        background-image: -webkit-image-set(
            url('../../img/start/bg-mobile.webp') type('image/webp'),
            url('../../img/start/bg-mobile.png') type('image/png'));
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }

    .code-form__input {
        padding: 0 clamp(12px, 5.1282vw, 20px);
    }

    .code-form__arrow {
        width: clamp(24px, 9.038vw, 35.25px);
    }
}

/* Невысокие ландшафтные экраны: композиция макета не влезает,
   поджимаем верхний отступ. */
@media (max-height: 560px) and (orientation: landscape) {
    :root {
        --pad-top: 16px;
        --gap-subtitle: 16px;
    }
}