/* Талисман (js/mascot.js). Цвета — токены --mc-* из tokens.css, поэтому зверёк
   сам меняется вместе с темой. */
.mascot { display: block; flex: none; }
.mc-B { fill: var(--mc-body); }
.mc-D { fill: var(--mc-shade); }
.mc-L { fill: var(--mc-blush); }
.mc-W { fill: var(--mc-eye); }
.mc-K { fill: var(--mc-ink); }
.mc-P { fill: var(--mc-paper); }
.mc-C { fill: var(--mc-line); }

/* Бегущий: ноги в двух кадрах меняются шагом, тело чуть подпрыгивает. Без
   движения (prefers-reduced-motion) виден только первый кадр ног. */
.mascot__legs--b { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .mascot.is-running .mascot__legs--a { animation: mc-step-a 360ms steps(1) infinite; }
  .mascot.is-running .mascot__legs--b { animation: mc-step-b 360ms steps(1) infinite; }
  .mascot.is-running .mascot__body { animation: mc-bob 360ms steps(1) infinite; }
}
@keyframes mc-step-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes mc-step-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
@keyframes mc-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-0.5px); } }

/* Пустые состояния: зверёк стоит над заголовком, слева, как и текст. */
.hw-empty > .mascot,
.cu-empty > .mascot,
.tr-empty > .mascot { margin-bottom: var(--s-2); }

/* Загон (App.mascot.pen): пол — пунктир, зверёк лежит на нём. */
.pen {
  position: relative;
  height: 176px;
  margin-bottom: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
}
.pen::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 9px;
  border-top: 2px dashed var(--border);
  pointer-events: none;
}
.pen__pet {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
.pen__pet:active { cursor: grabbing; }
.pen__pet .mascot { width: 100%; height: 100%; pointer-events: none; }

/* Онбординг на телефоне: стейджа нет, зверёк стоит над заголовком шага. */
.ob-buddy { display: block; margin-bottom: var(--s-3); }
@media (min-width: 960px) { .ob-buddy { display: none; } }

/* Каркас загрузки: бежит на месте в углу шапки. */
.sk-top__pet { margin-left: auto; display: block; }

@media print {
  .mascot, .pen { display: none; }
}