/* ==========================================================================
   Подборки авто — цифры обновляются по наведению на карточку.
   Только анимация и наведение: разметка, id, хуки и формы не трогаются.
   Цветовых литералов в правилах нет — всё через переменные ниже.
   ========================================================================== */

.section-comps {
    /* тень карточки подборки под курсором — карточка при этом не двигается */
    --comps-card-hover-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
    /* цвет подсветки цифры в момент пересчёта (берётся из палитры темы) */
    --comps-tick-color: var(--primary-color, currentColor);
    /* цвет кольца, которое расходится от иконки при пересчёте */
    --comps-pulse-color: currentColor;
    /* длительность «прокрутки» цифр */
    --comps-tween-duration: 0.52s;
}

/* --- карточка подборки ---------------------------------------------------- */

/* Карточка под курсором не смещается: меняются только тень и подложка,
   геометрия остаётся прежней. */
.section-comps .comp-item {
    transition:
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .section-comps .comp-item:hover {
        box-shadow: var(--comps-card-hover-shadow);
    }
}

/* --- цифры внизу блока ---------------------------------------------------- */

/* Моноширинные цифры: пока счётчик крутится, ширина числа не пляшет
   и строка не дёргается на каждом кадре. */
.comps-info__item-value span {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    transition:
        transform var(--comps-tween-duration) ease,
        color var(--comps-tween-duration) ease;
}

.comps-info__item-value span.is-ticking {
    transform: scale(1.12);
    color: var(--comps-tick-color);
}

/* пока ответ сервера не пришёл — цифры слегка гаснут */
.comps-info.is-loading .comps-info__item-value {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

/* --- иконка: кольцо расходится в момент пересчёта -------------------------- */

.comps-info__item-icon {
    position: relative;
}

.comps-info__item-icon.is-pulsing::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--comps-pulse-color);
    pointer-events: none;
    animation: comps-pulse 0.6s ease-out forwards;
}

@keyframes comps-pulse {
    from {
        opacity: 0.6;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.45);
    }
}

/* --- кнопка «Показать N авто» --------------------------------------------- */

/* Кнопка — правая колонка грид-раскладки .comps-info, поэтому её ширина
   тянет за собой все плашки слева. Ширину фиксирует скрипт (min-width по
   самой длинной подписи), здесь остаётся только выравнивание по центру.
   Анимации у кнопки нет намеренно: любое затухание читается как моргание,
   когда курсор идёт по карточкам, — меняется только подпись. */
.comps-info__button .btn {
    justify-content: center;
    text-align: center;
}

/* --- уважаем системную настройку «меньше движения» ------------------------- */

@media (prefers-reduced-motion: reduce) {
    .section-comps .comp-item,
    .comps-info__item-value span,
    .comps-info__button .btn {
        transition: none;
    }

    .comps-info__item-value span.is-ticking {
        transform: none;
    }

    .comps-info__item-icon.is-pulsing::after {
        animation: none;
    }
}