/* ============================================================
   МОТОРИКА ИНТЕРФЕЙСА — ОДНА НА ТРИ СТРАНИЦЫ

   Кривые, длительности и отклик на нажатие. Раньше это жило в
   base.css, а base.css подключают только главная и карта: редактор
   карточек его намеренно не берёт (свои стили, своя раскладка). В
   итоге его кнопки меняли цвет рывком или по случайной кривой
   `.15s ease`, прописанной руками у каждой.

   Отдельным файлом — потому что это единственное общее место на все
   три страницы, где моторика уместна по смыслу.

   ПОДКЛЮЧАТЬ ПЕРВЫМ: здесь объявлены переменные, которыми пользуются
   остальные файлы.
   ============================================================ */

:root {
    /* ---------- кривые ----------

       Встроенные ease и ease-out слишком вялые: их кривая почти прямая,
       и движение читается равномерным, то есть механическим. Хватает
       двух кривых.

       --ease-out — всё, что появляется и исчезает: старт мгновенный,
       остановка мягкая. Это состояние «система услышала и ответила».
       --ease-soft — цвет и фон под курсором: почти линейно, потому что
       на подсветке кривая не читается, а резкость мешает. */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);

    /* ---------- длительности ----------

       Интерфейсу отведено до 300 мс, и чем чаще элемент трогают, тем
       короче его отклик. Полсекунды остаётся только выездам секций —
       их видят один раз. */
    --t-press: 120ms;   /* отклик на нажатие */
    --t-tap:   150ms;   /* цвет под курсором */
    --t-menu:  200ms;   /* меню, выпадашки, детали */
    --t-panel: 260ms;   /* шторки и раскрытия */
    --t-enter: 520ms;   /* выезд секции при прокрутке */
}

/* ПРЫЖКИ ПО ЯКОРЯМ НЕ ЗАЕЗЖАЮТ ПОД ЛИПКУЮ ШАПКУ.

   Шапка на всех трёх страницах липкая, и без этого отступа переход по
   якорю ставил цель верхом в НОЛЬ — верхние пикселей пятьдесят
   оказывались под шапкой. Правило учитывается и при переходе по
   ссылке, и при scrollIntoView, то есть разом для всех прыжков.

   Высоту шапки каждая страница меряет сама и кладёт в --header-h.
   Запасные 56 px — на случай, если скрипт ещё не отработал: лучше
   лишний воздух, чем текст под шапкой. Раньше величина приходила из
   гида (--sticky-h), потому что под шапкой стояла ещё его полоса;
   гида больше нет. */
html { scroll-padding-top: calc(var(--header-h, 56px) + 10px); }

/* Убирает задержку в 300 мс, которую мобильные браузеры держат на
   случай двойного тапа: без неё нажатие отзывается сразу. */
.btn, .btn-ghost, .menu-toggle, .foot-social a, ul.menu a, .mobile-menu a,
.view-btn, .how-btn, .cfg-tool, .cfg-param, .cfg-zoom-reset, .cfg-confirm-btn,
.kit-option-btn, .kit-option-drop, .order-shot, .order-edit,
.card-btn, .size-btn, .shape-btn {
    touch-action: manipulation;
}

@media (prefers-reduced-motion: no-preference) {
    /* ОДИН НАБОР СВОЙСТВ НА ВСЕ КНОПКИ.

       Перечислены именно свойства, а не `all`: `all` цепляет и ширину,
       и положение, и тогда кнопка, меняющая подпись, едет по экрану
       вместо того чтобы просто перекраситься.

       border-color здесь не для красоты: у контурных кнопок при
       наведении меняется и рамка, и без неё фон переезжал плавно, а
       рамка щёлкала. */
    .btn, .btn-ghost, .menu-toggle, .foot-social a,
    .view-btn, .how-btn, .cfg-tool, .cfg-zoom-reset, .cfg-confirm-btn,
    .kit-option-btn, .kit-option-drop, .order-shot, .order-edit,
    .order-skip, .card-btn, .size-btn, .shape-btn {
        transition:
            background-color var(--t-tap) var(--ease-soft),
            border-color var(--t-tap) var(--ease-soft),
            color var(--t-tap) var(--ease-soft),
            box-shadow var(--t-tap) var(--ease-soft),
            opacity var(--t-tap) var(--ease-soft),
            transform var(--t-press) var(--ease-out);
    }

    /* ОТКЛИК ПРИХОДИТ В МОМЕНТ КАСАНИЯ, А НЕ ПО ОТПУСКАНИЮ: палец
       давит — элемент отвечает сразу. */
    .btn:active, .btn-ghost:active, .menu-toggle:active, .foot-social a:active,
    .view-btn:active, .how-btn:active, .cfg-tool:active, .cfg-zoom-reset:active,
    .cfg-confirm-btn:active, .kit-option-btn:active, .kit-option-drop:active,
    .order-shot:active, .order-edit:active,
    .card-btn:active, .size-btn:active, .shape-btn:active {
        transform: scale(.97);
    }

    /* Отдельного правила для откреплённой кнопки здесь больше нет: она
       центрируется отступами, а не transform (editor.html), и общий
       scale ей ничего не ломает. */

    /* Поля ввода: рамка и подсветка тоже не должны щёлкать. */
    input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
    textarea, select {
        transition:
            border-color var(--t-tap) var(--ease-soft),
            background-color var(--t-tap) var(--ease-soft),
            box-shadow var(--t-tap) var(--ease-soft);
    }
}