/* ============================================================
   95 — Чипсы: общий закон поведения
   Один тип элемента — одна механика во всех блоках: капсула
   заливки въезжает слева направо и уезжает обратно тем же путём.
   Различаются только цвета, они заданы переменными на семействе.
   Файл намеренно последний по порядку: правит поведение, но не
   лезет в исходники секций.
   ============================================================ */

.se-chip,
.svc-chip,
.cs-chip,
.qp-chip,
.brf-chip {
  --chip-bleed: 1px;   /* толщина рамки: заливка стыкуется с ней без зазора */
  --chip-in: 300ms;
  --chip-out: 240ms;
  /* кривая как у кнопки-референса: ход капсулы должен читаться, а не
     схлопываться в мгновенную заливку */
  --chip-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: transparent;   /* фон покоя уезжает на ::before, иначе он закроет заливку */
  -webkit-user-select: none;
  user-select: none;
  /* Цвет подписи идёт линейно и ровно столько же, сколько ход капсулы:
     на середине получается промежуточный серый, читаемый и на светлом,
     и на уже залитом куске. Ступенька или задержка дают провал. */
  transition:
    color var(--chip-out) linear,
    border-color var(--chip-out) var(--chip-ease);
}

/* Чипс — подпись, а не контрол: I-образный курсор обещает выделение текста,
   которого здесь нет. Кликабельны только чипсы брифа, у них pointer. */
.se-chip,
.svc-chip,
.cs-chip,
.qp-chip {
  cursor: default;
}

/* Оба слоя лежат ПОД текстом. z-index -1 не убегает за фон карточки,
   потому что ряд чипсов изолирован (правило ниже). */
.se-chip::before,  .se-chip::after,
.svc-chip::before, .svc-chip::after,
.cs-chip::before,  .cs-chip::after,
.qp-chip::before,  .qp-chip::after,
.brf-chip::before, .brf-chip::after {
  content: "";
  position: absolute;
  inset: calc(var(--chip-bleed) * -1);
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.se-chip::before,
.svc-chip::before,
.cs-chip::before,
.qp-chip::before,
.brf-chip::before {
  background: var(--chip-bg, transparent);
}

.se-chip::after,
.svc-chip::after,
.cs-chip::after,
.qp-chip::after,
.brf-chip::after {
  background: var(--chip-fill);
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path var(--chip-out) var(--chip-ease);
}

/* Изолируем и группу, и ряд: слой -1 обязан остаться над фоном карточки.
   Изоляция должна лежать на коробке, которая существует на любом кадре —
   ряд на узких ширинах становится display: contents, коробки у него нет,
   контекст не создаётся, и заливка чипса уезжает под карточку. */
.se-chips,
.svc-chips,
.cs-chips,
.qp-chips,
.qp-chips-row,
.brf-chips {
  isolation: isolate;
}

/* ---------- Цвета по семействам ---------- */

/* Обводка на светлой карточке: E-com и Services */
.se-chip,
.svc-chip {
  --chip-bg: transparent;
  --chip-fill: #171719;
  --chip-fill-text: #EAEAEA;
}

/* Обводка на тёмной карточке: Cases */
.cs-chip {
  --chip-bg: transparent;
  --chip-fill: #EAEAEA;
  --chip-fill-text: #171719;
}

/* Бенто: вариант Б по выбору Alexa — та же капсула, что у пустых чипсов,
   но заливка едет в тёмное. Один закон движения на весь сайт.
   Собственный контекст наложения — только здесь: в бенто между группой чипсов
   и самим чипсом лежит слой с фоном, и заливка покоя (z-index -1) уходила под
   него, оставляя пустую обводку. Другим семействам это правило вредит, им
   хватает изоляции на группе. */
.qp-chip {
  isolation: isolate;
  --chip-bg: #D9D9D9;
  --chip-fill: #171719;
  --chip-fill-text: #D9D9D9;
}

/* Бриф: настоящий переключатель. Ховер показывает будущее состояние,
   у выбранного чипса заливка тем же движением уезжает обратно. */
.brf-chip {
  --chip-bleed: 0px;
  --chip-bg: #F7F7F7;
  --chip-fill: #232325;
  --chip-fill-text: #D9D9D9;
}

/* Выбранный чипс брифа тоже полон: подсветка на месте, не разливание */
.brf-chip.is-on {
  --chip-bg: #232325;
  --chip-fill: #35353A;
  --chip-fill-text: #EAEAEA;
  background: transparent;
  color: #D9D9D9;
}

/* ---------- Полные чипсы: подсветка вместо капсулы ---------- */

.brf-chip.is-on::after {
  content: none;
}

.brf-chip.is-on::before {
  transition: background-color 160ms var(--chip-ease);
}

/* ---------- Ховер ---------- */

@media (hover: hover) and (pointer: fine) {
  .se-chip:hover::after,
  .svc-chip:hover::after,
  .cs-chip:hover::after,
  .qp-chip:hover::after,
  .brf-chip:hover::after {
    clip-path: inset(0 round 999px);
    transition-duration: var(--chip-in);
  }

  .brf-chip.is-on:hover::before {
    background: var(--chip-fill);
  }

  .qp-chip:hover {
    border-color: #EAEAEA;
  }

  .se-chip:hover,
  .svc-chip:hover,
  .cs-chip:hover,
  .qp-chip:hover,
  .brf-chip:hover {
    color: var(--chip-fill-text);
    transition:
      color var(--chip-in) linear,
      border-color var(--chip-in) var(--chip-ease);
  }

  /* У полных чипсов хода нет — подпись меняется вместе с фоном */
  .brf-chip.is-on:hover {
    color: var(--chip-fill-text);
    transition:
      color 160ms var(--chip-ease),
      border-color 160ms var(--chip-ease);
  }
}

/* ---------- Нажатие на тач ----------
   Ховера на пальце нет, а отклик на касание нужен: тот же ход капсулы
   приходит на :active. Медиазапрос зеркален ховерному, поэтому на мыши
   ничего не задваивается, а на планшете и телефоне чипс перестаёт быть
   мёртвым при нажатии. */

@media (hover: none), (pointer: coarse) {
  .se-chip,
  .svc-chip,
  .cs-chip,
  .qp-chip,
  .brf-chip {
    -webkit-tap-highlight-color: transparent;
  }

  .se-chip:active::after,
  .svc-chip:active::after,
  .cs-chip:active::after,
  .qp-chip:active::after,
  .brf-chip:active::after {
    clip-path: inset(0 round 999px);
    transition-duration: var(--chip-in);
  }

  .brf-chip.is-on:active::before {
    background: var(--chip-fill);
  }

  .se-chip:active,
  .svc-chip:active,
  .cs-chip:active,
  .qp-chip:active,
  .brf-chip:active {
    color: var(--chip-fill-text);
    transition:
      color var(--chip-in) linear,
      border-color var(--chip-in) var(--chip-ease);
  }

  /* Бенто: обводка уходит в светлое вместе с заливкой, как и на ховере */
  .qp-chip:active {
    border-color: #EAEAEA;
  }
}

/* Клавиатура: у кнопок брифа заливка приходит и на фокус */
.brf-chip:focus-visible::after {
  clip-path: inset(0 round 999px);
  transition-duration: var(--chip-in);
}

.brf-chip:focus-visible {
  color: var(--chip-fill-text);
}

@media (prefers-reduced-motion: reduce) {
  .se-chip,  .se-chip::after,
  .svc-chip, .svc-chip::after,
  .cs-chip,  .cs-chip::after,
  .qp-chip,  .qp-chip::after,
  .brf-chip, .brf-chip::after {
    transition-duration: 1ms;
  }
}

/* ---------- Бенто: обводка перекрашивается вместе с заливкой ----------
   В покое чипс светлый: тёмная обводка, тёмная подпись. Пока капсула
   заливает его чёрным, обводка и подпись уходят в светлое тем же ходом —
   чипс читается как включённый, а не как выцветший. */
@media (hover: hover) and (pointer: fine) {
  .qp-chip {
    transition:
      color var(--chip-out) linear,
      border-color var(--chip-out) linear;
  }
  .qp-chip:hover {
    border-color: #EAEAEA;
    transition:
      color var(--chip-in) linear,
      border-color var(--chip-in) linear;
  }
}