/* ══════════════════════════════════════════════════════════════════════════
   motion.css — общий слой движения (2026-08-12)

   Загружается последним и описывает не «эффекты», а три повторяющихся приёма,
   которые до этого каждый экран изобретал заново:

   1. появление списка — короткий подъём с задержкой по элементам;
   2. отклик на нажатие — карточка проседает под пальцем;
   3. блик по металлу — им отличаются подиум лиги и полученные награды.

   Времена и кривые берём из токенов (`--tp-motion-*`, `--tp-ease-*`), новых не
   заводим. Всё, что двигается, стоит внутри `prefers-reduced-motion:
   no-preference`: при «уменьшить движение» остаётся статичный, полностью
   рабочий интерфейс, а не выключенная функция.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

    /* ── 1. Появление ─────────────────────────────────────────────────────── */
    .tp-enter-up {
        animation: tpEnterUp var(--tp-motion-base, 220ms) var(--tp-ease-standard, cubic-bezier(.2, 0, 0, 1)) both;
        animation-delay: var(--tp-enter-delay, 0ms);
    }

    /* ── 2. Отклик на нажатие ─────────────────────────────────────────────── */
    /* Карточки, которые человек трогает пальцем, должны отвечать на касание —
       без этого интерфейс кажется картинкой, а не приложением. Масштаб мелкий:
       заметно телу, незаметно глазу. */
    .tp-home-action,
    .tp-play-mode,
    .tp-tools-link,
    .lb-card,
    .tp-reward-card,
    .profile-pool-card,
    .tp-quality-list li[role="button"] {
        transition: transform var(--tp-motion-fast, 140ms) var(--tp-ease-standard, cubic-bezier(.2, 0, 0, 1)),
                    border-color var(--tp-motion-fast, 140ms) var(--tp-ease-standard, cubic-bezier(.2, 0, 0, 1));
    }
    .tp-home-action:active,
    .tp-play-mode:not(:disabled):active,
    .tp-tools-link:active,
    .lb-card:active,
    .tp-reward-card:active,
    .profile-pool-card:active,
    .tp-quality-list li[role="button"]:active {
        transform: scale(.985);
    }

    /* ── 3. Блик по металлу ───────────────────────────────────────────────── */
    /* Один медленный проход по золоту: подиум лиги и полученная награда живые,
       остальные — нет. Блик рисуется псевдоэлементом поверх, поэтому не трогает
       ни фон, ни содержимое карточки. */
    .lb-card[data-metal="gold"],
    .tp-reward-card.is-unlocked[data-rarity="legendary"] {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .lb-card[data-metal="gold"]::after,
    .tp-reward-card.is-unlocked[data-rarity="legendary"]::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(105deg, transparent 38%,
                    color-mix(in srgb, #ffffff 16%, transparent) 48%, transparent 58%);
        transform: translate3d(-120%, 0, 0);
        animation: tpSheen 5.2s var(--tp-ease-standard, cubic-bezier(.2, 0, 0, 1)) infinite;
        pointer-events: none;
    }

    /* Полосы прогресса растут, а не появляются готовыми. Ширину задаёт JS
       (`growBar`), плавность — здесь. */
    .profile-pool-bar__fill,
    .tp-reward-bar__fill {
        transition: width 520ms var(--tp-ease-standard, cubic-bezier(.2, 0, 0, 1));
    }
}

@keyframes tpEnterUp {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes tpSheen {
    0%, 62%  { transform: translate3d(-120%, 0, 0); }
    82%, 100% { transform: translate3d(120%, 0, 0); }
}

/* Фокус с клавиатуры — одинаковое кольцо во всём продукте. Не движение, но той
   же природы: обратная связь, которой раньше не было на половине экранов. */
:where(button, a[href], [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tp-color-primary, #c9a227) 78%, transparent);
    outline-offset: 2px;
    border-radius: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   Изменение рейтинга на экране итога

   «+12» стояло строкой в таблице деталей — наравне с длительностью и числом
   ходов. Это единственное число, ради которого дочитывают экран; здесь оно
   первое, что видно. Цвет не единственный носитель: знак стоит в самом числе.
   ══════════════════════════════════════════════════════════════════════════ */
.match-rating-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 10px 0 4px;
}
.match-rating-hero[hidden] { display: none; }
.match-rating-hero__delta {
    font-size: 34px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.02em;
}
.match-rating-hero[data-tone="up"] .match-rating-hero__delta { color: #8fd08f; }
.match-rating-hero[data-tone="down"] .match-rating-hero__delta { color: #e09a70; }
.match-rating-hero[data-tone="flat"] .match-rating-hero__delta { color: var(--text-secondary, #b6a894); }
.match-rating-hero__value {
    color: var(--text-secondary, #b6a894);
    font-size: 12px;
}
.match-rating-hero__value strong {
    color: var(--text-primary, #f3ece1);
    font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
    .match-rating-hero:not([hidden]) .match-rating-hero__delta {
        animation: tpRatingPop 420ms var(--tp-ease-emphasized, cubic-bezier(.2, 0, 0, 1.2)) both;
    }
}
@keyframes tpRatingPop {
    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.9); }
    to   { opacity: 1; transform: none; }
}