/* ══════════════════════════════════════════════════════════════════
   Katto's own moves (v0.70) — see katto-moves.js
   The FX layer sits exactly on top of #cat and uses the cat's own pixel
   grid (viewBox -8 -10 50 50), so every prop lines up with the coat.
   ══════════════════════════════════════════════════════════════════ */
#km-fx {
  position: absolute;
  top: var(--cat-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--cat-size);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
#km-fx svg { display: block; width: 100%; height: 100%; overflow: visible; shape-rendering: crispEdges; }
#km-fx .km-hide { display: none; }

/* ── the old visuals are retired: the cat itself stays on screen ── */
body[data-press] #cat,
body[data-scroll] #cat { display: block !important; }
#press-left, #press-right, #scroll-unroll, #heat-steam { display: none !important; }
/* dragging shows the real cat (scruff carry), not the long stretchy one */
body.dragging #stretch-svg-end { display: none !important; }
body.dragging #cat { display: block !important; }
body.dragging #cat {
  transform-origin: 44% 30%;
  transform: translateX(-50%) rotate(var(--km-swing, 0deg));
}
body.dragging #km-fx { transform-origin: 44% 30%; transform: translateX(-50%) rotate(var(--km-swing, 0deg)); }

/* landing on its feet */
body[data-km-land] #cat,
body[data-km-land] #km-fx {
  transform-origin: 50% 92%;
  animation: km-land 420ms cubic-bezier(.3,.7,.3,1) 1;
}
@keyframes km-land {
  0%   { transform: translateX(-50%) translateY(-7%) scale(.98, 1.03); }
  38%  { transform: translateX(-50%) translateY(0) scale(1.09, .86); }
  62%  { transform: translateX(-50%) translateY(-1%) scale(.97, 1.04); }
  100% { transform: translateX(-50%) translateY(0) scale(1, 1); }
}

/* ── zoomies: #cat and its FX travel together, driven by CSS variables ── */
body[data-zoom] #cat,
body[data-zoom] #km-fx {
  transform-origin: 44% 92%;
  transform: translateX(-50%) translate(var(--km-zx, 0px), var(--km-zy, 0px)) rotate(var(--km-zr, 0deg)) scale(calc(var(--km-zs, 1) * var(--km-zf, 1)), var(--km-zs, 1));
  display: block !important;
}
/* in front of the companion on the way back, behind it on the way out */
body[data-zoom] #cat, body[data-zoom] #km-fx { z-index: 4; }
body[data-zoom] #cat2 { z-index: 2; }
body[data-zoom-behind] #cat, body[data-zoom-behind] #km-fx { z-index: 1; }
body[data-zoom] #share-name-badge,
body[data-zoom] #cat-thinking-dots,
body[data-zoom] #purr-hearts,
body[data-zoom] #music-equalizer { visibility: hidden; }

/* ── guided stretch: normal size, no tint; each step picks its pose ── */
body[data-stretching="roll"] #cat,
body[data-stretching="breathe"] #cat { display: block !important; }
/* reach: the standing, arms-wide pose at the cat's own size, feet on the same floor */
body[data-stretching="reach"] #jump-ing {
  display: block !important;
  width: calc(var(--cat-size) * 1.24); /* square box, 62 units tall = the sitting cat's pixel size */
  top: calc(var(--cat-top) - var(--cat-size) * 0.08);
  transform-origin: 50% 80%;
  animation: km-reach-rise 2.7s ease-in-out 1 both;
}
@keyframes km-reach-rise {
  0%   { transform: translateX(calc(-50% - var(--cat-size) * 0.06)) translateY(0) scale(1, 1); }
  45%, 80% { transform: translateX(calc(-50% - var(--cat-size) * 0.06)) translateY(-3%) scale(1, 1.03); }
  100% { transform: translateX(calc(-50% - var(--cat-size) * 0.06)) translateY(0) scale(1, 1); }
}
body[data-stretching="roll"] #stretch-pose-default,
body[data-stretching="breathe"] #stretch-pose-default,
body[data-stretching="reach"] #stretch-pose-default { display: none !important; }
body[data-stretching="bow"] #stretch-pose-default {
  width: calc(var(--cat-size) * 1.44);
  top: calc(var(--cat-top) + var(--cat-size) * 0.04);
}

@media (prefers-reduced-motion: reduce) {
  body[data-km-land] #cat, body[data-km-land] #km-fx { animation: none; }
}