/* Each piece uses the same square coordinates. The body excludes BOTH moving
   pieces, so the raised paw cannot remain visible beneath the animated arm. */
.scroll-buddy { width:96px; height:108px; right:12px; }
.cat-image {
  position:absolute;
  left:0;
  top:6px;
  width:96px;
  height:96px;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  transition:transform .3s ease-out;
}
.cat-body-image {
  clip-path:polygon(0 0,40% 0,40% 40%,48% 40%,55% 42%,65% 43%,73% 45%,76% 48%,75% 58%,72% 66%,100% 68%,100% 100%,0 100%);
  transform-origin:50% 94%;
  transform:scaleY(1);
  z-index:1;
}
.cat-upper,.cat-arm-rig {
  position:absolute;
  inset:0;
  transition:transform .3s ease-out;
}
.cat-upper {
  z-index:2;
}
.cat-arm-rig { z-index:0; }
.cat-head-image {
  clip-path:polygon(40% 0,100% 0,100% 35%,80% 35%,78% 39%,73% 42%,73% 45%,65% 43%,55% 42%,48% 40%,40% 40%);
  transform-origin:60% 43%;
  transform:translate(var(--head-tuck-x,0px),var(--head-tuck-y,0px)) rotate(var(--head-tilt,0deg));
  z-index:2;
}
.cat-neck {
  position:absolute;
  left:47px;
  top:40px;
  width:22px;
  height:18px;
  border-radius:48% 55% 40% 45%;
  background:linear-gradient(115deg,#ef8b25 15%,#ffae46 55%,#ffe4b5 80%);
  transform:rotate(-8deg);
  transition:transform .3s ease-out;
}
.cat-arm-image {
  /* The wider shoulder overlaps behind the torso throughout the whole strike. */
  clip-path:polygon(82% 35%,100% 35%,100% 68%,72% 68%,65% 66%,64% 57%,70% 51%,76% 48%,82% 43%);
  transform-origin:70% 62%;
  transform:rotate(0deg);
  z-index:1;
}
/* A small crouch about the actual ground contact, without vertical translation.
   Head and shoulder follow the compression once; only the arm repeats. */
.cat-pounce .cat-body-image { transform:scaleY(.97); }
.cat-pounce .cat-upper,.cat-pounce .cat-arm-rig { transform:translateY(1.45px); }
.cat-pounce .cat-neck { transform:translateY(1.45px) rotate(-8deg); }
.cat-pounce .cat-arm-image { animation:cat-arm-reach 1.35s linear infinite; }
@keyframes cat-arm-reach {
  0%,12% { transform:rotate(0deg); animation-timing-function:ease-in; }
  29% { transform:rotate(-15deg); animation-timing-function:cubic-bezier(.15,.8,.25,1); }
  36% { transform:rotate(39deg); }
  42% { transform:rotate(35deg); animation-timing-function:ease-out; }
  70%,100% { transform:rotate(0deg); }
}


.scroll-buddy { position:fixed; top:calc(50% - 42px); pointer-events:none; z-index:25; filter:drop-shadow(0 5px 5px #16203922); }
.buddy-bubble { display:none; }
@media(max-width:650px) { .scroll-buddy { display:none; } }
html[data-motion="paused"] .cat-image,html[data-motion="paused"] .cat-upper,html[data-motion="paused"] .cat-arm-rig,html[data-motion="paused"] .cat-neck { transform:none; }
.cat-leap .cat-arm-image{animation:cat-arm-reach .6s ease-in-out .82s 1}
.display-options{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cat-jump{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 15px;border:1px solid #788777;border-radius:30px;background:#fffef9ed;color:#202929;font:var(--ml-font-min, 1.125rem)/1.4 "DM Sans",Arial,sans-serif;box-shadow:0 2px 9px #2029290d;cursor:pointer;}
.cat-jump:hover:enabled{border-color:#294cce;background:#eef1ff}.cat-jump:disabled{cursor:default;color:#53605f}
@media(prefers-reduced-motion:reduce){html:not([data-motion="on"]) .cat-leap .cat-arm-image{animation:none}}