/**
 * Отклик интерфейса (js/fx.js): волна от нажатия, «в работе» на время
 * запроса, итог на кнопке, появление карточек при входе на вкладку.
 *
 * Ничего здесь не сдвигает вёрстку: всё рисуется поверх кнопки или через
 * transform/opacity, чтобы соседние элементы не дёргались. При системной
 * настройке «меньше движения» анимации гасит общее правило в css/base.css.
 */

/* ── Волна ────────────────────────────────────────────────────────────── */

:is(.btn, .icon-btn, .seg-btn, .dock-toggle, .ticon) { position: relative; overflow: hidden; }
.tab { overflow: hidden; }

.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .12) 45%, transparent 70%);
  transform: scale(0);
  pointer-events: none;
  animation: fx-ripple .55s var(--ease) forwards;
}
.btn-primary .fx-ripple, .seg-btn.active .fx-ripple {
  background: radial-gradient(circle, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, .15) 45%, transparent 70%);
}
@keyframes fx-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ── В работе ─────────────────────────────────────────────────────────── */
/* Блик бежит по кнопке, снизу — бегущая полоска. Текст остаётся на месте и
   читаем: кнопка не меняет ни ширину, ни подпись. */

.fx-busy { cursor: progress; border-color: var(--accent-line) !important; }
.fx-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(199, 155, 255, .22) 50%, transparent 75%);
  background-size: 250% 100%;
  animation: fx-sweep 1s linear infinite;
  pointer-events: none;
}
.fx-busy::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
  animation: fx-slide 1.1s var(--ease) infinite;
  pointer-events: none;
}
@keyframes fx-sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes fx-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ── Итог ─────────────────────────────────────────────────────────────── */

.fx-ok { animation: fx-ok .9s var(--ease); }
@keyframes fx-ok {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7), var(--hairline); border-color: var(--ok); }
  40%  { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0), 0 0 16px rgba(52, 211, 153, .45); border-color: var(--ok); }
  100% { box-shadow: var(--hairline); }
}
.fx-err { animation: fx-err .5s var(--ease); border-color: var(--err) !important; }
@keyframes fx-err {
  0%, 100% { transform: none; }
  20% { transform: translateX(-4px); box-shadow: 0 0 14px rgba(251, 113, 133, .5); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ── Тумблер ──────────────────────────────────────────────────────────── */
/* Ручка тянется в сторону хода, пока кнопка мыши зажата, — как у системных
   переключателей. Ширина растёт на 3 пикселя, сдвиг уменьшается на столько же,
   чтобы ручка не вылезала за дорожку. */

.sw:active i::after { width: 14px; }
.sw:active input:checked + i::after { transform: translateX(10px); }
.sw.sm:active i::after { width: 12px; }
.sw.sm:active input:checked + i::after { transform: translateX(8px); }
.sw i::after { transition: transform .18s var(--ease), width .14s var(--ease), background var(--dur); }

/* ── Появление вкладки ────────────────────────────────────────────────── */
/* Карточки пустого списка (первый заход) выезжают снизу по очереди, см.
   enter() в js/fx.js. Задержка ограничена: в списке на полсотни тайтлов
   последний не должен ждать три секунды. */

.fx-fresh > * { animation: fx-rise .42s var(--ease) backwards; }
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.fx-fresh > :nth-child(2)    { animation-delay: 30ms; }
.fx-fresh > :nth-child(3)    { animation-delay: 60ms; }
.fx-fresh > :nth-child(4)    { animation-delay: 90ms; }
.fx-fresh > :nth-child(5)    { animation-delay: 120ms; }
.fx-fresh > :nth-child(6)    { animation-delay: 150ms; }
.fx-fresh > :nth-child(7)    { animation-delay: 180ms; }
.fx-fresh > :nth-child(n+8)  { animation-delay: 210ms; }

/* Вкладка в рельсе: значок слегка подпрыгивает при выборе. */
.tab.active svg { animation: fx-tab .35s var(--ease); }
@keyframes fx-tab {
  40% { transform: translateY(-2px) scale(1.12); }
}