body { position: relative; }
.cat-stage {
  --cat-fur:var(--ink); --cat-fur-shade:#d0dfe3; --cat-outline:#29435a;
  --cat-stripe:#9bafbe; --cat-accent:var(--orange); --cat-cheek:#ffc4a0;
  --cat-pose-duration:2600ms;
  position:absolute; top:0; left:0; z-index:5; width:104px; height:78px;
  pointer-events:none; will-change:transform; transition:none;
}
.cat-illustration { display:block; width:100%; height:100%; overflow:visible; }
.cat-shadow { fill:#071421; opacity:.25; transform-box:view-box; transform-origin:101px 140px; }
.cat-head,.cat-body,.cat-tail,.cat-eyes,.cat-eye-shine,.cat-ear,.cat-paw-left,.cat-paw-right,.cat-yawn,.cat-tongue,.cat-sleep-marks { transform-box:view-box; }
.cat-head { transform-origin:79px 106px; }
.cat-body { transform-origin:118px 136px; animation:cat-breathe 4.2s ease-in-out infinite; }
.cat-tail { transform-origin:145px 115px; animation:cat-tail-rest 6.8s ease-in-out infinite; }
.cat-ear-left { transform-origin:50px 58px; }
.cat-ear-right { transform-origin:106px 58px; }
.cat-eyes { transform-origin:79px 76px; animation:cat-blink 6.4s ease-in-out infinite; }
.cat-eye-shine { transform-origin:79px 76px; }
.cat-paw-left { transform-origin:96px 122px; }
.cat-paw-right { transform-origin:123px 126px; }
.cat-yawn,.cat-tongue { transform-origin:79px 94px; }
.cat-eyes-closed,.cat-yawn,.cat-tongue,.cat-sleep-marks { opacity:0; }
.cat-eyes-open,.cat-eyes-closed,.cat-smile { transition:opacity .15s; }

/* Idle gestures move individual parts, never the planted feet or the stage. */
.cat-stage[data-pose="curious"] .cat-head { animation:cat-curious var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="curious"] .cat-eye-shine { animation:cat-look-around var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="curious"] .cat-ear-right { animation:cat-ear-twitch var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="wave"] .cat-paw-left { animation:cat-wave var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="wave"] .cat-head { animation:cat-friendly-nod var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="wave"] .cat-tail { animation:cat-tail-greet var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="groom"] .cat-paw-left { animation:cat-wash-paw var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="groom"] .cat-head { animation:cat-groom-head var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="groom"] .cat-tongue { animation:cat-lick var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="groom"] .cat-smile { opacity:0; }
.cat-stage[data-pose="stretch"] .cat-body { animation:cat-stretch-body var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="stretch"] .cat-head { animation:cat-stretch-head var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="stretch"] .cat-yawn { animation:cat-yawn var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="stretch"] .cat-smile { opacity:0; }
.cat-stage[data-pose="stretch"] .cat-tail { animation:cat-tail-stretch var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="doze"] .cat-head { animation:cat-doze var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="doze"] .cat-eyes { animation:none; }
.cat-stage[data-pose="doze"] .cat-eyes-open { opacity:0; }
.cat-stage[data-pose="doze"] .cat-eyes-closed { opacity:1; }
.cat-stage[data-pose="doze"] .cat-sleep-marks { animation:cat-sleep var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="alert"] .cat-ear-left { animation:cat-ear-twitch var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="alert"] .cat-ear-right { animation:cat-ear-listen var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="alert"] .cat-head { animation:cat-attention var(--cat-pose-duration) ease-in-out both; }
.cat-stage[data-pose="alert"] .cat-tail { animation:cat-tail-greet var(--cat-pose-duration) ease-in-out both; }

.cat-stage.cat-stepping .cat-head { animation:cat-flight-head 480ms ease-in-out both; }
.cat-stage.cat-stepping .cat-body { animation:cat-flight-body 480ms ease-in-out both; }
.cat-stage.cat-stepping .cat-tail { animation:cat-flight-tail 480ms ease-in-out both; }
.cat-stage.cat-stepping .cat-paw-left,.cat-stage.cat-stepping .cat-paw-right { animation:cat-tuck-paws 480ms ease-in-out both; }
.cat-stage[data-pose="land"] .cat-head { animation:cat-land-head var(--cat-pose-duration) ease-out both; }
.cat-stage[data-pose="land"] .cat-body { animation:cat-land-body var(--cat-pose-duration) ease-out both; }
.cat-stage[data-pose="land"] .cat-shadow { animation:cat-land-shadow var(--cat-pose-duration) ease-out both; }
.cat-stage.cat-inactive * { animation-play-state:paused!important; transition:none!important; }

@keyframes cat-breathe { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(1.018); } }
@keyframes cat-tail-rest { 0%,100% { transform:rotate(-3deg); } 35% { transform:rotate(5deg); } 70% { transform:rotate(-1deg); } }
@keyframes cat-blink { 0%,37%,41%,74%,80%,100% { transform:scaleY(1); } 39%,76%,78% { transform:scaleY(.08); } }
@keyframes cat-curious { 0%,100% { transform:rotate(0); } 28%,48% { transform:rotate(8deg); } 70% { transform:rotate(-4deg); } }
@keyframes cat-look-around { 0%,100% { transform:translateX(0); } 25%,45% { transform:translateX(2px); } 65%,80% { transform:translateX(-2px); } }
@keyframes cat-ear-twitch { 0%,18%,38%,58%,100% { transform:rotate(0); } 25%,48% { transform:rotate(-7deg); } }
@keyframes cat-ear-listen { 0%,100% { transform:rotate(0); } 25%,40% { transform:rotate(7deg); } 55%,70% { transform:rotate(-3deg); } }
@keyframes cat-wave { 0%,100% { transform:none; } 20%,45%,70% { transform:translate(-7px,-18px) rotate(-22deg); } 32%,57% { transform:translate(-7px,-18px) rotate(6deg); } 82% { transform:translate(-7px,-12px) rotate(-10deg); } }
@keyframes cat-friendly-nod { 0%,100% { transform:none; } 28%,65% { transform:rotate(5deg); } 45% { transform:translateY(2px) rotate(2deg); } }
@keyframes cat-tail-greet { 0%,100% { transform:rotate(-3deg); } 25%,65% { transform:rotate(12deg); } 45%,80% { transform:rotate(1deg); } }
@keyframes cat-wash-paw { 0%,100% { transform:none; } 18%,78% { transform:translate(-9px,-22px) rotate(-30deg); } 35%,60% { transform:translate(-7px,-19px) rotate(-24deg); } }
@keyframes cat-groom-head { 0%,100% { transform:none; } 20%,78% { transform:translate(2px,2px) rotate(-5deg); } 35%,60% { transform:translate(1px,4px) rotate(-3deg); } }
@keyframes cat-lick { 0%,15%,42%,67%,88%,100% { opacity:0; transform:scaleY(.3); } 27%,53%,76% { opacity:1; transform:scaleY(1); } }
@keyframes cat-stretch-body { 0%,100% { transform:none; } 30%,65% { transform:scale(1.055,1.035); } }
@keyframes cat-stretch-head { 0%,100% { transform:none; } 30%,65% { transform:translate(1px,-7px) rotate(-3deg); } }
@keyframes cat-yawn { 0%,15%,90%,100% { opacity:0; transform:scaleY(.3); } 35%,65% { opacity:1; transform:scaleY(1); } }
@keyframes cat-tail-stretch { 0%,100% { transform:rotate(-3deg); } 30%,65% { transform:rotate(14deg); } }
@keyframes cat-doze { 0%,100% { transform:none; } 20%,75% { transform:translateY(4px) rotate(-5deg); } 45% { transform:translateY(2px) rotate(-3deg); } }
@keyframes cat-sleep { 0%,10%,90%,100% { opacity:0; transform:translateY(2px); } 35%,65% { opacity:.8; transform:translateY(-5px); } }
@keyframes cat-attention { 0%,100% { transform:none; } 20%,45% { transform:translateY(-2px) rotate(5deg); } 60%,75% { transform:rotate(-3deg); } }
@keyframes cat-flight-head { 0%,100% { transform:none; } 45% { transform:translateY(-3px) rotate(5deg); } }
@keyframes cat-flight-body { 0%,100% { transform:none; } 45% { transform:scale(.97,1.04); } }
@keyframes cat-flight-tail { 0%,100% { transform:rotate(-3deg); } 45% { transform:rotate(13deg); } }
@keyframes cat-tuck-paws { 0%,100% { transform:none; } 40%,65% { transform:translateY(-4px); } }
@keyframes cat-land-head { 0%,100% { transform:none; } 35% { transform:translateY(3px); } }
@keyframes cat-land-body { 0%,100% { transform:none; } 35% { transform:scale(1.055,.93); } }
@keyframes cat-land-shadow { 0%,100% { transform:scaleX(1); opacity:.25; } 35% { transform:scaleX(1.08); opacity:.32; } }
@media(max-width:768px) { .cat-stage { width:84px; height:63px; } }
@media(prefers-reduced-motion:reduce) {
  .cat-stage,.cat-stage * { animation:none!important; transition:none!important; }
}