/* Интерфейс сенсорного стола ТЕЗИС.

   Экран 55" смотрят с метра-полутора стоя — это не веб-страница. Отсюда
   крупный кегль, крупные цели и две зоны вместо стопки по центру.

   ТИПОГРАФИКА: на экране ровно ДВА размера.
     --t-lead  строка сообщения, она же кегль кнопки
     --t-small мелкий капс сноски и HUD
   Второстепенная строка отличается не размером, а прозрачностью.

   ПАЛИТРА монохромная, от цвета логотипа #232227. Градиент — с первого
   экрана gk-avtor: тёмный верх, светлый низ. Светлый низ не пустует: на нём
   стоит логотип АВТОР в своём исходном тёмном цвете, без перекраски.

   ШРИФТ Inter Tight (SIL OFL), локально — стол работает без интернета. */

@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 100 900; /* вариативный: одно начертание на весь диапазон */
    font-display: swap;
    src: url(../fonts/InterTight-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/InterTight-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
        U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
    --ink: #232227;          /* цвет логотипа АВТОР — база палитры */
    --ink-deep: #141317;     /* тот же тон темнее — верх градиента */
    --haze: #b9c7bc;         /* светлый низ, с первого экрана gk-avtor */
    --white: #ffffff;
    --muted: rgba(255, 255, 255, 0.66);
    --line: rgba(255, 255, 255, 0.42);
    --tezis: #68132d;
    --tezis-deep: #4d0c21;

    /* Две ступени кегля. Больше на этом экране не появляется. */
    --t-lead: clamp(21px, 1.65vw, 32px);
    --t-small: clamp(12px, 0.88vw, 17px);

    --font: 'Inter Tight', Helvetica, Arial, sans-serif;

    /* Одна высота на все кнопки: основную, контурную и цифры клавиатуры. */
    --btn-h: clamp(48px, 5.2vh, 60px);

    /* Одна кривая на все движения — иначе анимации не читаются как система. */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 620ms;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--ink-deep);
    color: var(--white);
    font-family: var(--font);
    font-weight: 300;
    overflow: hidden;
    overscroll-behavior: none;
    /* На столе случайное выделение и лупа — это мусор на экране. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

#video-parent {
    position: absolute;
    inset: 0;
    background: #000;
}

/* Keep the browser cursor visible above the stream. */
#video-parent,
#video-parent * {
    cursor: default !important;
}

#video-parent video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ---------- оверлей: сцена сверху, сноска снизу ---------- */

.overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    background:
        radial-gradient(120% 70% at 50% 32%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 30%, #46524b 64%, var(--haze) 88%, var(--haze) 100%);
    z-index: 20;
    transition: opacity 420ms var(--ease);
}

.overlay[hidden] { display: none; }
.overlay--fading { opacity: 0; pointer-events: none; }

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

.stage {
    display: flex;
    /* Логотип вынесен из #swap, поэтому детей стало двое — строим их
       в колонку, иначе флекс ставит логотип и содержимое рядом. */
    flex-direction: column;
    align-items: center;
    /* НЕ по центру: любое изменение высоты содержимого (появилась клавиатура,
       исчезла строка) перецентровывало бы колонку и двигало логотип. Логотип
       прибит фиксированным отступом сверху, содержимое растёт вниз. */
    justify-content: flex-start;
    padding: clamp(90px, 24vh, 260px) 4vw 0;
    min-height: 0;
}

.stage__swap {
    text-align: center;
    max-width: min(1100px, 88vw);
}

/* Смена состояния: содержимое уходит и приходит одним движением,
   а не моргает подменой текста. */
.stage__swap--out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

/* Каскад: каждый элемент входит своим движением, задержки расставляет
   table.ts шагом в 60 мс — только видимым, иначе скрытые пробивали бы
   дыры в последовательности. */
.stage__swap--in > *,
.stage__swap--in .btn {
    animation: rise var(--dur) var(--ease) both;
}

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

.stage__logo {
    display: block;
    width: clamp(240px, 27vw, 520px);
    height: auto;
    margin: 0 auto clamp(28px, 3.4vh, 52px);
    color: var(--white);
    /* Стоит вне области смены состояний: играет один раз при загрузке
       и остаётся на месте, пока содержимое под ним меняется.
       Само появление — побуквенное, см. ниже. */
}

/* В макете ровно пять контуров, по одному на букву, слева направо
   (проверено по getBBox: x = 0, 381, 731, 1156, 1535). Поэтому буквы
   выходят по очереди тем же шагом 60 мс, что и остальной каскад. */
.stage__logo path {
    animation: glyph 760ms var(--ease) both;
    /* Без fill-box сдвиг считался бы от начала координат всего SVG. */
    transform-box: fill-box;
    transform-origin: center;
}

.stage__logo path:nth-of-type(1) { animation-delay: 0ms; }
.stage__logo path:nth-of-type(2) { animation-delay: 60ms; }
.stage__logo path:nth-of-type(3) { animation-delay: 120ms; }
.stage__logo path:nth-of-type(4) { animation-delay: 180ms; }
.stage__logo path:nth-of-type(5) { animation-delay: 240ms; }

/* Сдвиг в единицах viewBox: 90 из 331 — примерно четверть высоты буквы. */
@keyframes glyph {
    from { opacity: 0; transform: translateY(90px); }
    to   { opacity: 1; transform: none; }
}

/* Оба текстовых блока — ОДИН кегль. Разница только в прозрачности. */

.stage__message {
    margin: 0;
    font-size: var(--t-lead);
    font-weight: 300;
    line-height: 1.35;
    color: var(--white);
}

.stage__message:empty { display: none; }

.stage__detail {
    margin: 10px 0 0;
    font-size: var(--t-lead);
    font-weight: 300;
    line-height: 1.35;
    color: var(--muted);
}

.stage__detail:empty { display: none; }

.stage__actions {
    margin-top: clamp(28px, 3.6vh, 50px);
    /* Сам ряд не анимируется — движение получают кнопки по отдельности. */
    animation: none !important;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- код доступа ---------- */

.pad {
    margin-top: clamp(20px, 2.6vh, 34px);
}

.pad[hidden] { display: none; }

.pad__dots {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-bottom: clamp(18px, 2.4vh, 32px);
}

.pad__dot {
    width: 14px;
    height: 14px;
    border: 1px solid var(--white);
    border-radius: 50%;
    transition: background 200ms var(--ease), transform 200ms var(--ease);
}

.pad__dot--on {
    background: var(--white);
    transform: scale(1.18);
}

.pad__keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 0.9vw, 12px);
    width: min(330px, 52vw);
    margin: 0 auto;
}

.pad__key {
    min-height: var(--btn-h);
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--white);
    font-family: var(--font);
    font-size: var(--t-lead);
    font-weight: 300;
    cursor: pointer;
    transition: transform 160ms var(--ease), background 160ms var(--ease),
                border-color 160ms var(--ease);
}

.pad__key:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--white);
}

.pad__key--erase { border-color: transparent; }

/* Промах кодом: короткая тряска вместо смены экрана. */
.pad--wrong .pad__dots { animation: shake 420ms var(--ease); }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-9px); }
    40%      { transform: translateX(9px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
}

/* ---------- кнопки ---------- */
/* Форма с сайта: острые углы, капслок, разрядка. Размер столовый:
   до 96px в высоту, чтобы попадать пальцем не глядя. */

.btn {
    min-height: var(--btn-h);
    min-width: clamp(200px, 16vw, 260px);
    padding: 0 clamp(22px, 2.2vw, 38px);
    border: 1px solid var(--white);
    border-radius: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--t-lead);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 240ms var(--ease), background 240ms var(--ease),
                border-color 240ms var(--ease), color 240ms var(--ease);
}

.btn:active { transform: scale(0.975); background: rgba(255, 255, 255, 0.84); }
.btn[hidden] { display: none; }
.btn[disabled] { opacity: 0.45; cursor: default; }

.btn--ghost {
    /* Высота та же, что у основной: рядом стоящие кнопки должны различаться
       заливкой, а не размером. */
    min-width: clamp(170px, 13vw, 220px);
    border-color: var(--white);
    background: transparent;
    color: var(--white);
}

.btn--ghost:active { background: rgba(255, 255, 255, 0.14); }

/* ---------- спиннер ---------- */
/* Мягко дышащая дуга: на заставке киоска резкое вращение читается как ошибка. */

.spinner {
    width: clamp(30px, 2.4vw, 42px);
    height: clamp(30px, 2.4vw, 42px);
    margin: 0 auto clamp(22px, 2.6vh, 34px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 1400ms var(--ease) infinite, breathe 2800ms ease-in-out infinite;
}

.spinner[hidden] { display: none; }

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

@keyframes breathe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* ---------- сноска: светлая полоса ---------- */

.endorse {
    padding: 0 4vw clamp(30px, 4.6vh, 64px);
    /* Тёмный логотип в исходном цвете — светлый низ градиента при деле. */
    color: var(--ink);
    animation: fade 1100ms var(--ease) 240ms both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.endorse__logo {
    display: block;
    width: clamp(130px, 12vw, 230px);
    height: auto;
    margin: 0 auto;
}

/* ---------- HUD поверх стрима ---------- */

.hud {
    position: absolute;
    top: clamp(16px, 2vh, 28px);
    right: clamp(16px, 1.6vw, 28px);
    display: flex;
    gap: 0;
    z-index: 30;
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(77, 12, 33, 0.94);
    box-shadow: 0 10px 32px rgba(20, 0, 8, 0.28);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.hud[hidden] { display: none; }

.hud-btn {
    display: grid;
    place-items: center;
    width: clamp(50px, 4.4vw, 58px);
    height: clamp(44px, 4.1vw, 54px);
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform 240ms var(--ease), background 240ms var(--ease),
                border-color 240ms var(--ease);
}

.hud-btn:first-child { border-left: 0; }

.hud-icon {
    width: 38%;
    height: 38%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sound-muted { display: none; }
#btn-sound[data-muted="true"] .sound-wave { display: none; }
#btn-sound[data-muted="true"] .sound-muted { display: initial; }

.hud-btn--stop {
    color: var(--white);
}

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

.hud-btn:active {
    transform: none;
    background: rgba(255, 255, 255, 0.16);
}

/* ---------- выбор качества ---------- */

/* Панель висит под HUD и повторяет его геометрию: та же рамка, тот же фон.
   Отдельного «окна настроек» на столе нет — только этот короткий список. */
.quality {
    position: absolute;
    top: calc(clamp(16px, 2vh, 28px) + clamp(44px, 4.1vw, 54px) + 10px);
    right: clamp(16px, 1.6vw, 28px);
    z-index: 31;
    width: min(280px, 62vw);
    padding: 14px 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(77, 12, 33, 0.96);
    box-shadow: 0 10px 32px rgba(20, 0, 8, 0.28);
    backdrop-filter: blur(8px);
    animation: fade 260ms var(--ease) both;
}

.quality[hidden] { display: none; }

.quality__title {
    margin: 0 18px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}

.quality__list {
    display: flex;
    flex-direction: column;
}

/* Кнопка крупная: за столом по ней попадают пальцем, а не курсором. */
.quality__item {
    display: block;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: var(--white);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 240ms var(--ease);
}

.quality__item:active { background: rgba(255, 255, 255, 0.16); }

.quality__item[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); }

.quality__label {
    display: block;
    font-size: 1rem;
}

/* Галочка у выбранного пункта: на столе она понятнее подписи «включено». */
.quality__item[aria-pressed="true"] .quality__label::after {
    content: ' ✓';
}

.quality__hint {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.62);
}

/* ---------- диагностика ---------- */

.diag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    margin: 0;
    padding: 10px 14px;
    max-width: 46vw;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.76);
    color: rgba(255, 255, 255, 0.75);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    z-index: 40;
    pointer-events: none;
}

.diag[hidden] { display: none; }

/* ---------- доступность ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .spinner { animation: spin 2400ms linear infinite !important; }
}