/* Cheldo - живой маскот-челдабончик. Слоевой риг (layer rig).
   Один спрайт разрезан на слои (assets/pet/rig/), анимация = CSS-трансформы над
   слоями. Тело рисуется раз и при взмахе НЕ трогается -> "вырастать" невозможно.
   Слои и пивоты подготовлены через Claude Design (tools/cheldo-pet/RIG_LAYERS_BRIEF.md).

   Подключение:
     <link rel="stylesheet" href="/assets/pet/cheldo.css">
     <span data-cheldo data-size="200"></span>
     <script src="/assets/pet/cheldo.js" defer></script>

   Порядок слоёв (снизу вверх): body, arm, head(+eyelids+mouth).
   Пивоты (% от холста 604x966): рука 53% 65% (плечо), голова 50% 62% (шея). */

.cheldo {
  position: relative;          /* containing block для слоёв */
  display: inline-block;
  aspect-ratio: 604 / 966;     /* ширина считается из высоты сама (адаптив) */
  line-height: 0;
  vertical-align: bottom;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cheldo[data-greet="none"] { cursor: default; }

/* холст рига: дыхание всей фигуры (origin = ступни) */
.cheldo__rig {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  animation: cheldo-breathe 3.6s ease-in-out infinite;
  will-change: transform;
}
/* каждый слой - full-box <img>, детали уже на своих местах -> идеальное наложение */
.cheldo__l {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  pointer-events: none;
}
.cheldo__body { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); }

/* рука: вращается у плеча. В покое - статичный палец-вверх (без трансформа) */
.cheldo__arm { transform-origin: 53% 65%; }
.cheldo__arm.is-wave { animation: cheldo-wave 0.46s ease-in-out 3; }

/* голова: лёгкое покачивание; кивок - триггером */
.cheldo__head {
  position: absolute; inset: 0;
  transform-origin: 50% 62%;
  animation: cheldo-headbob 4.2s ease-in-out infinite;
}
.cheldo__head.is-nod { animation: cheldo-nod 0.5s ease-in-out 2; }

/* накладки лица скрыты, JS включает opacity для моргания/речи */
.cheldo__eyelids, .cheldo__mouth { opacity: 0; }

/* радость: присед -> прыжок (stretch) -> приземление (squash). Origin = ступни */
.cheldo__rig.is-celebrate { animation: cheldo-celebrate 0.9s ease-in-out; }

@keyframes cheldo-breathe {
  0%, 100% { transform: scaleY(1) scaleX(1) translateY(0); }
  50%      { transform: scaleY(1.013) scaleX(0.994) translateY(-0.5%); }
}
@keyframes cheldo-headbob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-0.8%) rotate(0.9deg); }
}
@keyframes cheldo-wave {
  0%, 100% { transform: rotate(-1deg); }
  25%      { transform: rotate(-16deg); }
  75%      { transform: rotate(7deg); }
}
@keyframes cheldo-nod {
  0%, 100% { transform: rotate(0) translateY(0); }
  45%      { transform: rotate(9deg) translateY(0.6%); }
}
@keyframes cheldo-celebrate {
  0%   { transform: translateY(0) scaleY(1) scaleX(1); }
  18%  { transform: translateY(0) scaleY(0.9) scaleX(1.07); }
  44%  { transform: translateY(-16%) scaleY(1.08) scaleX(0.95); }
  70%  { transform: translateY(0) scaleY(0.93) scaleX(1.05); }
  100% { transform: translateY(0) scaleY(1) scaleX(1); }
}

/* приподнимается при наведении (только устройства с курсором) */
@media (hover: hover) and (pointer: fine) {
  .cheldo:not([data-greet="none"]):hover { transform: translateY(-2.5%); transition: transform 150ms ease-out; }
}

/* уважение к настройке "меньше движения" */
@media (prefers-reduced-motion: reduce) {
  .cheldo__rig, .cheldo__head { animation: none !important; }
  .cheldo__arm.is-wave, .cheldo__head.is-nod, .cheldo__rig.is-celebrate { animation: none !important; }
}