/*
 * Отклик интерфейса: кнопки, карточки, попап.
 *
 * Это не восстановление потерянного, а доработка по решению Никиты от 10.08.
 * В согласованном макете кнопки только приподнимались на два пикселя, попап
 * появлялся мгновенно, карточки на наведение не отвечали вовсе — проверено
 * сравнением с эталоном, там ровно то же самое.
 *
 * ⚠️ Классы вроде `scp3` и `scpe` генерирует рантайм, и на каждой странице они
 * свои: на главной кнопки это `scp3`, на странице услуги — `scp5`. Цепляться
 * за них нельзя. Поэтому элементы помечает скрипт `polish.js` по признакам
 * (тег, размер, наличие фона), а здесь описано только поведение.
 *
 * Блог и шапка сюда не попадают: там отклик уже описан в своей вёрстке,
 * второй слой правил дал бы двойной сдвиг.
 */

/* ------------------------------------------------------------------ кнопки */

.tb-x-btn {
    transition: transform .18s cubic-bezier(.22, .7, .3, 1),
                box-shadow .18s cubic-bezier(.22, .7, .3, 1),
                background-color .18s ease,
                color .18s ease,
                border-color .18s ease;
    will-change: transform;
}

@media (hover: hover) {
    .tb-x-btn:hover {
        transform: translateY(-2px);
    }
}

/* Нажатие: кнопка проседает и почти теряет тень — как настоящая клавиша.
   Держим короче наведения, иначе отклик кажется вязким. */
.tb-x-btn:active {
    transform: translateY(1px) scale(.985);
    transition-duration: .08s;
}

.tb-x-btn:focus-visible {
    outline: 3px solid rgba(19, 113, 107, .45);
    outline-offset: 3px;
}

/* Тень карточек и кнопок в вёрстке тоже инлайновая — при наведении её нужно
   перебивать, иначе подъём происходит без «отрыва» и выглядит плоско. */
@media (hover: hover) {
    .tb-x-btn:hover {
        box-shadow: 0 10px 22px -12px rgba(16, 40, 38, .35) !important;
    }
}

/* ⚠️ Порядок важен: правило главной кнопки идёт ПОСЛЕ общего. Специфичность
   у них одинаковая, и оба с `!important` — значит выигрывает то, что ниже.
   Если поменять местами, серая тень перебьёт коралловое свечение.
   Ей добавляем мягкое свечение: оно притягивает взгляд, но не мигает
   и не отвлекает от чтения. */
/* ⚠️ `!important` здесь вынужденно и осознанно: тень кнопки задана инлайновым
   стилем прямо в вёрстке, а инлайн сильнее любого класса. Без этого свечение
   просто не появлялось — подъём срабатывал, тень оставалась прежней. */
@media (hover: hover) {
    .tb-x-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px -10px rgba(226, 63, 34, .6),
                    0 0 0 6px rgba(226, 63, 34, .12) !important;
    }
}

.tb-x-btn--primary:active {
    box-shadow: 0 6px 14px -8px rgba(226, 63, 34, .5) !important;
}

/* --------------------------------------------------------------- карточки */

.tb-x-card {
    transition: transform .2s cubic-bezier(.22, .7, .3, 1),
                box-shadow .2s cubic-bezier(.22, .7, .3, 1),
                border-color .2s ease;
}

@media (hover: hover) {
    .tb-x-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 46px -24px rgba(16, 40, 38, .30) !important;
        border-color: rgba(19, 113, 107, .45);
    }
}

/* Кликабельная карточка отзывается и на нажатие — иначе на телефоне
   непонятно, засчитано ли касание. */
.tb-x-card--link:active {
    transform: translateY(-1px);
    transition-duration: .08s;
}

/* ------------------------------------------------------------------ попап */

/* ⚠️ Именно `animation`, а не `transition`. Попап открывается переключением
   `display: none` → `flex`, а по такому переходу браузер `transition` не строит:
   элемента в потоке ещё не было. Анимация же запускается при появлении элемента
   сама — и не требует ни строчки JS.

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

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

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

#tbPopup.tbp.is-open {
    animation: tbPopupIn .2s ease both;
}

#tbPopup.tbp.is-open > * {
    animation: tbPopupCardIn .24s cubic-bezier(.22, .7, .3, 1) both;
}

/* ------------------------------------------- уважение к настройкам системы */

/* Если человек попросил систему убрать анимации — не спорим. Наведение
   оставляем цветом и тенью, движение убираем полностью. */
@media (prefers-reduced-motion: reduce) {
    .tb-x-btn,
    .tb-x-card {
        transition-duration: .01ms !important;
        transform: none !important;
    }

    #tbPopup.tbp.is-open,
    #tbPopup.tbp.is-open > * {
        animation-duration: .01ms !important;
        transform: none !important;
    }

    .tb-x-btn:hover,
    .tb-x-card:hover,
    .tb-x-btn:active {
        transform: none !important;
    }
}