mocode-pet-app 1.4.0 → 1.7.0

package/assets/pets/09-robo-penguin.motion.css

@@ -0,0 +1,94 @@
+/* 机械企鹅(robo-penguin)专属演出:体现"企鹅"的摇摆与笨拙,所有动作以"左右晃"为核心。
+ * #pet-arm-left/right 是扁平鳍翼,这里当作鳍状手臂处理;pet-mouth 是橙色喙。 */
+
+/* ── thinking:鳍翼小幅度拍打 + 身体轻摇 ── */
+@keyframes penguin-think-flipper-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-10deg); }
+}
+@keyframes penguin-think-flipper-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(10deg); }
+}
+.pet-thinking #pet-arm-left {
+  animation: penguin-think-flipper-left 0.9s ease-in-out infinite;
+  transform-origin: 42px 170px;
+}
+.pet-thinking #pet-arm-right {
+  animation: penguin-think-flipper-right 0.9s ease-in-out infinite 0.45s;
+  transform-origin: 214px 170px;
+}
+
+/* ── idle:站着轻微左右晃 ── */
+@keyframes penguin-idle-wobble {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(3deg); }
+}
+.pet-idle #pet-body-group {
+  animation: penguin-idle-wobble 2.2s ease-in-out infinite;
+  transform-origin: 128px 230px;
+}
+
+/* ── tool_call:企鹅招牌的左右摇摆(代替双臂摆动) + 鳍翼配合 ── */
+@keyframes penguin-tool-waddle {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-7deg); }
+  75% { transform: rotate(7deg); }
+}
+@keyframes penguin-tool-flipper-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-18deg); }
+}
+@keyframes penguin-tool-flipper-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(18deg); }
+}
+.pet-tool #pet-body-group {
+  animation: penguin-tool-waddle 0.55s ease-in-out infinite;
+  transform-origin: 128px 230px;
+}
+.pet-tool #pet-arm-left {
+  animation: penguin-tool-flipper-left 0.55s ease-in-out infinite;
+  transform-origin: 42px 170px;
+}
+.pet-tool #pet-arm-right {
+  animation: penguin-tool-flipper-right 0.55s ease-in-out infinite 0.27s;
+  transform-origin: 214px 170px;
+}
+
+/* ── mood-urging:急促的鳍翼拍打 + 嘴部(喙)开合催促 ── */
+@keyframes penguin-urging-flipper-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-22deg); }
+}
+@keyframes penguin-urging-flipper-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(22deg); }
+}
+@keyframes penguin-urging-beak {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.5); }
+}
+.mood-urging #pet-arm-left {
+  animation: penguin-urging-flipper-left 0.18s ease-in-out infinite;
+  transform-origin: 42px 170px;
+}
+.mood-urging #pet-arm-right {
+  animation: penguin-urging-flipper-right 0.18s ease-in-out infinite 0.09s;
+  transform-origin: 214px 170px;
+}
+.mood-urging #pet-mouth {
+  animation: penguin-urging-beak 0.18s ease-in-out infinite;
+  transform-origin: 128px 156px;
+}
+
+/* ── done:小滑步式的弹跳 ── */
+@keyframes penguin-done-slide {
+  0% { transform: translateX(0) scale(1); }
+  40% { transform: translateX(0) scale(1.08); }
+  100% { transform: translateX(0) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: penguin-done-slide 0.45s ease-out 1;
+  transform-origin: 128px 230px;
+}

package/assets/pets/09-robo-penguin.svg

@@ -36,11 +36,11 @@
   </g>
 
   <!-- Beak -->
-  <path d="M116 156 L128 172 L140 156 Z" fill="#ffb74d"/>
+  <path id="pet-mouth" d="M116 156 L128 172 L140 156 Z" fill="#ffb74d"/>
 
   <!-- Flipper arms(填充块面而非线条,贴身收成圆润小翼) -->
-  <path d="M42 146 Q16 162 22 190 Q26 204 42 202 Q50 200 46 188 Q40 168 46 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
-  <path d="M214 146 Q240 162 234 190 Q230 204 214 202 Q206 200 210 188 Q216 168 210 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
+  <path id="pet-arm-left" d="M42 146 Q16 162 22 190 Q26 204 42 202 Q50 200 46 188 Q40 168 46 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
+  <path id="pet-arm-right" d="M214 146 Q240 162 234 190 Q230 204 214 202 Q206 200 210 188 Q216 168 210 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
 
   <!-- Feet -->
   <ellipse cx="104" cy="234" rx="16" ry="8" fill="#ffb74d"/>

package/assets/pets/10-robo-dino.motion.css

@@ -0,0 +1,91 @@
+/* 机械龙(robo-dino)专属演出:体现"小龙"的凶猛与小只的暴躁,动作短促、节奏快、幅度大。
+ * #pet-arm-left/right 是两只小短手,只能用 rotate 模拟拍打;
+ * 嘴部 (#pet-mouth) 是锯齿状,适合用 scaleY 模拟咬合。 */
+
+/* ── thinking:上下颌咬合(嘴部张合,模拟正在思考时"哼"的表情) ── */
+@keyframes dino-think-jaw {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.7); }
+}
+.pet-thinking #pet-mouth {
+  animation: dino-think-jaw 0.5s ease-in-out infinite;
+  transform-origin: 128px 148px;
+}
+
+/* ── idle:小幅度来回甩头(像小恐龙好动) ── */
+@keyframes dino-idle-shake {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-3deg); }
+  75% { transform: rotate(3deg); }
+}
+.pet-idle #pet-body-group {
+  animation: dino-idle-shake 1.8s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── tool_call:小短手快速拍打 + 嘴部跟随咬合 ── */
+@keyframes dino-tool-arm-left {
+  0%, 100% { transform: rotate(-34deg); }
+  50% { transform: rotate(-65deg); }
+}
+@keyframes dino-tool-arm-right {
+  0%, 100% { transform: rotate(34deg); }
+  50% { transform: rotate(65deg); }
+}
+@keyframes dino-tool-jaw {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.4); }
+}
+.pet-tool #pet-arm-left {
+  animation: dino-tool-arm-left 0.25s ease-in-out infinite;
+  transform-origin: 31px 142px;
+}
+.pet-tool #pet-arm-right {
+  animation: dino-tool-arm-right 0.25s ease-in-out infinite 0.12s;
+  transform-origin: 223px 142px;
+}
+.pet-tool #pet-mouth {
+  animation: dino-tool-jaw 0.25s ease-in-out infinite;
+  transform-origin: 128px 148px;
+}
+
+/* ── mood-frustrated:暴躁甩头(替换通用 0.15s 平移抖动为更"角色化"的旋转甩头) ── */
+@keyframes dino-frustrated-slam {
+  0%, 100% { transform: rotate(0deg) translateX(0); }
+  20% { transform: rotate(-6deg) translateX(-4px); }
+  60% { transform: rotate(6deg) translateX(4px); }
+}
+.mood-frustrated #pet-body-group {
+  animation: dino-frustrated-slam 0.18s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── mood-urging:急躁跺脚 ── */
+@keyframes dino-urging-stomp {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(0) rotate(-5deg); }
+}
+@keyframes dino-urging-jaw {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.8); }
+}
+.mood-urging #pet-body-group {
+  animation: dino-urging-stomp 0.35s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+.mood-urging #pet-mouth {
+  animation: dino-urging-jaw 0.35s ease-in-out infinite;
+  transform-origin: 128px 148px;
+}
+
+/* ── done:跺脚庆祝 ── */
+@keyframes dino-done-stomp {
+  0% { transform: translateY(0) scale(1); }
+  30% { transform: translateY(0) scaleY(0.88) scaleX(1.1); }
+  60% { transform: translateY(-10px) scale(1.08); }
+  100% { transform: translateY(0) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: dino-done-stomp 0.5s ease-out 1;
+  transform-origin: 128px 220px;
+}

package/assets/pets/10-robo-dino.svg

@@ -39,12 +39,12 @@
   </g>
 
   <!-- Jagged mouth -->
-  <path d="M108 148 L118 156 L128 148 L138 156 L148 148" stroke="#69f0ae" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+  <path id="pet-mouth" d="M108 148 L118 156 L128 148 L138 156 L148 148" stroke="#69f0ae" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
 
   <!-- Small arms(填充块面而非线条,末端一颗圆球小手) -->
-  <ellipse cx="31" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(-34 31 142)"/>
+  <ellipse id="pet-arm-left" cx="31" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(-34 31 142)"/>
   <circle cx="25" cy="156" r="5" fill="url(#accentGrad)"/>
-  <ellipse cx="223" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(34 223 142)"/>
+  <ellipse id="pet-arm-right" cx="223" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(34 223 142)"/>
   <circle cx="231" cy="156" r="5" fill="url(#accentGrad)"/>
 
   <!-- Legs / feet -->

package/assets/pets/11-slime-blob.motion.css

@@ -0,0 +1,44 @@
+/* 史莱姆(slime-blob)专属演出:利用"形变"这个史莱姆独有的视觉语言覆盖通用规则。
+ * 史莱姆没有 arm-left/right/tail 等 id,通用规则里依赖这些 id 的动画(如 tool_call 摆臂、
+ * flustered 摆臂)对它本来就不生效,这里改用挤压/压扁形变来填补对应状态的演出。 */
+
+/* ── mood-tired:身体压扁变矮,模拟疲惫瘫软,替代通用的"下沉" ── */
+@keyframes slime-tired-squash {
+  0%, 100% { transform: scaleY(1) scaleX(1); }
+  50% { transform: scaleY(0.82) scaleX(1.08); }
+}
+.mood-tired #pet-body-group {
+  animation: slime-tired-squash 3.6s ease-in-out infinite;
+  transform-origin: 128px 200px;
+}
+
+/* ── tool_call:挤压弹跳形变代替通用双臂摆动 ── */
+@keyframes slime-tool-bounce {
+  0%, 100% { transform: scaleY(1) scaleX(1); }
+  30% { transform: scaleY(0.85) scaleX(1.12); }
+  60% { transform: scaleY(1.12) scaleX(0.9); }
+}
+.pet-tool #pet-body-group {
+  animation: slime-tool-bounce 0.5s ease-in-out infinite;
+  transform-origin: 128px 200px;
+}
+
+/* ── idle:呼吸感的轻微鼓起收缩,比通用的上下浮动更软糯 ── */
+@keyframes slime-idle-breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.03); }
+}
+.pet-idle #pet-body-group {
+  animation: slime-idle-breathe 2.8s ease-in-out infinite;
+  transform-origin: 128px 138px;
+}
+
+/* ── mood-urging:急促地一颤一颤,像在催你快点 ── */
+@keyframes slime-urging-jiggle {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(0.92); }
+}
+.mood-urging #pet-body-group {
+  animation: slime-urging-jiggle 0.45s ease-in-out infinite;
+  transform-origin: 128px 200px;
+}

package/assets/pets/11-slime-blob.svg

@@ -8,7 +8,7 @@
       <feGaussianBlur stdDeviation="3" result="blur"/>
       <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
-  </defs>
+  </defs>
   <g id="pet-body-group">
 
   <!-- Blob body -->
@@ -31,7 +31,7 @@
   </g>
 
   <!-- Smile -->
-  <path d="M110 156 Q128 170 146 156" stroke="#0a1420" stroke-width="3.5" fill="none" stroke-linecap="round"/>
+  <path id="pet-mouth" d="M110 156 Q128 170 146 156" stroke="#0a1420" stroke-width="3.5" fill="none" stroke-linecap="round"/>
 
   <!-- Drips -->
   <path d="M84 216 Q84 232 92 232 Q100 232 96 216 Z" fill="url(#blobGrad)"/>
@@ -39,5 +39,5 @@
 
   <!-- Highlight -->
   <ellipse cx="92" cy="86" rx="18" ry="10" fill="#ffffff" fill-opacity="0.25"/>
-  </g>
+  </g>
 </svg>

package/assets/pets/12-ghost-byte.motion.css

@@ -0,0 +1,73 @@
+/* 字节幽灵(ghost-byte)专属演出:体现"幽灵"的飘忽与半透明质感,所有动作都是"飘"或"闪"。
+ * SVG 自带的 ghost body 内联 animateTransform(translateY 0/-8/0) 在我们用 CSS 接管时会被覆盖,
+ * 因此 .pet-idle 必须保留一个同款飘浮动画,否则该状态会失去律动;
+ * #pet-arm-* 不存在,tool_call 用整体半透明闪烁代替双臂摆动。 */
+
+/* ── idle:保留原 SVG 飘浮风格的垂直浮动(替换内置动画) ── */
+@keyframes ghost-idle-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.pet-idle #pet-body-group {
+  animation: ghost-idle-float 2.4s ease-in-out infinite;
+}
+
+/* ── thinking:垂直 + 水平小幅漂移,像在"搜魂" ── */
+@keyframes ghost-think-drift {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(-3px, -4px); }
+  50% { transform: translate(0, -8px); }
+  75% { transform: translate(3px, -4px); }
+}
+.pet-thinking #pet-body-group {
+  animation: ghost-think-drift 2.8s ease-in-out infinite;
+}
+
+/* ── tool_call:身体快速半透明闪烁 + 轻微抖动(代替双臂) ── */
+@keyframes ghost-tool-flicker {
+  0%, 100% { transform: translateX(0); opacity: 1; }
+  20% { transform: translateX(-3px); opacity: 0.5; }
+  40% { transform: translateX(3px); opacity: 1; }
+  60% { transform: translateX(-2px); opacity: 0.6; }
+  80% { transform: translateX(2px); opacity: 1; }
+}
+.pet-tool #pet-body-group {
+  animation: ghost-tool-flicker 0.6s ease-in-out infinite;
+}
+
+/* ── mood-urging:浮得更高 + 嘴部快速张合(惊吓催促) ── */
+@keyframes ghost-urging-rise {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-14px); }
+}
+@keyframes ghost-urging-mouth {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.8); }
+}
+.mood-urging #pet-body-group {
+  animation: ghost-urging-rise 0.5s ease-in-out infinite;
+}
+.mood-urging #pet-mouth {
+  animation: ghost-urging-mouth 0.4s ease-in-out infinite;
+  transform-origin: 128px 142px;
+}
+
+/* ── mood-tired:沉下去 + 透明度下降,像电量耗尽的幽灵 ── */
+@keyframes ghost-tired-sink {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(6px); opacity: 0.55; }
+}
+.mood-tired #pet-body-group {
+  animation: ghost-tired-sink 4.4s ease-in-out infinite;
+}
+
+/* ── done:突然显形 + 弹回 ── */
+@keyframes ghost-done-pop {
+  0% { transform: scale(0.85); opacity: 0.6; }
+  40% { transform: scale(1.12); opacity: 1; }
+  100% { transform: scale(1); opacity: 0.92; }
+}
+.pet-done #pet-body-group {
+  animation: ghost-done-pop 0.45s ease-out 1;
+  transform-origin: 128px 130px;
+}

package/assets/pets/12-ghost-byte.svg

@@ -8,7 +8,7 @@
       <feGaussianBlur stdDeviation="3" result="blur"/>
       <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
-  </defs>
+  </defs>
   <g id="pet-body-group">
 
   <!-- Floating shadow -->
@@ -36,6 +36,6 @@
   </g>
 
   <!-- Mouth -->
-  <ellipse cx="128" cy="142" rx="10" ry="8" fill="#0a1420" fill-opacity="0.85"/>
-  </g>
+  <ellipse id="pet-mouth" cx="128" cy="142" rx="10" ry="8" fill="#0a1420" fill-opacity="0.85"/>
+  </g>
 </svg>

package/assets/pets/13-cactus-bot.motion.css

@@ -0,0 +1,90 @@
+/* 仙人掌兽(cactus-bot)专属演出:体现"仙人掌"的呆萌与刺感,动作偏迟钝、带轻微摇摆。
+ * #pet-arm-left/right 是两片刺臂,旋转角度小一些避免"刺"飞出去;tool_call 复用刺臂摆动。 */
+
+/* ── thinking:整个身体轻微左右晃,像顶着烈日有点晃神 ── */
+@keyframes cactus-think-sway {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-2deg); }
+  75% { transform: rotate(2deg); }
+}
+.pet-thinking #pet-body-group {
+  animation: cactus-think-sway 1.4s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+
+/* ── idle:非常慢的上下浮动(像在晒太阳) ── */
+@keyframes cactus-idle-bob {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+.pet-idle #pet-body-group {
+  animation: cactus-idle-bob 3.6s ease-in-out infinite;
+}
+
+/* ── tool_call:刺臂小幅拍打(代替通用双臂摆动) ── */
+@keyframes cactus-tool-arm-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-15deg); }
+}
+@keyframes cactus-tool-arm-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(15deg); }
+}
+.pet-tool #pet-arm-left {
+  animation: cactus-tool-arm-left 0.55s ease-in-out infinite;
+  transform-origin: 60px 130px;
+}
+.pet-tool #pet-arm-right {
+  animation: cactus-tool-arm-right 0.55s ease-in-out infinite 0.27s;
+  transform-origin: 196px 130px;
+}
+
+/* ── mood-urging:身体急促左右摇摆(像不耐烦地甩刺) ── */
+@keyframes cactus-urging-wiggle {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-4deg); }
+  75% { transform: rotate(4deg); }
+}
+.mood-urging #pet-body-group {
+  animation: cactus-urging-wiggle 0.35s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+
+/* ── mood-tired:慢慢瘪下去 + 变暗 ── */
+@keyframes cactus-tired-droop {
+  0%, 100% { transform: translateY(0) scaleY(1); opacity: 1; }
+  50% { transform: translateY(4px) scaleY(0.94); opacity: 0.85; }
+}
+.mood-tired #pet-body-group {
+  animation: cactus-tired-droop 4s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+
+/* ── done:小弹一下 + 刺臂举起 ── */
+@keyframes cactus-done-pop {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.06); }
+  100% { transform: scale(1); }
+}
+@keyframes cactus-done-arm-left {
+  0% { transform: rotate(0deg); }
+  40% { transform: rotate(-25deg); }
+  100% { transform: rotate(0deg); }
+}
+@keyframes cactus-done-arm-right {
+  0% { transform: rotate(0deg); }
+  40% { transform: rotate(25deg); }
+  100% { transform: rotate(0deg); }
+}
+.pet-done #pet-body-group {
+  animation: cactus-done-pop 0.4s ease-out 1;
+  transform-origin: 128px 220px;
+}
+.pet-done #pet-arm-left {
+  animation: cactus-done-arm-left 0.4s ease-out 1;
+  transform-origin: 60px 130px;
+}
+.pet-done #pet-arm-right {
+  animation: cactus-done-arm-right 0.4s ease-out 1;
+  transform-origin: 196px 130px;
+}

package/assets/pets/13-cactus-bot.svg

@@ -26,8 +26,8 @@
   <rect x="48" y="150" width="160" height="70" rx="40" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
 
   <!-- Spike arms(填充块面而非线条,细刺仍保留为短线装饰) -->
-  <path d="M62 108 Q26 112 24 142 Q22 156 38 158 Q50 158 48 144 Q44 122 62 118 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
-  <path d="M194 108 Q230 112 232 142 Q234 156 218 158 Q206 158 208 144 Q212 122 194 118 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <path id="pet-arm-left" d="M62 108 Q26 112 24 142 Q22 156 38 158 Q50 158 48 144 Q44 122 62 118 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <path id="pet-arm-right" d="M194 108 Q230 112 232 142 Q234 156 218 158 Q206 158 208 144 Q212 122 194 118 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
   <path d="M34 118 L24 108 M34 128 L22 124 M222 118 L232 108 M222 128 L234 124"
         stroke="url(#accentGrad)" stroke-width="3" stroke-linecap="round"/>
 

package/assets/pets/14-crystal-bot.motion.css

@@ -0,0 +1,63 @@
+/* 水晶精灵(crystal-bot)专属演出:体现"水晶"的折射与旋转,所有动作都是几何化的旋转/缩放。
+ * SVG 自带 translateY 浮动动画,这里 .pet-idle 用等效浮动覆盖内置,其他状态彻底接管;
+ * 没有 #pet-arm-*,tool_call 改用快速旋转代替双臂摆动。 */
+
+/* ── idle:保留并替换 SVG 内置浮动为更稳定的"原地悬停" ── */
+@keyframes crystal-idle-hover {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+.pet-idle #pet-body-group {
+  animation: crystal-idle-hover 3s ease-in-out infinite;
+}
+
+/* ── thinking:缓慢连续旋转(整颗水晶),模拟展示内部折射 ── */
+@keyframes crystal-think-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.pet-thinking #pet-body-group {
+  animation: crystal-think-spin 4s linear infinite;
+  transform-origin: 128px 128px;
+}
+
+/* ── tool_call:急促左右摇摆(代替双臂摆动),像光在晶体里来回折射 ── */
+@keyframes crystal-tool-sway {
+  0%, 100% { transform: rotate(-6deg); }
+  50% { transform: rotate(6deg); }
+}
+.pet-tool #pet-body-group {
+  animation: crystal-tool-sway 0.4s ease-in-out infinite;
+  transform-origin: 128px 128px;
+}
+
+/* ── mood-urging:急促脉冲式缩放(像能量过载) ── */
+@keyframes crystal-urging-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+.mood-urging #pet-body-group {
+  animation: crystal-urging-pulse 0.3s ease-in-out infinite;
+  transform-origin: 128px 128px;
+}
+
+/* ── mood-tired:慢慢缩小变暗,像水晶能量耗尽 ── */
+@keyframes crystal-tired-dim {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(0.92); opacity: 0.75; }
+}
+.mood-tired #pet-body-group {
+  animation: crystal-tired-dim 4.6s ease-in-out infinite;
+  transform-origin: 128px 128px;
+}
+
+/* ── done:快速自转一圈 + 回到原位 ── */
+@keyframes crystal-done-twirl {
+  0% { transform: rotate(0deg) scale(1); }
+  50% { transform: rotate(180deg) scale(1.12); }
+  100% { transform: rotate(360deg) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: crystal-done-twirl 0.55s ease-out 1;
+  transform-origin: 128px 128px;
+}

package/assets/pets/15-satellite-bot.motion.css

@@ -0,0 +1,72 @@
+/* 卫星兽(satellite-bot)专属演出:体现"卫星"的机械感与扫描感,动作以旋转/信号脉冲为主。
+ * #pet-antenna 是顶部的碟形天线(在通用 style.css 里被当成"指示灯"做透明度闪烁,这里改用旋转);
+ * 两侧的"翅膀"是矩形太阳能板(无 id),通过 #pet-body-group 整体扫描带动视觉。 */
+
+/* ── idle:缓慢小幅旋转,模拟在轨道上微微漂移 ── */
+@keyframes satellite-idle-drift {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-2deg); }
+  75% { transform: rotate(2deg); }
+}
+.pet-idle #pet-body-group {
+  animation: satellite-idle-drift 3.4s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+
+/* ── thinking:碟形天线慢速旋转(扫描天空),身体微微摆动 ── */
+@keyframes satellite-think-dish {
+  0% { transform: rotate(-15deg); }
+  100% { transform: rotate(15deg); }
+}
+@keyframes satellite-think-body {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-2deg); }
+}
+.pet-thinking #pet-antenna {
+  animation: satellite-think-dish 1.6s ease-in-out infinite alternate;
+  transform-origin: 128px 30px;
+}
+.pet-thinking #pet-body-group {
+  animation: satellite-think-body 1.6s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+
+/* ── tool_call:碟形天线快速来回扫,代替通用双臂摆动 ── */
+@keyframes satellite-tool-dish {
+  0%, 100% { transform: rotate(-20deg); }
+  50% { transform: rotate(20deg); }
+}
+.pet-tool #pet-antenna {
+  animation: satellite-tool-dish 0.4s ease-in-out infinite;
+  transform-origin: 128px 30px;
+}
+
+/* ── mood-urging:信号脉冲(天线透明度快速闪烁代替通用 0.5s 旋转闪烁) ── */
+@keyframes satellite-urging-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+.mood-urging #pet-antenna {
+  animation: satellite-urging-pulse 0.25s ease-in-out infinite;
+}
+
+/* ── mood-bored:身体非常慢的左右扫,模拟扫描不到东西 ── */
+@keyframes satellite-bored-scan {
+  0%, 100% { transform: rotate(-4deg); }
+  50% { transform: rotate(4deg); }
+}
+.mood-bored #pet-body-group {
+  animation: satellite-bored-scan 2.8s ease-in-out infinite;
+  transform-origin: 128px 220px;
+}
+
+/* ── done:快速收回(下沉 0 → -6 → 0) + 弹回 ── */
+@keyframes satellite-done-deploy {
+  0% { transform: translateY(0) scale(1); }
+  40% { transform: translateY(-8px) scale(1.08); }
+  100% { transform: translateY(0) scale(1); }
+}
+.pet-done #pet-body-group {
+  animation: satellite-done-deploy 0.5s ease-out 1;
+  transform-origin: 128px 220px;
+}

package/assets/pets/15-satellite-bot.svg

@@ -18,7 +18,7 @@
   <!-- Antenna dish (kept 8px lower than original so the dish curve's peak stays clear
        of the viewBox top edge during the idle float animation's -6px translateY) -->
   <line x1="128" y1="24" x2="128" y2="54" stroke="url(#accentGrad)" stroke-width="4"/>
-  <path d="M100 24 Q128 4 156 24 Q128 36 100 24 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <path id="pet-antenna" d="M100 24 Q128 4 156 24 Q128 36 100 24 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
 
   <!-- Solar panel wings -->
   <rect x="4" y="88" width="50" height="70" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>