/* Главная qrush.delivery - ролик во весь экран.

   Страница состоит из одного слоя: сцена на всю высоту окна и ролик в ней.
   Текста, шапки и подвала здесь нет - заказчик попросил убрать с первого экрана всё.

   Прежние варианты первого экрана лежат в копиях:
   ~/backups/qrush/glavnaya-20261002-1312.tgz (ролик петлёй и невидимые кнопки),
   ~/backups/qrush/home.css.before-interactive-* (вёрстка по макету 977ebb44). */

:root {
    --hv-bg: #0d0b0a;          /* чем закрыт экран, пока ролика ещё нет */
    --hv-cream: #fdfcf9;
    --hv-gold: #9a6d39;
}

body.home {
    margin: 0;
    background: var(--hv-bg);
    color: var(--hv-cream);
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
    overflow: hidden;          /* страница не прокручивается: экран ровно один */
}

/* ⚠ Общая шапка и подвал приходят из parts/header.php и parts/footer.php - они
   нужны остальным страницам, поэтому НЕ вырезаны из разметки, а спрятаны здесь. */
body.home .header,
body.home .nav-mobile,
body.home footer { display: none; }

body.home main { display: block; }

/* ---- сцена ---- */

.hv {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--hv-bg);
}

/* Ролик на всю сцену. Класс оставлен общим (.hv-v) и со стопкой слоёв: если на
   главную вернут несколько роликов, вёрстку менять не придётся. */
.hv-v {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0;
    z-index: 1;
    transition: opacity .35s ease-in-out;
    pointer-events: none;
}

.hv-v.is-on { opacity: 1; }
.hv-v.is-top { z-index: 2; }

/* ⚠ СТЫК ВСТУПЛЕНИЯ И ПЕТЛИ - ДЛИННЫЙ НАПЛЫВ, почти секунда. Ролики сняты порознь,
   и люди за стойкой в них стоят по-разному: геометрию мы выровняли, а позу нет.
   На коротком переходе это читается как прыжок кадра (заметил заказчик), на
   длинном - как спокойное растворение. */
.hv-v.is-slow { transition: opacity .9s ease-in-out; }

/* ---- заставка на время закачки ---- */

.hv-load {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--hv-bg);
    transition: opacity .45s ease;
}

.hv-load.is-done {
    opacity: 0;
    pointer-events: none;
}

/* ⚠ ЛОГОТИП КАРТИНКОЙ, НЕ ТЕКСТОМ. Ширину держим долей экрана с потолком: на
   широком мониторе он иначе разрастается, на телефоне - теряется.
   ⚠ font-size: 0 ОБЯЗАТЕЛЕН. Пока картинка не пришла, браузер рисует в её коробке
   текст alt - на перезагрузке сначала вспыхивало слово «Rush delivery», потом
   вставал логотип. Атрибут alt при этом остаётся: его читает экранный диктор. */
.hv-load__mark {
    display: block;
    width: min(260px, 46vw);
    height: auto;
    font-size: 0;
    color: transparent;
}

.hv-load__bar {
    width: min(260px, 54vw);
    height: 3px;
    border-radius: 3px;
    background: rgba(253, 252, 249, .18);
    overflow: hidden;
}

.hv-load__bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--hv-gold);
    transition: width .25s ease;
}

.hv-load__pct {
    font-size: 13px;
    letter-spacing: .08em;
    color: rgba(253, 252, 249, .55);
    font-variant-numeric: tabular-nums;
}

/* ---- QR на мониторе ресепшн ---- */

/* ⚠ МЕСТО ЗАДАЁТ СКРИПТ, в координатах КАДРА РОЛИКА. Ролик растянут по
   object-fit: cover и обрезан по краям, поэтому доля экрана у монитора зависит
   от ширины окна. Код стоит по середине монитора по высоте, как на образце. */
.hv-qr {
    position: absolute;
    z-index: 6;
    display: block;
    opacity: 0;
    /* ⚠ ТОЛЬКО ПРОЗРАЧНОСТЬ, БЕЗ НАЕЗДА. Код раньше ещё и подрастал из 0.94 - на
       неподвижном кадре это лишнее движение, и вместе со сменой ролика читалось
       как прыжок картинки. */
    transition: opacity .7s ease;
    pointer-events: none;
    /* ⚠ ПОДЛОЖКА - ЦВЕТА ЛОГОТИПА, а не белая: белая выпирала из кадра. Код при
       этом остаётся обычным (тёмное на светлом) - «вывернутый» читают не все
       сканеры. Скругление, поле и свечение ставит скрипт долями стороны:
       постоянные пиксели на большом мониторе выглядят игрушечно. */
    box-sizing: border-box;
    background: #c6d0db;
}

.hv-qr.is-on {
    opacity: 1;
    pointer-events: auto;
}

.hv-qr span,
.hv-qr canvas,
.hv-qr img {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ---- отметка, что пульт дошёл ---- */

/* ⚠ ВРЕМЕННО. Видео разделов ещё не присланы: пока нажатие на телефоне только
   подсвечивает экран, чтобы было видно, что команда дошла. */
.hv.is-act::after {
    content: attr(data-act);
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    z-index: 7;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(13, 11, 10, .72);
    color: var(--hv-cream);
    font-size: 15px;
    letter-spacing: .04em;
    animation: hvAct 2.4s ease forwards;
}

@keyframes hvAct {
    0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- подсказка «отсканируй телефоном» ---- */

/* ⚠ МЕСТО И РАЗМЕР СТАВИТ СКРИПТ - от коробки кода, долями её стороны. Подсказка
   должна стоять рядом с кодом и ехать вместе с ним, пока камера во вступлении не
   встала, поэтому числом тут ничего не задать. */
.hv-hint {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #fff;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
    /* тень по контуру: подсказка ложится и на светлую форму, и на тёмный монитор */
    filter: drop-shadow(0 2px 10px rgba(30, 22, 14, .55));
}

/* ⚠ ПОДСКАЗКА ПРОПАДАЕТ И ПОЯВЛЯЕТСЯ СНОВА - так просил заказчик. Не «дышит»
   полупрозрачностью, а уходит в ноль и возвращается. Переходы плавные и пауза
   короткая: резкое мигание на первом экране читается как ошибка. */
.hv-hint.is-on { opacity: 1; animation: hvHint 3.6s ease-in-out .6s infinite; }

@keyframes hvHint {
    0%, 55%   { opacity: 1; }
    64%, 78%  { opacity: 0; }
    87%, 100% { opacity: 1; }
}

.hv-hint__draw { display: block; width: 100%; height: auto; }

.hv-hint__txt {
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.18;
    white-space: nowrap;
}

/* Подсказка под кодом - когда справа от него места нет (узкое окно телефона).
   Рисунок для этого случая СВОЙ: стрелка идёт вверх, телефон при этом стоит ровно. */
.hv-hint__draw--up { display: none; }
.hv-hint.is-below .hv-hint__draw--side { display: none; }
.hv-hint.is-below .hv-hint__draw--up { display: block; }
.hv-hint.is-below { gap: 6px; }

/* С компьютера код только для сканирования: без руки-указателя и без нажатия (js/home-video.js) */
.hv-qr.is-scan-only, .hv-qr.is-scan-only.is-on { cursor: default; pointer-events: none; }

/* ---- «Выйти из демо» (05.10.2026, просьба владельца) ----
   Стеклянная пилюля в левом верхнем углу поверх ролика: тёмная подложка с размытием,
   золотой круг со стрелкой. ⚠ Выше заставки загрузки (z 10): уйти можно и пока качается ролик. */
.hv-exit {
    position: fixed; z-index: 20;
    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: var(--hv-cream); text-decoration: none;
    font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1;
    opacity: 0; transform: translateY(-6px);
    animation: hvExitIn .6s cubic-bezier(.2, .7, .2, 1) .4s forwards;
    transition: background .2s ease, border-color .2s ease;
}
.hv-exit__ic {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(160deg, #c99555, var(--hv-gold)); color: #fff;
    box-shadow: 0 4px 12px rgba(154, 109, 57, .45);
    transition: transform .25s ease;
}
.hv-exit__ic svg { width: 16px; height: 16px; }
.hv-exit:hover { background: rgba(13, 11, 10, .62); border-color: rgba(201, 149, 85, .7); }
.hv-exit:hover .hv-exit__ic { transform: translateX(-3px); }
.hv-exit:focus-visible { outline: 2px solid #c99555; outline-offset: 3px; }
@keyframes hvExitIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hv-exit { animation: none; opacity: 1; transform: none; } }
@media (max-width: 620px) { .hv-exit { padding: 5px 15px 5px 5px; gap: 9px; font-size: 14px; } .hv-exit__ic { width: 30px; height: 30px; } }