/* Главная qrush.delivery - слайды на весь экран.

   Вёрстка снята с макета 1678x937 (файл 30730533, слайд 01). Все размеры в файле - это
   ПИКСЕЛИ МАКЕТА, умноженные на масштаб:

     --u  масштаб правой панели: макет целиком вписан в окно (min по ширине и высоте).
          При окне ровно 1678x937 он равен 1, и страница совпадает с макетом пиксель в пиксель.
     --k  масштаб фотографии слева: она закрывает свою колонку целиком (то же, что object-fit
          cover), поэтому тут max, а не min. Экран телефона лежит на фотографии и считается
          в тех же единицах, иначе он съедет с рамки при другой пропорции окна.
          Точное значение --k ставит js по живому размеру колонки; формула ниже - запас
          на случай, когда скрипт не отработал (на телефоне 100vh врёт из-за панелей браузера).

   Граница фотографии и панели на макете - x=783 из 1678, это 46.663%.
   Опорные числа макета: колонка текста начинается с x=854, рейл справа по центру x=1630,
   круги значков 89px на y=566. */

:root {
    --u: min(0.0595948vw, 0.1067236vh, 1.6px);
    --k: max(0.0595913vw, 0.1067236vh);

    --s-ink: #192a3e;
    --s-body: #576276;
    --s-gold: #b87829;
    --s-soft: #f4e8dc;
    --s-line: #f3e5d7;
    --s-bg: #fbf8f4;
}

body.slides {
    display: block;
    overflow: hidden;
    background: var(--s-bg);
    color: var(--s-ink);
    height: 100%;
}

html:has(body.slides) { overflow: hidden; }

.sl,
.sl * {
    /* в общем style.css шрифт задан селектором `*`, он бьёт наследование от .sl - поэтому
       семейство приходится назначать каждому элементу внутри слайда */
    font-family: 'Inter Tight', Inter, 'Segoe UI', system-ui, sans-serif;
}

.sl {
    position: fixed;
    inset: 0;
    display: flex;
    overflow: hidden;
    background: var(--s-bg);
    -webkit-font-smoothing: antialiased;
}

/* ---------- левая половина: фотография с телефоном ---------- */

.sl__photo {
    position: relative;
    flex: none;
    width: 46.663%;
    height: 100%;
    overflow: hidden;
    background: #cbbfae;
}

/* СЛАЙД «САЙТ ОТЕЛЯ» стоит наоборот: текст слева, планшет справа. Колонки местами
   в разметке НЕ меняются - они разъезжаются сдвигом, и переход виден как движение,
   а не как рывок. Сдвиг у каждой колонки свой: он считается от её собственной
   ширины (46.663% и 53.337% полосы). */
.sl__photo, .sl__panel { transition: transform .78s cubic-bezier(.4, .05, .25, 1); }
.sl.is-site .sl__photo { transform: translateX(114.30%); }
.sl.is-site .sl__panel { transform: translateX(-87.49%); }

/* Планшет закрывает собой весь кадр вместе с телефоном. Картинка сделана в той же
   пропорции, что и коробка .sl__fit, поэтому просто ложится поверх. */
.sl__tab {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s ease-out;
    pointer-events: none;
}

.sl__tab-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

/* Окно стекла: доли и скругление посчитаны по тем же углам, на которые натянута сама
   страница (tools/ekrany_plansheta.py), и ЗАМОРОЖЕНЫ - см. qrush.info. Обрезка нужна
   для приближения: без неё увеличенный экран вылезал бы за рамку планшета. */
.sl__tab-win {
    position: absolute;
    left: 5.6266%;
    top: 23.0769%;
    width: 88.1714%;
    height: 53.8462%;
    overflow: hidden;
    border-radius: calc(10 * var(--k));
    /* ⚠ ПОД ЭКРАНАМИ - СВЕТЛАЯ ПОДЛОЖКА. Пока два кадра перекрещиваются
       прозрачностью, сквозь них видно то, что лежит ниже; а ниже - тёмная заливка
       стекла, и смена кадра читалась как тёмное моргание. */
    background: #f5f3f0;
}

/* ⚠ ЭКРАН ВЫХОДИТ ЗА ОКНО НА ТОЧКУ. Ровно по краю между ним и светлой подложкой
   планшета оставалась щель в доли точки, и на затемнённых кадрах она читалась как
   белая полоска у нижней рамки. Окно всё равно обрезает лишнее. */
.sl__tab-sc {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    display: block;
    opacity: 0;
    /* ⚠ СМЕНА КАДРА МГНОВЕННАЯ, без наплыва. Кадры сцены отличаются одной-двумя
       буквами, и на перекрестии было видно ОБА текста сразу («Brea» поверх «New
       category»), а заодно сквозь полупрозрачные кадры проглядывал нижний слой. */
}

.sl__tab-sc.is-on { opacity: 1; }

/* Высокий кадр: страница услуг длиннее окна, поэтому картинка ровно 2.4 окна, а
   «прокрутка» делается камерой - тем же приближением, что возит кадр по странице.
   Запас по бокам чуть больше обычного: стекло на макете завалено на 1.8 точки за
   всю высоту, и у сдвинутой вниз картинки правый край мог не дойти до рамки. */
.sl__tab-sc--long {
    inset: -1px auto auto -3px;
    width: calc(100% + 6px);
    /* --длина: сколько окон страницы в картинке, ставится в разметке у каждого кадра */
    height: calc(var(--длина, 2.4) * 100%);
}

/* Приближение двигает весь слой - и экран, и курсор: иначе при зуме стрелка
   показывает не туда, куда нажимает.
   ⚠ СМЕЩЕНИЕМ, А НЕ ТОЧКОЙ ОТСЧЁТА: по ходу сцены приближение переезжает с
   категории на карточку, а смена transform-origin не плавная - картинка
   прыгает. Сдвиг считает сценарий, тут только плавность. */
.sl__tab-zoom {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    transition: transform 1.3s cubic-bezier(.35, .6, .25, 1);   /* камера едет медленно, без рывка */
}

@media (prefers-reduced-motion: reduce) {
    .sl__tab-zoom { transition: none; transform: none !important; }
}

/* Курсор мыши: ходит по пунктам меню сайта и щёлкает. Стрелка нарисована в разметке
   картинки, а не шрифтом: иконочный шрифт сюда не подключён. */
.sl__cur {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(26 * var(--k));
    height: calc(34 * var(--k));
    margin: calc(-3 * var(--k)) 0 0 calc(-3 * var(--k));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M3 1.6 3 28.2 9.6 21.9 13.6 31.6 18.2 29.7 14.2 20.2 23 19.7Z' fill='%23fff' stroke='%23262223' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    opacity: 0;
    filter: drop-shadow(0 calc(2 * var(--k)) calc(4 * var(--k)) rgba(40, 32, 26, .35));
    transition: opacity .3s ease, left .72s cubic-bezier(.4, .05, .2, 1), top .72s cubic-bezier(.4, .05, .2, 1);
}

.sl__cur.is-on { opacity: 1; }

/* колечко нажатия - как отклик кнопки в приложении, только под стрелкой */
.sl__cur::after {
    content: '';
    position: absolute;
    left: calc(2 * var(--k));
    top: calc(2 * var(--k));
    width: calc(34 * var(--k));
    height: calc(34 * var(--k));
    margin: calc(-17 * var(--k)) 0 0 calc(-17 * var(--k));
    border-radius: 50%;
    border: calc(2 * var(--k)) solid rgba(179, 121, 48, .85);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes slClick { from { transform: scale(.25); opacity: .95; } to { transform: scale(1); opacity: 0; } }
    .sl__cur.is-tap::after { animation: slClick .55s ease-out; }
}

.sl.is-site .sl__tab { opacity: 1; }
.sl.is-site .sl__screen { opacity: 0; transition: opacity .3s ease-out; }

/* Полоса с точками уезжает к внешнему краю панели: иначе она оказывается посреди
   экрана, между текстом и планшетом. Заодно текст отходит от неё: в зеркальной
   раскладке между полосой и кикером оставалось десять единиц макета, и они почти
   слипались (заметил заказчик). */
.sl.is-site .sl-rail { right: auto; left: calc(24 * var(--u)); }

.sl.is-site .sl-kick,
.sl.is-site .sl-h,
.sl.is-site .sl-lead { left: calc(96 * var(--u)); }

.sl.is-site .sl-feats { left: calc(111 * var(--u)); }

/* коробка ровно в пропорции макета: 783x937 в единицах --k, по центру колонки */
.sl__fit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(783 * var(--k));
    height: calc(937 * var(--k));
    transform: translate(-50%, -50%);
}

.sl__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

/* экран телефона: макет 239..607 по x, 61..872 по y */
.sl__screen {
    position: absolute;
    left: calc(239 * var(--k));
    top: calc(61 * var(--k));
    width: calc(368 * var(--k));
    height: calc(811 * var(--k));
    border-radius: calc(50 * var(--k));
    overflow: hidden;
    /* подложка экрана СВЕТЛАЯ: если между слоями на миг появится щель, она будет
       светлой, а не чёрной. Чёрный экран телефона даёт только заставка загрузки */
    background: #faf9f7;
}

.sl__sc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0;
    /* ⚠ СМЕНА ЭКРАНА - ПРОСТОЙ НАПЛЫВ, БЕЗ МАСШТАБА. Новый экран раньше слегка
       наезжал (scale 1.04), и при листании телефон будто дышал - заказчик просил
       убрать. И наплыв короткий: пока он идёт, сквозь новый экран виден старый, а
       если в это же время влетают карточки раздела, на экране каша из двух экранов. */
    transition: opacity .28s ease;
}

.sl__sc.is-on { opacity: 1; }

/* ---------- телефон просыпается ----------

   Пока грузятся фотография и снимок экрана, телефон стоит погашенным с кружком
   загрузки. Гасим его скриптом, когда картинки готовы; если скрипт не отработал,
   экран всё равно откроется через 6 секунд - правило страховки из скила анимаций. */

.sl-boot {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    /* видимость переключается той же сменой стиля, ровно когда кончится гашение:
       никаких отдельных таймеров и повторных касаний элемента - именно они
       заставляли браузер перерисовывать слой, и экран мелькал чёрным */
    transition: opacity .55s ease, visibility 0s linear .55s;
}

.sl-boot.is-off {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sl-boot__sp {
    position: relative;
    width: calc(58 * var(--k));
    height: calc(58 * var(--k));
}

/* двенадцать лепестков по кругу: каждый гаснет со своей задержкой */
.sl-boot__sp i {
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(4.5 * var(--k));
    height: calc(15 * var(--k));
    margin-left: calc(-2.25 * var(--k));
    border-radius: 999px;
    background: #fff;
    transform-origin: 50% calc(29 * var(--k));
    animation: slBootSpin 1s linear infinite;
}

@keyframes slBootSpin {
    0% { opacity: 1; }
    100% { opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
    .sl-boot__sp i { animation: none; opacity: .55; }
}

/* ---------- правая половина: панель со слайдами ---------- */

.sl__panel {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    background: var(--s-bg);
    overflow: hidden;
}

/* коробка панели с макета: 895x937 в единицах --u, по центру свободного места */
.sl__box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(895 * var(--u));
    height: calc(937 * var(--u));
    transform: translate(-50%, -50%);
}

.sl-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s;
}

.sl-slide.is-on {
    opacity: 1;
    visibility: visible;
}

/* номер слайда */
.sl-num {
    position: absolute;
    right: calc(94 * var(--u));
    top: calc(84 * var(--u));
    margin: 0;
    font-size: calc(169 * var(--u));
    line-height: calc(127 * var(--u));
    font-weight: 900;
    letter-spacing: calc(-6 * var(--u));
    transform-origin: 100% 50%;
    color: var(--s-soft);
    user-select: none;
}

/* надзаголовок с чёрточкой */
.sl-kick {
    position: absolute;
    left: calc(71 * var(--u));
    top: calc(160 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin: 0;
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
    font-weight: 700;
    letter-spacing: calc(0.4 * var(--u));
    color: var(--s-gold);
    text-transform: uppercase;
}

.sl-kick::before {
    content: '';
    flex: none;
    width: calc(36 * var(--u));
    height: calc(3 * var(--u));
    background: var(--s-gold);
}

.sl-h {
    position: absolute;
    left: calc(71 * var(--u));
    top: calc(224 * var(--u));
    width: calc(700 * var(--u));
    /* Заголовок прижат к НИЗУ своего места: если перевод длиннее и строк стало три,
       лишняя строка уходит вверх, в пустое поле под кикером, а не наезжает на абзац.
       Раньше русский заголовок первого слайда ложился поверх текста. */
    height: calc(112 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    font-size: calc(52 * var(--u));
    line-height: calc(56 * var(--u));
    font-weight: 700;
    letter-spacing: calc(-1.3 * var(--u));
    color: var(--s-ink);
}

.sl-h b { color: var(--s-gold); font-weight: 700; }

/* Заголовок в три строки: место под него выше, кикер поднимается следом. */
.sl-slide--h3 .sl-kick { top: calc(112 * var(--u)); }
.sl-slide--h3 .sl-h { top: calc(168 * var(--u)); height: calc(168 * var(--u)); }

.sl-lead {
    position: absolute;
    left: calc(71 * var(--u));
    top: calc(365 * var(--u));
    width: calc(575 * var(--u));
    margin: 0;
    font-size: calc(22 * var(--u));
    line-height: calc(30.5 * var(--u));
    font-weight: 400;
    letter-spacing: calc(-0.42 * var(--u));
    color: var(--s-body);
}

/* три колонки с кружками */
.sl-feats {
    position: absolute;
    left: calc(86 * var(--u));
    top: calc(566 * var(--u));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(53.3 * var(--u));
    width: calc(757 * var(--u));
}

/* Слайд «Выгода»: три пункта читаются как цепочка, между ними стрелка в просвете
   колонок, на высоте середины значка. Стрелка decorative, в разметке её нет. */
.sl-slide--chain .sl-feat { position: relative; }
.sl-slide--chain .sl-feat:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    left: calc(100% + 26.65 * var(--u));
    top: calc(44.5 * var(--u));
    transform: translate(-50%, -50%);
    font-size: calc(34 * var(--u));
    line-height: 1;
    color: var(--s-gold);
    opacity: .55;
}

.sl-feat__ic {
    width: calc(89 * var(--u));
    height: calc(89 * var(--u));
    border-radius: 50%;
    background: var(--s-soft);
    color: var(--s-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(38 * var(--u));
}

.sl-feat__t {
    margin: calc(13 * var(--u)) 0 0;
    /* две строки держим всегда: иначе у соседних пунктов описания начинаются
       на разной высоте и строка съезжает */
    min-height: calc(52 * var(--u));
    font-size: calc(21.3 * var(--u));
    line-height: calc(26 * var(--u));
    font-weight: 700;
    letter-spacing: calc(-0.3 * var(--u));
    color: var(--s-ink);
}

.sl-feat__p {
    margin: calc(8 * var(--u)) 0 0;
    font-size: calc(19 * var(--u));
    line-height: calc(25 * var(--u));
    font-weight: 400;
    color: var(--s-body);
}

/* ---------- сценарий внутри телефона на втором слайде ----------

   Внутри лежат НАСТОЯЩИЕ снимки приложения гостя, снятые на ТЕСТОВОМ отеле шириной 393px
   с двойной плотностью. Экран услуг собран слоями (шапка, лента, нижнее меню), чтобы лента
   прокручивалась, а шапка и меню стояли; остальные шаги - целые кадры, они сменяются наплывом.
   Проценты ниже посчитаны при сборке кадров (scratchpad/sobrat.py): полоса над шапкой,
   высота шапки и меню, место плашки таймера. Менять их можно только вместе с пересборкой. */

.sl-ph { background: #faf9f7; }

.sl-ph__svc { position: absolute; inset: 0; }

.sl-ph__hd {
    position: absolute;
    left: 0;
    top: 3.348%;
    width: 100%;
    height: 6.782%;
    display: block;
}

/* На слайде туров шапок несколько: раздел и страницы двух туров. Меняются мгновенно,
   как в приложении при переходе на страницу тура и обратно. */
.sl-ph__hd[data-hd] { opacity: 0; }
.sl-ph__hd[data-hd].is-on { opacity: 1; }

.sl-ph__view {
    position: absolute;
    left: 0;
    right: 0;
    top: 10.13%;
    /* Лента идёт до самого низа экрана, нижнее меню лежит ПОВЕРХ неё - как в
       приложении. Иначе нижний отступ страницы (место под меню) остаётся видимым
       над панелью, и внизу зияет пустая полоса. */
    bottom: 0;
    overflow: hidden;
}

.sl-ph__tape {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity .25s ease-out;
    will-change: transform;
}

.sl-ph__tape.is-on { opacity: 1; }

/* панель корзины: живая полоса над нижним меню */
.sl-ph__bar {
    position: absolute;
    left: 0;
    bottom: 10.727%;
    width: 100%;
    height: 10.234%;
    display: block;
    opacity: 0;
    transform: translateY(30%);
    transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}

.sl-ph__bar.is-on { opacity: 1; transform: none; }

/* ВЪЕЗД КАРТОЧЕК. Под слоем лежит тот же экран без карточек, а ряды карточек
   вырезаны из ленты окошками и въезжают по одному, как в приложении. Движение,
   плавность и шаг задержек взяты из css/app-hotel.css: у разделов - подъём с
   проявлением, у заказов - «влёт колодой» с поворотом. Сдвиг считаем в единицах
   макета (--k), иначе он не масштабируется вместе с телефоном. */
.sl-ph__in {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .25s ease-out;
    pointer-events: none;
}

/* Слой виден отдельно от запуска карточек: при сбросе слайда он уже на месте, но
   карточек ещё нет, и они не начинают лететь, пока не сменился экран. */
.sl-ph__in.is-vis { opacity: 1; }
.sl-ph__in.is-vis .sl-ph__in-c { opacity: 0; }

.sl-ph__in-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.sl-ph__in-c {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.sl-ph__in-c > img {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes slCard { from { opacity: 0; transform: translateY(calc(32.4 * var(--k))); }
                        to   { opacity: 1; transform: none; } }

    @keyframes slDeck { from { opacity: 0; transform: translateY(calc(143 * var(--k))) rotate(7deg) scale(.9); }
                        60%  { opacity: 1; }
                        to   { opacity: 1; transform: none; } }

    .sl-ph__in.is-on .sl-ph__in-c { animation: slCard 1.8s cubic-bezier(.22, .9, .3, 1) both; }
    .sl-ph__in.is-on .sl-ph__in-c:nth-child(2) { animation-delay: .04s; }
    .sl-ph__in.is-on .sl-ph__in-c:nth-child(3) { animation-delay: .22s; }
    .sl-ph__in.is-on .sl-ph__in-c:nth-child(4) { animation-delay: .4s; }
    .sl-ph__in.is-on .sl-ph__in-c:nth-child(5) { animation-delay: .58s; }
    .sl-ph__in.is-on .sl-ph__in-c:nth-child(n+6) { animation-delay: .76s; }

    /* заказы влетают иначе и быстрее - шаг 0.1с, как в приложении */
    .sl-ph__in--deck.is-on .sl-ph__in-c { animation: slDeck .72s cubic-bezier(.16, 1.12, .3, 1) both; }
    .sl-ph__in--deck.is-on .sl-ph__in-c:nth-child(2) { animation-delay: 0s; }
    .sl-ph__in--deck.is-on .sl-ph__in-c:nth-child(3) { animation-delay: .1s; }
    .sl-ph__in--deck.is-on .sl-ph__in-c:nth-child(4) { animation-delay: .2s; }
    .sl-ph__in--deck.is-on .sl-ph__in-c:nth-child(5) { animation-delay: .3s; }
    .sl-ph__in--deck.is-on .sl-ph__in-c:nth-child(n+6) { animation-delay: .4s; }
}

/* Шторка (опции, корзина) лежит ПОВЕРХ живой ленты, а не подменяет её целым кадром:
   так фон под шторкой остаётся тем же самым и не дёргается. */
.sl-ph__dim {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .26s ease-out;
}

.sl-ph__dim.is-on { opacity: 1; }

.sl-ph__sheet {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 35;
    width: 100%;
    display: block;
    opacity: 0;
    transform: translateY(14%);
    transition: opacity .26s ease-out, transform .32s cubic-bezier(.2,.8,.3,1);
}

.sl-ph__sheet.is-on { opacity: 1; transform: none; }

/* Смена одной шторки на другую - МГНОВЕННАЯ, как в приложении: там нажатие сразу
   подсвечивает выбранную опцию или процент. Плавный переход здесь гасил обе шторки
   разом, сквозь них просвечивал фон, и это читалось как моргание. */
.sl-ph__sheet.is-quick { transform: none; transition: none; }

/* На слайде «возвращение» окно всплывает поверх ЦЕЛОГО кадра, а не поверх ленты,
   как в остальных сценариях. Слой кадру раздаёт сценарий (41 и выше), и кадр списка
   закрывал собой окно: окно считалось показанным, а на экране его не было. Опускаем
   под затемнение именно этот кадр - следующий за окном кадр (гость снова наводит
   камеру на QR) остаётся сверху и перекрывает окно, как и на прочих слайдах. */
.sl__sc[data-sc="back"] .sl-ph__fr[data-fr="list"] { z-index: 20 !important; }

/* Слой въезда на этом слайде лежит поверх кадра списка (у того слой 20), но под
   затемнением и окном (30 и 35). */
.sl__sc[data-sc="back"] .sl-ph__in { z-index: 22; }

/* окно заявки на услугу стоит по центру экрана, а не прижато к низу */
.sl-ph__sheet--mid { bottom: auto; transform: scale(.96); transform-origin: 50% 50%; }
.sl-ph__sheet--mid.is-on { transform: none; }
.sl-ph__sheet--mid.is-quick { transform: none; }

.sl-ph__tb {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    /* в кадре бар подрос: под ним полоса его же фона, чтобы меню не стояло
       вплотную к краю экрана - в приложении её держит отступ под жест */
    height: 10.727%;
    display: block;
}

.sl-ph__fr {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0;
    transition: opacity .26s ease-out;
}

.sl-ph__fr.is-on { opacity: 1; }

/* плашка обратного отсчёта: шесть состояний одной картинкой */
.sl-ph__chip {
    position: absolute;
    left: 74.15%;    /* правый край плашки вровень с текстом карточки: ширина 18.478% */
    top: 34.654%;
    width: 18.478%;
    height: 2.404%;
    background: url('/img/lp/slides/chips.png') no-repeat 0 0;
    background-size: 100% 400%;   /* четыре состояния отсчёта: 03, 02, 01, 00 */
    /* кадры получают растущий z-index при смене, поэтому плашке и пальцу нужен свой,
       иначе очередной кадр ляжет поверх них */
    z-index: 60;
    opacity: 0;
    transition: opacity .2s ease;
}

.sl-ph__chip.is-on { opacity: 1; }

/* палец: светлое кольцо, чтобы читалось и на белом попапе, и на тёмной фотографии */
.sl-ph__tap {
    position: absolute;
    width: calc(44 * var(--k));
    height: calc(44 * var(--k));
    margin: calc(-22 * var(--k)) 0 0 calc(-22 * var(--k));
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    border: calc(2.5 * var(--k)) solid rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 calc(1 * var(--k)) rgba(20, 24, 34, .25),
                0 calc(3 * var(--k)) calc(9 * var(--k)) rgba(20, 24, 34, .3);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
}

.sl-ph__tap.is-tap { animation: slTap .8s cubic-bezier(.25,.6,.3,1); }

@keyframes slTap {
    0% { opacity: 0; transform: scale(.45); }
    22% { opacity: 1; transform: scale(1); }
    62% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
    .sl-ph__tape { transition: none !important; }
    .sl-ph__tap { display: none; }
}

/* ---------- указатель слайдов справа ---------- */

.sl-rail {
    position: absolute;
    right: calc(35.5 * var(--u));
    top: calc(148 * var(--u));
    width: calc(25 * var(--u));
    height: calc(369 * var(--u));
}

.sl-rail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(3 * var(--u));
    height: 100%;
    margin-left: calc(-1.5 * var(--u));
    background: var(--s-line);
}

.sl-rail__d {
    position: absolute;
    left: 50%;
    width: calc(25 * var(--u));
    height: calc(25 * var(--u));
    margin: calc(-12.5 * var(--u)) 0 0 calc(-12.5 * var(--u));
    padding: 0;
    border: calc(2 * var(--u)) solid var(--s-line);
    border-radius: 50%;
    background: var(--s-bg);
    cursor: pointer;
    transition: border-color .3s ease;
}

.sl-rail__d::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    margin: calc(-7.5 * var(--u)) 0 0 calc(-7.5 * var(--u));
    border-radius: 50%;
    background: var(--s-gold);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .3s ease, transform .3s cubic-bezier(.3,1.4,.5,1);
}

.sl-rail__d.is-on { border-color: var(--s-gold); }
.sl-rail__d.is-on::after { opacity: 1; transform: none; }

/* ---------- въезд содержимого слайда ---------- */

.sl-slide .sl-num {
    opacity: 0;
    transform: translateY(calc(26 * var(--u))) scaleX(.875);
}

.sl-slide.is-on .sl-num {
    opacity: 1;
    transform: scaleX(.875);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}

.sl-slide .sl-kick,
.sl-slide .sl-h,
.sl-slide .sl-lead,
.sl-slide .sl-feat {
    opacity: 0;
    transform: translateY(calc(26 * var(--u)));
}

.sl-slide.is-on .sl-kick,
.sl-slide.is-on .sl-h,
.sl-slide.is-on .sl-lead,
.sl-slide.is-on .sl-feat {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}

.sl-slide.is-on .sl-kick { transition-delay: .06s; }
.sl-slide.is-on .sl-h { transition-delay: .12s; }
.sl-slide.is-on .sl-lead { transition-delay: .2s; }
.sl-slide.is-on .sl-feat:nth-child(1) { transition-delay: .28s; }
.sl-slide.is-on .sl-feat:nth-child(2) { transition-delay: .35s; }
.sl-slide.is-on .sl-feat:nth-child(3) { transition-delay: .42s; }

/* ---------- подсказка «крутите дальше» ---------- */

.sl-hint {
    position: absolute;
    left: calc(71 * var(--u));
    bottom: calc(52 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: 1;
    font-weight: 600;
    letter-spacing: calc(0.3 * var(--u));
    color: #a9a196;
    text-transform: uppercase;
    transition: opacity .4s ease;
}

.sl-hint i { font-size: calc(13 * var(--u)); animation: slHint 1.9s ease-in-out infinite; }
.sl-hint.is-off { opacity: 0; pointer-events: none; }

@keyframes slHint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(5 * var(--u))); }
}

/* ---------- вход в кабинет ---------- */

.sl-login {
    position: absolute;
    right: calc(48 * var(--u));
    bottom: calc(46 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(9 * var(--u));
    font-family: 'Inter Tight', Inter, sans-serif;
    font-size: calc(17 * var(--u));
    line-height: 1;
    font-weight: 600;
    color: var(--s-ink);
    padding: calc(14 * var(--u)) calc(24 * var(--u));
    border: calc(1.5 * var(--u)) solid var(--s-line);
    border-radius: 999px;
    transition: border-color .25s ease, color .25s ease;
}

.sl-login:hover { border-color: var(--s-gold); color: var(--s-gold); }

/* ---------- узкий экран: макета на него не было ---------- */

@media (max-width: 900px) {
    /* Макета под телефон не было: раскладка собрана по тому же смыслу - фотография сверху,
       текст слайда снизу, пункты прижаты к нижнему краю. Размеры тут заданы обычными
       единицами, а не пикселями макета: на узком экране пропорции слайда не работают. */

    .sl { flex-direction: column; }

    :root { --k: max(0.12771vw, 0.0489vh); }

    .sl__photo { width: 100%; height: 46%; }

    .sl__panel { flex: 1 1 auto; width: 100%; }

    /* столбиком колонки уже не меняются местами: сдвиг увёл бы их за край */
    .sl.is-site .sl__photo,
    .sl.is-site .sl__panel { transform: none; }
    .sl.is-site .sl-rail { left: auto; }
    .sl.is-site .sl-kick,
    .sl.is-site .sl-h,
    .sl.is-site .sl-lead,
    .sl.is-site .sl-feats { left: auto; }

    .sl__box {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        transform: none;
    }

    .sl-slide {
        display: flex;
        flex-direction: column;
        padding: 20px 20px 56px;
    }

    .sl-num {
        right: 18px;
        top: 8px;
        z-index: 0;
        font-size: 58px;
        line-height: 1;
        letter-spacing: -2px;
    }

    /* на десктопе эти блоки расставлены координатами макета; здесь они идут потоком,
       поэтому left/top надо обнулить - у position:relative они работают как сдвиг */
    .sl-kick,
    .sl-h,
    .sl-lead,
    .sl-feats {
        position: relative;
        z-index: 1;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
    }

    /* у длинного заголовка на десктопе своё, более высокое место (--h3); столбиком
       эти координаты не нужны, иначе заголовок ложится поверх абзаца */
    .sl-slide--h3 .sl-kick { top: auto; }
    .sl-slide--h3 .sl-h { top: auto; height: auto; }

    .sl-kick {
        margin: 0 0 12px;
        font-size: 11px;
        line-height: 14px;
        letter-spacing: .06em;
        gap: 8px;
    }

    .sl-kick::before { width: 24px; height: 2px; }

    .sl-h {
        width: auto;
        /* на десктопе у заголовка своё место с прижимом к низу; столбиком высота
           должна быть по содержимому, иначе вторая строка уезжает вверх и ложится
           поверх кикера */
        height: auto;
        display: block;
        margin: 0 0 14px;
        font-size: clamp(24px, 6.6vw, 32px);
        line-height: 1.16;
        letter-spacing: -.02em;
    }

    .sl-lead {
        width: auto;
        margin: 0;
        font-size: clamp(14px, 3.9vw, 17px);
        line-height: 1.45;
        letter-spacing: 0;
    }

    .sl-feats {
        width: auto;
        margin: 22px 0 0;
        column-gap: 12px;
    }

    /* просвет между колонками всего 12px - стрелка цепочки туда не влезает */
    .sl-slide--chain .sl-feat:not(:last-child)::after { display: none; }

    .sl-feat__ic { width: 44px; height: 44px; font-size: 19px; }
    .sl-feat__t { margin: 10px 0 0; min-height: 36px; font-size: 14px; line-height: 18px; }
    .sl-feat__p { margin: 4px 0 0; font-size: 12.5px; line-height: 16px; }

    .sl-rail {
        right: 20px;
        top: auto;
        bottom: 20px;
        width: auto;
        height: auto;
        display: flex;
        gap: 12px;
    }

    .sl-rail::before { display: none; }

    .sl-rail__d {
        position: relative;
        left: auto;
        top: auto !important;
        width: 14px;
        height: 14px;
        margin: 0;
        border-width: 2px;
    }

    .sl-rail__d::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; }

    .sl-hint { left: 20px; bottom: 22px; font-size: 11px; gap: 7px; }
    .sl-hint i { font-size: 10px; }

    .sl-login { display: none; }

    .sl-br { display: none; }

    .sl-slide .sl-num { transform: translateY(16px) scaleX(.9); }
    .sl-slide.is-on .sl-num { transform: scaleX(.9); }
    .sl-slide .sl-kick,
    .sl-slide .sl-h,
    .sl-slide .sl-lead,
    .sl-slide .sl-feat { transform: translateY(16px); }
    .sl-slide.is-on .sl-kick,
    .sl-slide.is-on .sl-h,
    .sl-slide.is-on .sl-lead,
    .sl-slide.is-on .sl-feat { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sl__sc,
    .sl-slide,
    .sl-slide.is-on .sl-num,
    .sl-slide.is-on .sl-kick,
    .sl-slide.is-on .sl-h,
    .sl-slide.is-on .sl-lead,
    .sl-slide.is-on .sl-feat { transition-duration: .01s; }

    .sl-hint i { animation: none; }
}

/* ---- выбор языка в презентации ----
   Коробка слайда вычислена в своих единицах (--u) и занята текстом, поэтому список
   кладём в её правый верхний угол отдельным слоем: он не участвует в раскладке
   слайда и не двигает ни номер, ни заголовок.
   ⚠ Полоса точек (.sl-rail) стоит у правого края коробки - список поднят над ней
   и сдвинут левее, иначе перекрывает первую точку. */
.sl-lang {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 5;
    top: calc(-16 * var(--u));
    right: calc(52 * var(--u));
    height: calc(44 * var(--u));
    padding: 0 calc(34 * var(--u)) 0 calc(14 * var(--u));
    border: 1px solid rgba(25, 42, 62, .16);
    border-radius: calc(12 * var(--u));
    background: #fff no-repeat right calc(12 * var(--u)) center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b87829' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: calc(12 * var(--u)) calc(8 * var(--u));
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--s-ink);
    cursor: pointer;
}

.sl-lang:focus { outline: none; border-color: var(--s-gold); }

/* ---- кнопка выхода (05.10.2026): та же стеклянная пилюля, что «Выйти из демо» в css/home.css ----
   ⚠ Стоит поверх обеих колонок: на слайдах с планшетом колонки меняются местами, и слева
   оказывается светлая панель - тёмное стекло читается и там. */
.sl-exit {
    position: fixed; z-index: 50;
    top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left));
    display: inline-flex; align-items: center; gap: 12px;
    padding: 7px 20px 7px 7px;
    border: 1px solid rgba(253, 252, 249, .22); border-radius: 999px;
    background: rgba(13, 11, 10, .42);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .10);
    color: #fdfcf9; text-decoration: none;
    font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1;
    opacity: 0; transform: translateY(-6px);
    animation: slExitIn .6s cubic-bezier(.2, .7, .2, 1) .4s forwards;
    transition: background .2s ease, border-color .2s ease;
}
.sl-exit__ic {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(160deg, #c99555, #9a6d39); color: #fff;
    box-shadow: 0 4px 12px rgba(154, 109, 57, .45);
    transition: transform .25s ease;
}
.sl-exit__ic svg { width: 16px; height: 16px; }
.sl-exit:hover { background: rgba(13, 11, 10, .62); border-color: rgba(201, 149, 85, .7); }
.sl-exit:hover .sl-exit__ic { transform: translateX(-3px); }
.sl-exit:focus-visible { outline: 2px solid #c99555; outline-offset: 3px; }
@keyframes slExitIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sl-exit { animation: none; opacity: 1; transform: none; } }
@media (max-width: 620px) { .sl-exit { padding: 5px 15px 5px 5px; gap: 9px; font-size: 14px; } .sl-exit__ic { width: 30px; height: 30px; } }


/* ---------- форма заявки на последнем слайде (05.10.2026) ----------
   Стоит на месте трёх пунктов: те же left/top, та же ширина колонки. Поля 2x2:
   имя и отель, контакт и кнопка. Шрифт полей не меньше 16px, иначе iPhone
   приближает страницу при фокусе. */
.sl-form {
    position: absolute;
    left: calc(86 * var(--u));
    top: calc(560 * var(--u));
    width: calc(757 * var(--u));
    margin: 0;
}
.sl.is-site .sl-form { left: calc(96 * var(--u)); }
.sl-form[hidden] { display: none; }

.sl-form__t {
    margin: 0;
    font-size: calc(23 * var(--u));
    line-height: calc(30 * var(--u));
    font-weight: 700;
    letter-spacing: calc(-0.3 * var(--u));
    color: var(--s-ink);
}
.sl-form__p {
    margin: calc(6 * var(--u)) 0 0;
    font-size: calc(18 * var(--u));
    line-height: calc(25 * var(--u));
    color: var(--s-body);
}
.sl-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sl-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(14 * var(--u));
    margin-top: calc(22 * var(--u));
}
.sl-form__in {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: max(44px, calc(60 * var(--u)));
    margin: 0;
    padding: 0 calc(20 * var(--u));
    border: 1px solid #e6d9ca;
    border-radius: calc(14 * var(--u));
    background: #fff;
    color: var(--s-ink);
    font-size: max(16px, calc(19 * var(--u)));
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 1px 2px rgba(25, 42, 62, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sl-form__in::placeholder { color: #9aa1ad; }
.sl-form__in:focus,
.sl-form__in:focus-visible { outline: none; border-color: var(--s-gold); box-shadow: 0 0 0 3px rgba(184, 120, 41, .16); }
.sl-form__in.is-bad { border-color: #dc2626; }

.sl-form__go {
    box-sizing: border-box;
    height: max(44px, calc(60 * var(--u)));
    margin: 0;
    padding: 0 calc(22 * var(--u));
    border: 0;
    border-radius: calc(14 * var(--u));
    background: var(--s-gold);
    color: #fff;
    font-size: max(15px, calc(19 * var(--u)));
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12 * var(--u));
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.sl-form__go:hover { background: #a2681f; }
.sl-form__go:active { transform: scale(.98); }
.sl-form__go:disabled { opacity: .7; cursor: default; }
.sl-form__go i { transition: transform .2s ease; }
.sl-form__go:hover i { transform: translateX(3px); }

.sl-form__agree {
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    grid-column: 1 / -1;
    margin: 0;
    font-size: max(13px, calc(15 * var(--u)));
    font-weight: 400;
    line-height: 1.4;
    color: var(--s-body);
    cursor: pointer;
}
.sl-form__agree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--s-gold); cursor: pointer; }
.sl-form__agree a { color: var(--s-gold); text-decoration: underline; }
.sl-form__agree.is-bad { color: #dc2626; }
/* В коде галочка стоит ДО кнопки (сканеры согласий ищут её перед отправкой, находка аудита 07.10.2026),
   а на компьютере кнопка остаётся в ряду с полем контакта: меняем только порядок показа. */
.sl-form__go { order: 1; }
.sl-form__agree { order: 2; }
.sl-form__err { margin: calc(10 * var(--u)) 0 0; font-size: max(14px, calc(17 * var(--u))); color: #dc2626; }
.sl-form__err[hidden] { display: none; }

.sl-form--ok { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.sl-form--ok[hidden] { display: none; }
.sl-form__ok-ic {
    flex: none;
    width: calc(64 * var(--u));
    height: calc(64 * var(--u));
    border-radius: 50%;
    background: var(--s-soft);
    color: var(--s-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(26 * var(--u));
}

/* появление - как у пунктов, следом за абзацем */
.sl-slide .sl-form { opacity: 0; transform: translateY(calc(26 * var(--u))); }
.sl-slide.is-on .sl-form {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease .28s, transform .6s cubic-bezier(.22,.8,.3,1) .28s;
}

@media (max-width: 900px) {
    /* столбиком места мало: абзац уступает место форме, поля идут в один ряд друг под другом */
    .sl-slide--form .sl-lead { display: none; }
    .sl-form,
    .sl.is-site .sl-form {
        position: relative;
        z-index: 1;
        left: auto;
        top: auto;
        width: auto;
        margin: 4px 0 0;
    }
    .sl-slide .sl-form { transform: translateY(16px); }
    .sl-slide.is-on .sl-form { transform: none; }
    .sl-form__t { font-size: 16px; line-height: 21px; }
    .sl-form__p { display: none; }
    .sl-form__grid { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
    .sl-form__in { height: 46px; padding: 0 14px; border-radius: 12px; }
    .sl-form__go { height: 48px; border-radius: 12px; font-size: 16px; gap: 10px; }
    /* в один столбец галочка встаёт перед кнопкой: её надо увидеть до того, как нажмёшь */
    .sl-form__agree { font-size: 13px; gap: 8px; order: 1; }
    .sl-form__go { order: 2; }   /* в один столбец - галочка перед кнопкой и на экране */
    .sl-form__err { font-size: 13px; margin-top: 8px; }
    .sl-form--ok { gap: 12px; }
    .sl-form__ok-ic { width: 44px; height: 44px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .sl-slide .sl-form, .sl-slide.is-on .sl-form { transform: none; transition-duration: .01s; }
}