/* Живой 3D-барс: спрайт-анимации рендера модели (уроки, карточка питомца, онбординг, тур).
   idle — 36 кадров по кругу; joy / support / pat — по 18 кадров, один раз на реакцию,
   затем барс сам возвращается в idle. Реакции включают классы, которые уже ставит урок. */
.bars-3d {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
}

.bars-3d__clip {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  transform: scale(var(--bars-size, 1));
  transform-origin: 50% 98%;
  pointer-events: none;
}

.bars-3d__clip.is-idle    { background-image: url("../images/mascot/bars-idle.webp?v=2");    background-size: 3600% 100%; }
.bars-3d__clip.is-joy     { background-image: url("../images/mascot/bars-joy.webp?v=2");     background-size: 1800% 100%; visibility: hidden; }
.bars-3d__clip.is-support { background-image: url("../images/mascot/bars-support.webp?v=2"); background-size: 1800% 100%; visibility: hidden; }
.bars-3d__clip.is-pat     { background-image: url("../images/mascot/bars-pat.webp?v=2");     background-size: 1800% 100%; visibility: hidden; }

/* Статичный кадр (<img>) — запасной вариант разметки */
.bars-3d__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--bars-size, 1));
  transform-origin: 50% 96%;
  pointer-events: none;
  user-select: none;
}

@keyframes bars3d-sheet { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes bars3d-show-after { from { visibility: hidden; } to { visibility: visible; } }
@keyframes bars3d-hide-after { from { visibility: visible; } to { visibility: hidden; } }

.bars-3d--live .bars-3d__clip.is-idle {
  animation: bars3d-sheet 3s steps(36, jump-none) infinite;
}

/* Реакция: клип реакции играет 1.5 с, idle прячется на это время и возвращается сам */
:is(.guide-character.react-ok, .guide-character.react-milestone, .guide-character.react-streak,
    .guide-character.react-perfect, .guide-character.react-recovery, .pet-art.celebrate) .bars-3d--live .is-joy,
:is(.guide-character.react-miss, .guide-character.react-support) .bars-3d--live .is-support,
:is(.guide-character.react-pat) .bars-3d--live .is-pat {
  animation: bars3d-sheet 1.5s steps(18, jump-none) 1 both, bars3d-hide-after 1.5s step-end 1 forwards;
  visibility: visible;
}

:is(.guide-character.react-ok, .guide-character.react-milestone, .guide-character.react-streak,
    .guide-character.react-perfect, .guide-character.react-recovery, .pet-art.celebrate,
    .guide-character.react-miss, .guide-character.react-support, .guide-character.react-pat) .bars-3d--live .is-idle {
  animation: bars3d-sheet 3s steps(36, jump-none) infinite, bars3d-show-after 1.5s step-end 1 both;
}

/* Свои движения есть в спрайтах — старые CSS-подпрыгивания обёртки делаем мягче */
.mascot-dialog .guide-character[class*="react-"] { animation-duration: .6s; }

/* Welcome: видео лежит ровно поверх картинки (наследует .access-landscape: позиция, object-fit, кадрирование) */
.access-landscape-video { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .access-landscape-video { display: none !important; }
  .bars-3d__clip { animation: none !important; }
  .bars-3d__clip:not(.is-idle) { visibility: hidden !important; }
  .bars-3d__clip.is-idle { visibility: visible !important; }
}