/* intro — заставка при первом входе.

   Это окно дока (data-panel="intro"): хром окна — рамка, краски,
   тень, затемнение страницы и сама анимация раскрытия и сворачивания
   — принадлежит доку, здесь живёт только содержимое. Цвета и шрифт
   берутся из токенов темы, поэтому в светлых темах заставка остаётся
   читаемой.

   Как идёт: окно появляется сразу развёрнутым — размером только под
   название, буквы выезжают по очереди, затем название чуть уменьшается
   и уезжает вверх, а окно растягивается вниз — из-под названия
   проявляется текст. Момент перехода отмечает класс is-revealed,
   который ставит intro.js; он же шлёт dock:resize, и док пересчитывает
   высоту окна. */

.dock-panel[data-panel="intro"] {
    /* Ширину окна забирает док (main.js: measure), высоту меряет
       по содержимому. Отступы свои: заставке нужно больше воздуха,
       чем спискам настроек.

       Переменные содержимого: --intro-gap — промежуток между частями
       (название к тексту и между абзацами); --intro-rise — насколько
       название поднимается при раскрытии; --intro-descent — пустая
       полоса под рукописным названием, которую вычитаем у первого
       абзаца, чтобы промежутки совпали. */
    --dock-panel-width: 560px;
    --intro-gap: 16px;
    --intro-rise: 26px;
    --intro-descent: 6px;

    padding: 44px 52px 40px;
}

.intro__title {
    display: flex;
    justify-content: center;
    margin: 0;
    font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
    font-size: clamp(2.5rem, 8vw, 5rem);
    /* Интерлиньяж вплотную к кеглю: у такого крупного шрифта любая
       добавка сверху и снизу превращается в десятки пикселей воздуха,
       из-за которых отступ до текста выглядел больше, чем между
       абзацами. Воздух задаём отступом, а не строками. */
    line-height: 1;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.05em;
    /* Название сплошное, светом основного текста. Раньше краска шла
       диагональю по буквам, но второго тона в палитре больше нет —
       от градиента ушли совсем. */
    color: var(--color-ink);
    /* Название уменьшается и уезжает вверх, освобождая место тексту.
       Место в потоке (отрицательный margin) оно занимает сразу, без
       перехода: замер высоты окна в момент раскрытия обязан быть
       окончательным, иначе окно растягивается с запасом и следом
       поджимается, когда запас уйдёт. Видимо название едет анимацией
       ключей (см. intro-rise), которая раскладку не трогает. */
    transition: opacity 0.4s ease;
}

/* Подъём делаем отступом, а не сдвигом: transform уводит название
   визуально, но его место в потоке остаётся — и до текста получался
   лишний промежуток в высоту подъёма. Отрицательный margin это место
   убирает, поэтому отступ до текста равен тому же --intro-gap,
   что и между абзацами. */
.intro.is-revealed .intro__title {
    margin-top: calc(var(--intro-rise) * -1);
    transform: scale(0.82);
    opacity: 0.5;
    animation: intro-rise 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Видимый подъём названия: стартуем с прежнего места — сдвиг вниз на
   высоту подъёма компенсирует мгновенный отрицательный margin — и
   доезжаем до конечного положения. Конечный кадр не описан: им служит
   текущий стиль элемента, поэтому анимация не спорит с раскрытием. */
@keyframes intro-rise {
    from {
        transform: translateY(var(--intro-rise)) scale(1);
        opacity: 1;
    }
}

/* Буквы выезжают снизу по очереди. Задержку ставит intro.js.
   Краска им не нужна: цвет идёт от заголовка целиком, каждая буква
   лишь проявляется. Кривая мягкая: буквы не «щёлкают» на подъёме,
   а плавно замедляются к концу. */
.intro__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: intro-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes intro-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Текст, проявляющийся из-под названия =====

   До раскрытия текста нет в раскладке вовсе (display: none), и док
   меряет окно только под название. С is-revealed текст встаёт в
   поток целиком — ничего не свёрнуто и не обрезано, — и док
   растягивается до новой высоты своим переходом: рост окна и есть
   проявление текста из-под названия, шторой работает край окна.
   Проявление — анимация ключей: с display: none переходы не
   стартовали бы, а ключи идут с первого кадра видимости. Подъёма
   текста нет нарочно: сдвиг попал бы в scrollHeight в момент замера
   высоты, и окно выходило бы выше содержимого или поджималось бы
   после анимации. */
.intro__reveal {
    display: none;
}

.intro.is-revealed .intro__reveal {
    display: block;
    animation: intro-fade 0.45s ease;
}

@keyframes intro-fade {
    from {
        opacity: 0;
    }
}

.intro__text {
    /* Отступ один и тот же и от названия, и между абзацами: значение
       живёт в переменной, чтобы не разъезжалось при правках. */
    margin: 0;
    padding-top: var(--intro-gap);
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    color: var(--color-text-muted);
}

/* Первый абзац — сразу под названием. У рукописного шрифта глубокий
   спуск: под буквами остаётся пустая полоса, и отступ до текста
   выходит на несколько пикселей больше, чем между абзацами.
   Вычитаем её, чтобы промежутки стали одинаковыми. */
.intro__text:first-of-type {
    padding-top: calc(var(--intro-gap) - var(--intro-descent));
}

/* Подсказка по управлению: отдельным абзацем и чуть тише основного
   текста — это не часть рассказа о названии. Отступ тот же, что
   и от названия: ритм внутри окна одинаковый.
   Цвет — тот же приглушённый 53%, что и везде, но с прозрачностью
   78%: подсказка тише не другим оттенком, а плотностью. */
.intro__text--hint {
    font-size: 13.5px;
    color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}

/* Пометки внутри подсказки: Esc и второй способ закрыть. Обе —
   рамкой того же вида, что у дока: обводка разведённым акцентом,
   лёгкое скругление, утопленный фон. Отличаются только шрифтом,
   поэтому читаются как родственные элементы, а не как разные
   приёмы. */
.intro__key,
.intro__accent {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    --fill: var(--color-surface-inset);
    --ring-color: var(--color-border);

    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    color: var(--color-ink);
    line-height: 1.4;
}

/* Клавиша: моноширинный шрифт — так Esc читается как клавиша,
   а не как слово в тексте. */
.intro__key {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.92em;
}

/* Второй способ закрыть: та же рамка, но обычным шрифтом —
   это фраза, а не клавиша. */
.intro__accent {
    font-size: 0.95em;
}

@media (prefers-reduced-motion: reduce) {
    .intro__title {
        transition: none;
    }

    .intro__letter {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .intro.is-revealed .intro__title,
    .intro.is-revealed .intro__reveal {
        animation: none;
    }
}