/* mascot.css — свой персонаж школы вместо Лиса (mascot.js, mascot.go).
   Картинка ступени и кадры поверх неё: кадр показан — картинка под ним
   скрыта (visibility, без перекладки). Размер задаёт место: в игре
   rex-game.css (.rex-art), в углу dino.css (.dr-art). */
.mz-art { position: relative; display: block; }
.mz-body { position: relative; display: block; transform-origin: 50% 100%; }
.mz-pic { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.mz-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.mz-pic, .mz-frame { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.mz-art.is-frame .mz-pic { visibility: hidden; }
.mz-art .mz-frame.is-on { visibility: visible; }

/* По частям (mascot.js, нарезка mascot_rig.go): слой частей на месте
   картинки base — в покое та же поза, картинка под ним скрыта. Кадр
   нарезки — квадрат картинки; места частей и точки поворота ставит скрипт
   (CSSOM), повороты и гашение слоёв касания — Web Animations. Кадр поверх
   (моргание) — только в покое и закрывает части. */
.mz-rig, .mz-rig-g { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.mz-art .mz-rig .mz-part {
  position: absolute; display: block; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.mz-art.is-rig .mz-pic { visibility: hidden; }
.mz-art.is-frame .mz-rig { visibility: hidden; }
/* Говорит в углу — кивает голова (mascot.js), а не качается вся фигура,
   как картинка (dino.css, dr-art-talk). Смеётся (is-laughing вместе с
   is-telling у шутки) — трясётся всей фигурой, как картинка (dr-art-laugh):
   правило его не перебивает (ревью 20.10.2026). */
.dr.has-art.is-telling:not(.is-laughing) .mz-art.is-rig,
.dr.has-art.is-speaking:not(.is-laughing) .mz-art.is-rig { animation: none; }

/* Помощник в углу: дышит и чуть покачивается (в игре дыхание и движения —
   rex-emotions.css). Движение — свойствами scale/rotate внутреннего слоя:
   позы, бег и прыжки угла (dino.css) двигают .dr-art целиком и с ним
   складываются. */
.dr .mz-body { animation: mz-idle 3.8s ease-in-out infinite; }
@keyframes mz-idle {
  0%, 100% { scale: 1 1; rotate: 0deg; }
  30% { rotate: -1.4deg; }
  50% { scale: 1.012 1.03; }
  75% { rotate: 1.1deg; }
}
.dr.is-running .mz-body { animation: none; }

/* Запас под подвалом — на рост персонажа-картинки в углу (dino.css,
   .dr.has-art: 150 px × до 1,25), а не на 64 px Лиса-рисунка: на
   компьютере Лось закрывал последнюю строку подвала кабинета («Сайт клуба»),
   а ниже не прокрутить (проверка сведения 20.10.2026). На телефоне угол
   меньше и подвал не закрыт; в приложении запас у всей страницы (site.css). */
@media (min-width: 641px) {
  html[data-mascot] body.dr-on .site-footer { padding-bottom: calc(var(--s6, 32px) + 190px); }
}

/* Коробка (Лось, data-mascot-egg="box"): на первой ступени в ней сидит сам
   персонаж — дышит и подпрыгивает, как на других ступенях, а не дрожит, как
   яйцо, в которое стучат изнутри (rex-emotions.css). */
html[data-mascot-egg="box"] #rex-pic[data-art="img"][data-mood="egg"] .rex-art {
  transform-origin: 50% 100%;
  animation: rex-breathe var(--rex-breath) ease-in-out infinite;
}
html[data-mascot-egg="box"] #rex-pic[data-art="img"][data-mood="egg"][data-act="hop"] .rex-art {
  animation: rex-breathe var(--rex-breath) ease-in-out infinite, rex-hop .8s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .mz-body { animation: none !important; }
}