/* ==========================================================================
   牛牛宠物动画层 v2（2026-10-02）
   素材：niuniu-idle / niuniu-typing / niuniu-walk .webp（320x320，源 240x160 红牛桌面宠物）
   说明：狗本身已经在动画里动了（眨眼、耳朵、走路、咖啡热气），
        所以这里只做**轻微**的容器动效，避免"动+动"打架。
   ========================================================================== */

/* ---------- 悬浮球：轻微浮动（别盖过狗自身的动画）---------- */
.pet-ball {
  animation: petFloat 4.5s ease-in-out infinite;
  will-change: transform;
  overflow: visible;              /* 耳朵/光晕不被裁掉 */
}
@keyframes petFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.02); }
}

/* 动画帧铺满圆形球体（320x320 方图正好） */
.pet-ball img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 落地阴影：去圆圈后让牛牛像站在页面上（阴影跟随透明轮廓 + 脚下椭圆） */
.pet-ball::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 58%;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}
/* 悬停：停下浮动，轻轻一提 */
.pet-ball:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.06);
}

/* ---------- 被点击：开心一跳 ---------- */
.pet-ball.happy { animation: petHappy .62s ease-out; }
@keyframes petHappy {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(1.16) translateY(-14px) rotate(-7deg); }
  70%  { transform: scale(.97) translateY(0) rotate(4deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}

/* ---------- 待确认：红色提醒抖动 ---------- */
.pet-ball.need-confirm {
  border-color: var(--red);
  animation: petAlert .9s ease-in-out infinite;
}
@keyframes petAlert {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-5px) rotate(-8deg) scale(1.04); }
  65%      { transform: translateY(-2px) rotate(8deg) scale(1.02); }
}

/* ---------- 面板头像（小圆）---------- */
.pet-avatar { animation: petAvatarFloat 4s ease-in-out infinite; }
@keyframes petAvatarFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---------- 聊天里的「正在输入」三点 ---------- */
.pet-typing {
  align-self: flex-start;
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 12px 12px 12px 3px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.pet-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mut);
  display: block;
  animation: petDot 1.3s ease-in-out infinite;
}
.pet-typing i:nth-child(2) { animation-delay: .18s; }
.pet-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes petDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* 走路/小跑的上下起伏由素材本身带（在页面上自由活动，不再用横穿屏幕的贴图）
   —— 位移速度在 pet.js：walk 57px/s、run 130px/s，与各自步态周期匹配不打滑。 */

/* ---------- 桌宠交互（2026-10-11）：拖拽光标 + 冒爱心 ---------- */
.pet-ball.dragging { cursor: grabbing; transition: none !important; }
.pet-ball.dragging img { transform: scale(1.06); }
.pet-heart {
  position: fixed; z-index: 95; pointer-events: none;
  font-size: 17px; line-height: 1;
  animation: petHeartFloat 1.4s ease-out forwards;
}
@keyframes petHeartFloat {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  25%  { opacity: 1; transform: translateY(-6px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-46px) scale(.9); }
}

/* ---------- 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pet-ball, .pet-avatar, .pet-typing i,
  .pet-ball.need-confirm, .pet-ball.happy {
    animation: none !important;
  }
}