/* =========================================================
   MURRLINK — страницы входа и регистрации

   Оформление сделано по референсу: тёмный фиолетовый градиент, стеклянная
   карточка с тонкой светлой рамкой, поля со свечением при вводе, капсульная
   кнопка с градиентом.

   Почему именно эти страницы взяты первыми: здесь нет живого JS, страницы
   целиком серверные, поэтому оформление можно менять без риска что-то сломать.
   Разметку (templates/accounts/login.html, register.html) менять не пришлось —
   все нужные селекторы уже есть в шаблонах.

   Раньше правила этих страниц лежали в inline-блоках <style> внутри шаблонов,
   затем были сведены сюда.
   ========================================================= */
@layer pages {
    * {
        box-sizing: border-box;
    }

    body.login-page,
    body.register-page,
    body.invite-page {
        /* Явно возвращаем поведение прокрутки: в app.css (слой base) есть
           body{overflow:hidden} для каркаса приложения, и в слое pages это
           правило не перебивается — слой выигрывает только там, где он
           реально задаёт свойство. */
        overflow: visible;
        font-family: var(--font-ui);
        margin: 0;
        color: var(--text-normal);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 24px 0;

        /* ★ Узор-фон приложения здесь НЕ грузится.
           В app.css (слой base) у `body` стоит
             background-image: два radial-gradient + var(--bg-pattern);
             background-size: auto, auto, contain;
             background-attachment: fixed, fixed, fixed;
           где `--bg-pattern` — растр `bg-honeycomb.webp` весом 496 158 Б
           (3840x2160, в декодированном виде ~33 МБ). На этих трёх страницах
           узор полностью закрыт видео-фоном (`.auth-bg-video`,
           `position: fixed; inset: 0; object-fit: cover; z-index: 0`), то есть
           скачивался и держался в памяти ради кадров загрузки видео.
           Подложка на время загрузки остаётся — это `background-color:
           var(--bg-app)` в правиле ниже, ровно тот же цвет, что и у самого
           узора (`--bg-pattern-base`), поэтому экран не мигает.
           Слой `pages` объявлен ПОСЛЕ `base` (tokens.css:10) и потому
           перебивает его — проверено живьём, а не по рассуждению:
           `@layer pages { body.login-page { background-image: none } }` даёт
           вычисленное `background-image: none` (в слое `base` то же правило
           проигрывает: там остаётся узор). */
        background-image: none;
        background-color: var(--bg-app);
    }

    /* Видео-фон страницы: отдельный слой на весь экран, зациклено. */
    .auth-bg-video {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        /* cover: заполняет экран целиком, лишнее обрезается — пропорции при
           этом сохраняются, картинка не растягивается. */
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
        /* На светлой теме видео не показывается (--auth-video: none): тёмный
           неоновый ролик под светлой подложкой давал мутную серую пелену. */
        display: var(--auth-video);
    }

    /* Затемнение поверх видео: без него светлые кадры мешают читать карточку.
       Градиент, а не ровный слой — так края темнее, а центр живее. */
    .auth-bg-overlay {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: var(--auth-overlay);
    }

    /* Бегущий блик больше не нужен: фон — видео, оно движется само.
       Ключевые кадры удалены, чтобы не оставалось мёртвых правил. */

    /* Если человек просил уменьшить движение — видео-фон не показываем:
       движущаяся картинка на весь экран мешает именно таким людям. Остаётся
       тёмная подложка (`background-color` в правиле выше), карточка читается.
       ★ Видео не просто скрыто: `display: none` снимает и автозапуск, и
       загрузку ролика — на этой странице остаётся статичный кадр (постер) и
       ничего не движется.
       ★ Общий выключатель движения для всего интерфейса (переходы шторок,
       тостов, меню и появление окон) теперь есть в `app.css` — правило в слое
       `base` с `!important`, потому что для `!important` порядок слоёв обратный
       и `base` объявлен раньше всех остальных. Здесь остаётся только то, что
       специфично для страниц входа. */
    @media (prefers-reduced-motion: reduce) {
        .auth-bg-video {
            display: none;
        }
    }

    /* У регистрации форма длиннее — был padding: 20px 0. */
    body.register-page {
        padding: 20px 0;
    }

    /* --- Карточка: стекло ---
       Приём взят из референсов: полупрозрачный фон, едва заметная светлая
       рамка, подсветка по верхнему краю. Это и даёт «дорогой» вид вместо
       плоского прямоугольника.

       ★ `backdrop-filter` убран. Под карточкой играет ЗАЦИКЛЕННОЕ видео
       (`.auth-bg-video`), поэтому подложка размытия менялась каждый кадр, и
       размытие пересчитывалось всё время, пока открыта страница входа — тот же
       класс дефекта, что убранная пульсация индикатора речи.
       Совместимость с замыслом проверена ЧИСЛОМ, а не на глаз: снимки карточки
       (420x408, вход 1440) с размытием и без него, снятые на одном и том же
       кадре ролика (3.0 с), различаются на 0.61 из 255 в среднем, максимум 22,
       заметно отличаются 0.95 % пикселей, а размах яркости текста совпал до
       десятых (145.0 в обоих). Причина: фон карточки и так плотный
       (0.72 → 0.88), поэтому размытие почти не видно, а платится за него
       каждый кадр видео. Стеклянный вид держат сама полупрозрачность,
       `--inset-highlight` в тени и светящаяся грань, а не размытие. */
    .card.auth-card {
        position: relative;
        /* Выше видео и затемнения: видео — слой 0, затемнение — 1, карточка — 2. */
        z-index: 2;
        padding: 36px 32px 32px;
        border-radius: var(--radius-xl);
        background: var(--auth-card-bg);
        border: 1px solid var(--auth-card-border);
        box-shadow: var(--auth-card-shadow);
        width: 100%;
    }

    /* Тонкая светящаяся полоса сверху карточки. */
    .card.auth-card::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent, var(--accent), var(--accent-2), transparent);
        opacity: 0.9;
    }

    body.login-page .auth-card {
        max-width: 420px;
    }

    body.register-page .auth-card {
        max-width: 460px;
    }

    /* --- Страница приглашения по ссылке (/join/<код>/) ---
       Вид тот же, что у входа и регистрации, поэтому заданы только части,
       которых там нет: карточка сервера и кнопка-ссылка. Ни одного
       литерального цвета — только токены (DESIGN.md). */
    body.invite-page .invite-card {
        max-width: 440px;
        text-align: center;
    }

    .invite-server-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px auto 18px;
        /* Квадрат 72x72 — тот же размер, что у картинки из _avatar.html,
           поэтому иконка сервера и кот по умолчанию встают на одно место. */
        width: 72px;
        height: 72px;
    }

    .invite-server-icon {
        width: 72px;
        height: 72px;
        border-radius: var(--radius-round);
        object-fit: cover;
        display: block;
    }

    /* Инициал — запасной вариант, если не отдалась сама картинка. */
    .invite-server-initial {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: var(--radius-round);
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 28px;
        font-weight: 700;
    }

    .invite-lead {
        margin: 0 0 6px;
        font-size: 13px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .invite-server-name {
        margin: 0;
        font-size: 22px;
        color: var(--text-primary);
        /* Длинное название сервера не должно ломать карточку. */
        overflow-wrap: anywhere;
    }

    /* Кнопка-ссылка «Войти и присоединиться»: вид тот же, что у кнопки
       отправки формы (.auth-card button), поэтому повторяем её оформление,
       а не заводим третий стиль кнопки в проекте. Цвета — только токенами:
       у формы стоит литерал тени, и он уже в списке долга
       (tools/colors_baseline.json), второй такой же здесь не нужен. */
    .invite-primary-btn {
        display: block;
        width: 100%;
        margin-top: 24px;
        padding: 13px;
        background: var(--btn-primary-bg);
        color: var(--btn-primary-fg);
        border: 1px solid var(--btn-primary-border);
        border-radius: var(--radius-pill);
        font-size: 15px;
        font-weight: 600;
        font-family: var(--font-ui);
        letter-spacing: 0.02em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: var(--inset-highlight), var(--glow-accent);
        /* ★ Без перехода по `box-shadow`: у ховера три размытые тени
           (`--neon-glow`, `--glow-accent-lg`, `--inset-glow`), и переход
           перерисовывал их все 0.15 с. Ореол появляется мгновенно — тот же
           приём, что у `.speaker-dot`, `.voice-tile` и `.vcb-btn` в app.css. */
        transition: background var(--transition-base);
    }

    .invite-primary-btn:hover {
        background: var(--btn-primary-bg-hover);
        border-color: var(--btn-primary-bg-hover);
        color: var(--btn-primary-fg);
        box-shadow: var(--neon-glow), var(--glow-accent-lg), var(--inset-glow);
    }

    .invite-primary-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring), var(--glow-accent);
    }

    /* Подсказка про ручной ввод кода: текст, а не цвет — цвет берёт .errors. */
    .invite-errors {
        text-align: left;
    }

    .auth-card h1 {
        margin: 0 0 8px;
        color: var(--text-primary);
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.02em;
    }

    .auth-card .sub {
        color: var(--text-muted);
        font-size: 14px;
        text-align: center;
        margin: 0 0 28px;
    }

    /* --- Поля --- */
    .auth-card label {
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .auth-card input {
        width: 100%;
        padding: 11px 14px;
        background: var(--auth-input-bg);
        color: var(--text-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: 14px;
        font-family: var(--font-ui);
        margin-bottom: 18px;
        outline: none;
        transition: border-color var(--transition-base),
                    box-shadow var(--transition-base);
    }

    .auth-card input::placeholder {
        color: var(--text-faint);
    }

    /* Свечение при вводе: главный приём из референса формы входа. */
    .auth-card input:focus {
        border-color: var(--accent);
        box-shadow: var(--glow-accent);
    }

    /* --- Кнопка: капсула с градиентом --- */
    .auth-card button {
        width: 100%;
        padding: 13px;
        background: var(--btn-primary-bg);
        color: var(--btn-primary-fg);
        /* Видимая грань: кнопка входа — элемент, а не надпись на карточке. */
        border: 1px solid var(--btn-primary-border);
        border-radius: var(--radius-pill);
        font-size: 15px;
        font-weight: 600;
        font-family: var(--font-ui);
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: var(--auth-btn-shadow);
        /* ★ Без перехода по `box-shadow` (у ховера три размытые тени):
           ореол появляется мгновенно. Фон и сдвиг нажатия остаются плавными. */
        transition: background var(--transition-base),
                    transform var(--transition-fast);
    }

    /* У регистрации кнопка чуть отступает от подсказки. */
    body.register-page .auth-card button {
        margin-top: 4px;
    }

    .auth-card button:hover {
        background: var(--btn-primary-bg-hover);
        border-color: var(--btn-primary-bg-hover);
        color: var(--btn-primary-fg);
        box-shadow: var(--neon-glow), var(--glow-accent-lg), var(--inset-glow);
    }

    .auth-card button:disabled {
        background: var(--btn-disabled-bg);
        color: var(--btn-disabled-fg);
        border-color: var(--btn-disabled-border);
        cursor: not-allowed;
    }

    .auth-card button:active {
        transform: translateY(1px);
    }

    .auth-card button:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring), var(--glow-accent);
    }

    /* --- Ошибки --- */
    .auth-card .errors {
        background: var(--bg-danger-soft);
        border: 1px solid var(--danger);
        color: var(--text-primary);
        padding: 12px 16px;
        border-radius: var(--radius-md);
        font-size: 14px;
        margin-bottom: 20px;
    }

    .auth-card .errors ul {
        margin: 0;
        padding-left: 18px;
    }

    .auth-card .errors li {
        margin: 2px 0;
    }

    /* --- Подписи и ссылки --- */
    .auth-card .foot {
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: var(--text-dim);
    }

    .auth-card .foot a {
        color: var(--link);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: color var(--transition-base),
                    border-color var(--transition-base);
    }

    .auth-card .foot a:hover {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

    .auth-card .hint {
        font-size: 12px;
        color: var(--text-dim);
        margin-top: -12px;
        margin-bottom: 16px;
    }
}