/*
 * Витрина (E-01): стили только этой страницы.
 *
 * Подключается в блоке `head` самого шаблона — на экранах приложения этого
 * файла нет: лишний килобайт на каждом переходе внутри клиента не нужен.
 *
 * Витрина живёт по общей дизайн-системе «Электро-спектр» (Р-107) и по общим
 * токенам, но раскладывается как документ, а не как приложение: полноширинные
 * секции, контейнер 1200 (1360 на широком), крупная типографика.
 *
 * С 2026-08-17 страница работает в обеих темах наравне с приложением
 * (docs/design-themes.md §5.2): прежний замок «витрина светлая всегда» снят —
 * человек с тёмной темой приходил сюда по ссылке из письма и получал вспышку
 * белого.
 *
 * Связано: docs/design.md §4.2, docs/screens.md §1.2
 */

/* ─── Оболочка ───────────────────────────────────────────────────────────────
   Приложение — колонка с внутренней прокруткой, витрине нужно обратное:
   обычный документ, прокручиваемый страницей. Отсюда модификатор `app-wide`,
   который шаблон подставляет в оболочку. */

.app-wide {
    display: block;
    min-height: 100dvh;
    /* Одна широкая строка (бегущая лента) не должна уводить вбок всю страницу.
       Именно `clip`, а не `hidden`: `hidden` сделал бы оболочку контейнером
       прокрутки, и липкая шапка перестала бы липнуть */
    overflow-x: clip;
}

.lp-section, .lp-hero, .lp-final, .lp-marquee { position: relative; }

/* Контейнер витрины */
.lp-row, .lp-hero-grid, .lp-head, .lp-grid, .lp-modules, .lp-steps,
.lp-final > *, .lp-marquee-view, .lp-note-center {
    width: 100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1600px) {
    .lp-row, .lp-hero-grid, .lp-head, .lp-grid, .lp-modules, .lp-steps,
    .lp-final > * { max-width: var(--container-wide); }
}


/* ─── Шапка ──────────────────────────────────────────────────────────────── */

.lp-top {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(2px)) { .lp-top { background: var(--bg); } }

.lp-row {
    display: flex; align-items: center; gap: var(--space-4);
    height: var(--h-topbar);
    padding: 0 var(--page-padding);
}

.lp-brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--text); text-decoration: none;
}
.lp-brand:hover { text-decoration: none; }

.lp-nav { display: none; margin-left: auto; gap: var(--space-1); }
.lp-nav a {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--text-small); font-weight: 700;
    text-decoration: none;
}
.lp-nav a:hover { background: var(--fill); color: var(--text); text-decoration: none; }

@media (min-width: 900px) { .lp-nav { display: flex; } }

.lp-top-side { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
@media (min-width: 900px) { .lp-top-side { margin-left: 0; } }


/* ─── Кнопки витрины ─────────────────────────────────────────────────────── */

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    height: var(--h-button-lg);
    padding: 0 var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-button); font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                background var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
.lp-btn:hover { text-decoration: none; }
.lp-btn:active { transform: translateY(1px); }

.lp-btn-primary {
    background: var(--gradient-brand);
    color: var(--on-violet);
    box-shadow: var(--glow-primary);
}
.lp-btn-primary:hover {
    color: var(--on-violet);
    box-shadow: var(--glow-primary), 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent);
}

.lp-btn-ghost {
    background: transparent; color: var(--text);
    border-color: var(--border-strong);
}
.lp-btn-ghost:hover { background: var(--fill); border-color: var(--text-muted); color: var(--text); }

/* Кнопка на инверсном острове: стекло вместо заливки — рядом стоит главная,
   и вторая заливка спорила бы с ней */
.lp-btn-invert {
    background: color-mix(in srgb, var(--surface) 40%, transparent);
    color: var(--text);
    border-color: var(--border-strong);
    backdrop-filter: blur(8px);
}
.lp-btn-invert:hover { background: var(--surface-raised); color: var(--text); }

.lp-btn-sm { height: var(--h-button); padding: 0 var(--space-4); font-size: var(--text-small); }


/* ─── Секции и заголовки ─────────────────────────────────────────────────── */

.lp-section { padding: var(--space-16) var(--page-padding); }
@media (min-width: 768px) { .lp-section { padding: var(--space-24) var(--page-padding); } }

/* Чередование фона разделяет длинную страницу лучше, чем отступ */
.lp-section-surface { background: var(--bg-subtle); border-block: 1px solid var(--border); }

.lp-head { margin-bottom: var(--space-10); max-width: var(--measure); }

.lp-eyebrow {
    font-size: var(--text-micro); font-weight: 700;
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--space-3);
}

.lp-h1 {
    font-size: var(--text-display); line-height: var(--lh-display);
    font-weight: 800; letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-5);
}
.lp-h2 {
    font-size: var(--text-h2); line-height: var(--lh-h2);
    font-weight: 800; letter-spacing: var(--tracking-heading);
    margin: 0;
}
.lp-h2-sm { font-size: var(--text-h3); }
.lp-h3 {
    font-size: var(--text-h3); line-height: var(--lh-h3);
    font-weight: 700; letter-spacing: var(--tracking-heading);
    margin: 0 0 var(--space-2);
}
.lp-h3-sm { font-size: var(--text-body-lg); }

.lp-lead {
    font-size: var(--text-body-lg); line-height: 1.6;
    color: var(--text-secondary);
    max-width: var(--measure);
    margin: 0 0 var(--space-8);
}
.lp-sub { color: var(--text-secondary); margin-top: var(--space-3); }
.lp-text { color: var(--text-secondary); margin: 0; }
.lp-text-narrow { max-width: 46ch; }
.lp-text-sm { font-size: var(--text-small); }
.lp-note { font-size: var(--text-small); color: var(--text-muted); margin: var(--space-5) 0 0; }
.lp-note-center { text-align: center; margin-top: var(--space-10); }
.lp-label {
    font-size: var(--text-micro); font-weight: 700;
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--text-muted); text-align: center;
    margin: var(--space-4) 0 0;
}


/* ─── Герой ──────────────────────────────────────────────────────────────── */

/* `overflow-x`, а не `overflow`: по вертикали пятна подсветки обязаны выходить
   за край секции и растворяться в следующей. При `overflow: hidden` они
   обрезались ровной линией — на светлой теме это читалось как шов в макете */
.lp-hero { padding: var(--space-12) var(--page-padding) var(--space-16); overflow-x: clip; }
@media (min-width: 768px) { .lp-hero { padding: var(--space-20) var(--page-padding); } }

/* Пятна подсветки вынесены за край холста — текст лежит на чистом фоне
   (docs/design-colors.md §6) */
.lp-wash {
    position: absolute; z-index: 0;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.lp-wash-primary {
    width: 620px; height: 620px; top: -280px; right: -180px;
    background: color-mix(in srgb, var(--violet) 22%, transparent);
}
.lp-wash-accent {
    width: 520px; height: 520px; bottom: -300px; left: -200px;
    background: color-mix(in srgb, var(--cyan) 18%, transparent);
}

.lp-hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-12); }
@media (min-width: 992px) {
    .lp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
}

.lp-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 6px var(--space-4);
    margin: 0 0 var(--space-5);
    background: var(--violet-soft);
    border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
    border-radius: var(--radius-pill);
    font-size: var(--text-micro); font-weight: 700;
    color: var(--violet-text);
}
.lp-spark {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gradient-spark);
}

/* Ключевое слово заголовка — заливкой спектра. Запасной `color` обязателен:
   без `background-clip: text` слово исчезло бы (docs/design.md §2.2) */
.lp-underline {
    color: var(--violet-text);
    background: var(--gradient-spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lp-actions-center { justify-content: center; }


/* ─── Макет телефона ─────────────────────────────────────────────────────── */

.lp-phone-wrap { display: flex; justify-content: center; }

.lp-phone {
    width: min(340px, 100%);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2);
}

/* Высота макета телефона зафиксирована. Раньше он растягивался по мере
   появления реплик, и следующая секция уезжала под экран — на витрине это
   выглядело как прыгающая страница. Теперь экран телефона держит размер, а
   лента внутри прокручивается: старые реплики уходят вверх, как в настоящем
   чате */
.lp-phone-screen {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    height: 460px;
    overflow: hidden;
}

.lp-phone-head { display: flex; align-items: center; gap: var(--space-2); }
.lp-phone-name { margin: 0; font-weight: 800; letter-spacing: var(--tracking-word); }
.lp-phone-status {
    display: flex; align-items: center; gap: var(--space-1);
    margin: 0; font-size: var(--text-micro); color: var(--text-muted);
}
.lp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* Волна из пяти столбиков — тот же знак «слушаю», что в live-режиме */
.lp-wave { display: flex; align-items: flex-end; gap: 3px; margin-left: auto; height: 20px; }
.lp-wave span {
    width: 3px; border-radius: var(--radius-pill);
    background: var(--violet);
    animation: lp-wave 1.1s ease-in-out infinite;
}
.lp-wave span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.lp-wave span:nth-child(2) { height: 16px; animation-delay: .12s; }
.lp-wave span:nth-child(3) { height: 20px; animation-delay: .24s; }
.lp-wave span:nth-child(4) { height: 14px; animation-delay: .36s; }
.lp-wave span:nth-child(5) { height: 9px;  animation-delay: .48s; }
@keyframes lp-wave { 50% { transform: scaleY(.45); } }

/* Реплики прижаты к низу и обрезаются сверху: то, что не помещается, уходит
   под край экрана телефона, а не растягивает его */
.lp-chat {
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: var(--space-2);
    flex: 1; min-height: 0;
    overflow: hidden;
}

.lp-msg {
    max-width: 86%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-small); line-height: 1.45;
    border-radius: var(--radius-md);
}
.lp-msg-user {
    align-self: flex-end;
    background: var(--gradient-brand); color: var(--on-violet);
    border-bottom-right-radius: 6px;
}
.lp-msg-ego {
    align-self: flex-start;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 6px;
}
.lp-msg-card {
    align-self: stretch; max-width: 100%;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}
.lp-card-label {
    margin: 0 0 var(--space-1);
    font-size: var(--text-micro); font-weight: 700;
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--cyan-text);
}
.lp-card-title { margin: 0 0 2px; font-weight: 700; }
.lp-card-text { margin: 0 0 var(--space-2); font-size: var(--text-small); color: var(--text-secondary); }
.lp-card-actions { display: flex; gap: var(--space-2); margin: 0; }
.lp-chip-solid, .lp-chip-soft {
    padding: 4px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-micro); font-weight: 700;
}
.lp-chip-solid { background: var(--violet); color: var(--on-violet); }
.lp-chip-soft { background: var(--fill); color: var(--text-secondary); }

.lp-typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: var(--space-2) var(--space-3); }
.lp-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
    animation: lp-typing 1.2s ease-in-out infinite;
}
.lp-typing span:nth-child(2) { animation-delay: .2s; }
.lp-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes lp-typing { 30% { opacity: 1; transform: translateY(-3px); } 0%, 60%, 100% { opacity: .35; } }

.lp-phone-input {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-small); color: var(--text-muted);
}
.lp-mic { margin-left: auto; color: var(--violet-text); display: inline-flex; }


/* ─── Бегущая строка ─────────────────────────────────────────────────────── */

.lp-marquee { padding: var(--space-10) 0; border-block: 1px solid var(--border); }

.lp-marquee-view {
    overflow: hidden;
    /* Края растворяются в фоне: обрезанная на полуслове фраза читается как баг */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-marquee-track {
    display: flex; gap: var(--space-3);
    width: max-content;
    animation: lp-marquee 38s linear infinite;
}

.lp-phrase {
    padding: var(--space-2) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    color: var(--text-secondary);
    white-space: nowrap;
}
@keyframes lp-marquee { to { transform: translateX(-50%); } }


/* ─── Карточки ───────────────────────────────────────────────────────────── */

.lp-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .lp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
    .lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-wide { grid-column: span 2; }
}

.lp-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: transform var(--motion) var(--ease-out),
                border-color var(--motion) var(--ease-out);
}
.lp-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.lp-card-slim { padding: var(--space-4); gap: var(--space-2); }

/* Единственная карточка с градиентной рамкой на секцию — ключевая мысль
   страницы (docs/design.md §5.2) */
.lp-card-brand {
    border-color: transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--gradient-brand) border-box;
}

.lp-plate {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; flex: none;
    border-radius: var(--radius-md);
    background: var(--violet-soft);
    border: 1px solid color-mix(in srgb, var(--violet) 24%, transparent);
    color: var(--violet-text);
}
.lp-plate-accent {
    background: var(--fuchsia-soft);
    border-color: color-mix(in srgb, var(--fuchsia) 24%, transparent);
    color: var(--fuchsia-text);
}
.lp-plate-success {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 24%, transparent);
    color: var(--success-text);
}
.lp-plate-quiet {
    background: var(--cyan-soft);
    border-color: color-mix(in srgb, var(--cyan) 24%, transparent);
    color: var(--cyan-text);
}
.lp-plate-solid { background: var(--gradient-brand); border-color: transparent; color: var(--on-violet); }

.lp-tag {
    margin: auto 0 0;
    font-size: var(--text-micro); font-weight: 700;
    color: var(--accent-text);
}

.lp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.lp-chip {
    padding: 4px var(--space-3);
    background: var(--fill);
    border-radius: var(--radius-pill);
    font-size: var(--text-micro); font-weight: 700;
    color: var(--text-secondary);
}
.lp-chip-outline { background: transparent; border: 1px solid var(--border-strong); }

/* Столбики-эквалайзер под текстом голосовой карточки */
.lp-equalizer { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: auto; }
.lp-equalizer span {
    flex: 1; max-width: 10px;
    background: var(--gradient-cool);
    border-radius: var(--radius-pill);
    animation: lp-eq 1.6s ease-in-out infinite;
}
.lp-equalizer span:nth-child(odd) { animation-delay: .2s; }
.lp-equalizer span:nth-child(3n) { animation-delay: .4s; }
@keyframes lp-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

.lp-rows { display: grid; gap: var(--space-2); margin-top: auto; }
.lp-row-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--fill);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
}
.lp-when { margin-left: auto; color: var(--text-muted); font-size: var(--text-micro); font-weight: 700; }


/* ─── Модули ─────────────────────────────────────────────────────────────── */

.lp-modules { display: grid; gap: var(--space-4); }
@media (min-width: 992px) { .lp-modules { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

.lp-roadmap { display: grid; gap: var(--space-3); align-content: start; }

.lp-module-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; }

.lp-badge-now, .lp-badge-soon {
    display: inline-flex; align-items: center;
    padding: 3px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-micro); font-weight: 700;
    margin: 0;
}
/* «Уже работает» — лайм: единственное место витрины, где он появляется
   заливкой, и текст на нём чернильный (docs/design-colors.md §3.1) */
.lp-badge-now { align-self: flex-start; background: var(--lime); color: var(--ink); }
.lp-badge-soon { background: var(--fill); color: var(--text-muted); }

.lp-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: auto; }
.lp-stat-value {
    display: block;
    font-size: var(--text-metric); font-weight: 800; line-height: 1;
    letter-spacing: var(--tracking-heading);
    font-variant-numeric: tabular-nums;
    color: var(--violet-text);
}
.lp-stat-label { font-size: var(--text-micro); color: var(--text-muted); }


/* ─── Как начать ─────────────────────────────────────────────────────────── */

.lp-steps { display: grid; gap: var(--space-8); position: relative; }
@media (min-width: 768px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Линия между шагами — только там, где шаги стоят в ряд */
.lp-steps-line { display: none; }
@media (min-width: 768px) {
    .lp-steps-line {
        display: block;
        position: absolute; top: 26px; left: 12%; right: 12%; height: 2px;
        background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--coral));
        opacity: .35;
    }
}

.lp-step { position: relative; }
.lp-step-plate {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--accent-text);
}
.lp-step-num {
    position: absolute; top: -8px; right: -10px;
    padding: 2px 7px;
    background: var(--gradient-brand); color: var(--on-violet);
    border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 800;
}


/* ─── Призыв и подвал ────────────────────────────────────────────────────── */

.lp-final { padding: var(--space-16) var(--page-padding) var(--space-10); }

/* Инверсный остров: в светлой теме он тёмный, в тёмной остаётся тёмным, но
   держится градиентной рамкой — иначе на чёрной странице он бы растворился
   (docs/design-themes.md §6) */
.lp-cta {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) var(--space-6);
    text-align: center;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--gradient-brand) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    color: var(--text);
}

.lp-cta-wash {
    position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.lp-cta-wash-primary {
    width: 420px; height: 420px; top: -200px; right: -120px;
    background: color-mix(in srgb, var(--violet) 45%, transparent);
}
.lp-cta-wash-accent {
    width: 360px; height: 360px; bottom: -220px; left: -100px;
    background: color-mix(in srgb, var(--fuchsia) 35%, transparent);
}

.lp-cta > *:not(.lp-cta-wash) { position: relative; z-index: 1; }
.lp-cta-logo { margin-bottom: var(--space-5); }
.lp-h2-invert { font-size: var(--text-h1); margin-bottom: var(--space-4); }
.lp-cta-accent {
    background: var(--gradient-spark);
    -webkit-background-clip: text; background-clip: text;
    color: var(--lime-text); -webkit-text-fill-color: transparent;
}
.lp-cta-text {
    max-width: 52ch; margin: 0 auto var(--space-8);
    color: var(--text-secondary); font-size: var(--text-body-lg);
}
.lp-cta-note { margin: var(--space-6) 0 0; font-size: var(--text-small); color: var(--text-muted); }

.lp-footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
    padding-top: var(--space-10);
    margin-top: var(--space-10);
    border-top: 1px solid var(--border);
}
.lp-footer-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-left: auto; }
.lp-footer-nav a { color: var(--text-secondary); font-size: var(--text-small); }
.lp-footer-copy {
    width: 100%;
    margin: 0; padding-top: var(--space-4);
    font-size: var(--text-micro); color: var(--text-muted);
}


/* ─── Движение (docs/design.md §8) ────────────────────────────────────────────
   Секции появляются при прокрутке: класс снимает `landing.js`. Без скрипта
   страница видна целиком — начальное состояние задано так, чтобы содержимое
   не пропадало, если скрипт не загрузился. */

/* Начальное состояние ставит сам скрипт, добавляя `.is-hidden`: без него
   страница видна целиком, и поисковик читает живой текст, а не пустой блок */
.lp-reveal { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.lp-reveal.is-hidden { opacity: 0; transform: translateY(16px); }

/* Реплики демонстрации: показываются по одной, как в настоящем чате.
   Анимация висит на `:not(.is-hidden)`, а не на самом `.lp-msg`: элемент
   начинает подходить под селектор в момент снятия класса, и появление
   проигрывается заново на каждом круге */
.lp-msg.is-hidden { display: none; }
.lp-msg:not(.is-hidden) { animation: lp-pop var(--motion) var(--ease-out) both; }
@keyframes lp-pop {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-reveal, .lp-reveal.is-hidden { opacity: 1; transform: none; transition: none; }
    .lp-marquee-track, .lp-wave span, .lp-equalizer span, .lp-typing span,
    .lp-msg { animation: none; }
    .lp-card:hover { transform: none; }
}