/* Prop interactions use long, readable sequences so each tool changes the cat's behavior, not just its caption. */
.cat-performer.is-pouncing { animation: cat-prop-pounce 6.2s cubic-bezier(.22, .72, .2, 1) both; }
.cat-performer.is-kneading { animation: cat-prop-knead 6.8s ease-in-out both; }
.cat-performer.is-box-peeking { animation: cat-prop-box 6.4s cubic-bezier(.22, .72, .2, 1) both; }
.cat-performer.is-settling { animation: cat-prop-settle 7.4s ease-in-out both; }
.cat-performer.is-brushing { animation: cat-prop-brush 6.8s ease-in-out both; }
.cat-performer.is-drying { animation: cat-prop-dry 5.8s ease-in-out both; }
.cat-performer.is-snacking { animation: cat-prop-snack 6.2s ease-in-out both; }
.cat-performer.is-trimming { animation: cat-prop-trim 6.4s cubic-bezier(.2, .76, .2, 1) both; }
.cat-performer.is-photo-ready { animation: cat-prop-photo 5.8s ease-in-out both; }
.cat-performer.is-photo-ready::after { animation: cat-photo-frame 5.8s ease-in-out both; }
.cat-performer.is-wand-playing { animation: cat-tool-wand 6.8s cubic-bezier(.22, .72, .2, 1) both; }
.cat-performer.is-laser-chasing { animation: cat-tool-laser 7.4s cubic-bezier(.2, .7, .2, 1) both; }

.cat-performer.is-pouncing[data-action-pose="pounce"] .cat-pounce-cycle-sprite { animation: cat-pounce-cycle-frames 2.05s steps(1, end) 3 both; }
.cat-performer.is-wand-playing[data-action-pose="pounce"] .cat-pounce-cycle-sprite { animation: cat-pounce-cycle-frames 2.2s steps(1, end) 3 both; }
.cat-performer.is-laser-chasing[data-action-pose="pounce"] .cat-pounce-cycle-sprite { animation: cat-pounce-cycle-frames 2.4s steps(1, end) 3 both; }

@keyframes cat-prop-pounce {
  0%, 8% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  15% { transform: translate3d(-6px, 7px, 0) rotate(-1.5deg) scale(1.035, .955); }
  23% { transform: translate3d(calc(var(--impact-x, 34px) * .72), calc(var(--impact-y, 0px) - 22px), 0) rotate(2deg) scale(.98, 1.035); }
  31% { transform: translate3d(var(--impact-x, 34px), calc(var(--impact-y, 0px) + 4px), 0) rotate(1deg) scale(1.045, .95); }
  42% { transform: translate3d(calc(var(--impact-x, 34px) * .42), 2px, 0) rotate(-.5deg) scale(1.01, .99); }
  50% { transform: translate3d(-4px, 6px, 0) rotate(-1deg) scale(1.03, .96); }
  59% { transform: translate3d(calc(var(--impact-x, 34px) * .9), calc(var(--impact-y, 0px) - 17px), 0) rotate(1.8deg) scale(.985, 1.03); }
  68%, 78% { transform: translate3d(var(--impact-x, 34px), calc(var(--impact-y, 0px) + 3px), 0) rotate(.6deg) scale(1.035, .96); }
  90% { transform: translate3d(calc(var(--impact-x, 34px) * .25), 0, 0) rotate(-.2deg) scale(1.005, .995); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-knead {
  0%, 8% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  15% { transform: translate3d(0, 5px, 0) rotate(-.5deg) scale(1.018, .972); }
  23%, 39%, 55% { transform: translate3d(-5px, 7px, 0) rotate(-1deg) scale(1.025, .965); }
  31%, 47%, 63% { transform: translate3d(5px, 7px, 0) rotate(1deg) scale(1.025, .965); }
  72% { transform: translate3d(0, 9px, 0) rotate(0) scale(1.03, .955); }
  84% { transform: translate3d(-2px, 7px, 0) rotate(-.4deg) scale(1.024, .964); }
  94% { transform: translate3d(0, 3px, 0) rotate(0) scale(1.01, .988); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-box {
  0%, 9% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  18% { transform: translate3d(-12px, 4px, 0) rotate(-1.8deg) scale(1.015, .98); }
  28%, 39% { transform: translate3d(-22px, 1px, 0) rotate(-2.5deg) scale(.985, 1.015); }
  50% { transform: translate3d(-10px, 7px, 0) rotate(.8deg) scale(1.025, .965); }
  60%, 70% { transform: translate3d(18px, 0, 0) rotate(2.2deg) scale(.99, 1.01); }
  81% { transform: translate3d(8px, 8px, 0) rotate(.5deg) scale(1.03, .96); }
  92% { transform: translate3d(2px, 3px, 0) rotate(0) scale(1.01, .987); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-settle {
  0%, 10% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  19% { transform: translate3d(-8px, -2px, 0) rotate(-1.4deg) scale(.995, 1.012); }
  29% { transform: translate3d(8px, 0, 0) rotate(1.4deg) scale(.995, 1.008); }
  40% { transform: translate3d(-3px, 5px, 0) rotate(-.6deg) scale(1.02, .975); }
  52% { transform: translate3d(2px, 9px, 0) rotate(.3deg) scale(1.035, .955); }
  64%, 82% { transform: translate3d(0, 11px, 0) rotate(0) scale(1.04, .95); }
  73% { transform: translate3d(0, 12px, 0) rotate(-.2deg) scale(1.042, .947); }
  92% { transform: translate3d(0, 5px, 0) rotate(0) scale(1.018, .98); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-brush {
  0%, 8% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  16% { transform: translate3d(-4px, -3px, 0) rotate(-1deg) scale(1.01, .995); }
  25%, 45%, 65% { transform: translate3d(-9px, -6px, 0) rotate(-2deg) scale(1.022, .985); }
  35%, 55%, 75% { transform: translate3d(8px, -4px, 0) rotate(1.5deg) scale(1.018, .988); }
  84% { transform: translate3d(3px, -8px, 0) rotate(.6deg) scale(1.028, .978); }
  93% { transform: translate3d(0, -3px, 0) rotate(0) scale(1.012, .992); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-dry {
  0%, 9% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  18%, 42%, 66% { transform: translate3d(-7px, 2px, 0) rotate(-1.4deg) scale(1.018, .985); }
  30%, 54%, 78% { transform: translate3d(7px, -2px, 0) rotate(1.4deg) scale(.99, 1.015); }
  89% { transform: translate3d(-2px, 0, 0) rotate(-.3deg) scale(1.005); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-snack {
  0%, 8% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  16% { transform: translate3d(0, 4px, 0) rotate(-.4deg) scale(1.012, .982); }
  25%, 39%, 53% { transform: translate3d(1px, 8px, 0) rotate(.3deg) scale(1.02, .968); }
  32%, 46%, 60% { transform: translate3d(-1px, 5px, 0) rotate(-.25deg) scale(1.012, .98); }
  70% { transform: translate3d(0, 1px, 0) rotate(.8deg) scale(.995, 1.01); }
  79% { transform: translate3d(3px, -2px, 0) rotate(1.2deg) scale(.99, 1.014); }
  89% { transform: translate3d(-2px, -1px, 0) rotate(-.8deg) scale(1.004); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-trim {
  0%, 10% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  20% { transform: translate3d(6px, -2px, 0) rotate(1deg) scale(.995, 1.01); }
  31%, 45%, 59% { transform: translate3d(10px, -5px, 0) rotate(1.5deg) scale(.99, 1.015); }
  36%, 50%, 64% { transform: translate3d(7px, -2px, 0) rotate(.6deg) scale(1.006, .994); }
  74%, 84% { transform: translate3d(4px, -7px, 0) rotate(.8deg) scale(.995, 1.012); }
  93% { transform: translate3d(1px, -2px, 0) rotate(.2deg) scale(1.002); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-prop-photo {
  0%, 10% { transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: brightness(1); }
  22% { transform: translate3d(-3px, -3px, 0) rotate(-1deg) scale(1.012); filter: brightness(1); }
  36%, 67% { transform: translate3d(0, -6px, 0) rotate(.4deg) scale(1.02); filter: brightness(1); }
  48% { transform: translate3d(2px, -6px, 0) rotate(1deg) scale(1.018); filter: brightness(1); }
  70% { transform: translate3d(0, -6px, 0) rotate(.4deg) scale(1.02); filter: brightness(1.35); }
  80% { transform: translate3d(0, -4px, 0) rotate(-.3deg) scale(1.012); filter: brightness(1); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: brightness(1); }
}

@keyframes cat-photo-frame {
  0%, 64%, 76%, 100% { opacity: .22; transform: scale(.98); }
  68%, 72% { opacity: 1; transform: scale(1.02); box-shadow: 0 0 34px rgb(255 239 184 / 92%); }
}

@keyframes cat-tool-wand {
  0%, 8% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  15% { transform: translate3d(-8px, 7px, 0) rotate(-2deg) scale(1.035, .95); }
  23% { transform: translate3d(calc(var(--play-x, 58px) * .7), -24px, 0) rotate(var(--play-turn, -2deg)) scale(.98, 1.035); }
  31% { transform: translate3d(var(--play-x, 58px), 4px, 0) rotate(1deg) scale(1.045, .95); }
  42% { transform: translate3d(calc(var(--play-x, 58px) * .35), 1px, 0) rotate(-.4deg) scale(1.01, .99); }
  50% { transform: translate3d(-6px, 7px, 0) rotate(-1.5deg) scale(1.03, .955); }
  59% { transform: translate3d(calc(var(--play-x, 58px) * .92), -18px, 0) rotate(var(--play-turn, -2deg)) scale(.985, 1.03); }
  68%, 79% { transform: translate3d(var(--play-x, 58px), 5px, 0) rotate(.8deg) scale(1.04, .95); }
  90% { transform: translate3d(calc(var(--play-x, 58px) * .2), 0, 0) rotate(-.2deg) scale(1.005, .995); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes cat-tool-laser {
  0%, 7% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  14% { transform: translate3d(9px, 5px, 0) rotate(1.5deg) scale(1.03, .96); }
  23% { transform: translate3d(calc(var(--play-x, 58px) * -.62), -7px, 0) rotate(-2deg) scale(.99, 1.018); }
  33% { transform: translate3d(calc(var(--play-x, 58px) * -.78), 3px, 0) rotate(-1deg) scale(1.04, .95); }
  43% { transform: translate3d(calc(var(--play-x, 58px) * .2), -17px, 0) rotate(.4deg) scale(.98, 1.03); }
  53% { transform: translate3d(var(--play-x, 58px), 3px, 0) rotate(var(--play-turn, 2deg)) scale(1.045, .95); }
  63% { transform: translate3d(calc(var(--play-x, 58px) * .35), -22px, 0) rotate(-.8deg) scale(.985, 1.028); }
  72%, 80% { transform: translate3d(calc(var(--play-x, 58px) * .5), 5px, 0) rotate(.5deg) scale(1.04, .95); }
  89% { transform: translate3d(calc(var(--play-x, 58px) * .2), 0, 0) rotate(-.2deg) scale(1.006, .994); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}