/*
 * 宠物在页面里的样式
 *
 * 这份 CSS 只在 shadow root 内生效，所以选择器可以写得很短，
 * 不必担心和宿主页面撞名字。
 *
 * 两帧同时挂在 `<svg>` 里，用 `data-frame` 决定显示哪一组。
 * 切帧因此只是改一个属性，浏览器不用重建节点，也不会有加载闪烁。
 */

.pp-stage {
  position: relative;
  height: 0;
}

.pp-pet {
  position: absolute;
  bottom: 0;
  left: 0;
  /* 宿主是 pointer-events: none，只有宠物自己接收点击 */
  pointer-events: auto;
  cursor: pointer;
  /* 横向位置每帧都在改，提前提示浏览器单独提一层 */
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.pp-bob,
.pp-sprite {
  display: block;
}

/* 朝哪边走就朝哪边看 */
.pp-sprite[data-dir='-1'] {
  transform: scaleX(-1);
}

.pp-sprite > g {
  display: none;
}

.pp-sprite[data-frame='0'] > g:first-child,
.pp-sprite[data-frame='1'] > g:last-child {
  display: block;
}

/* 点一下跳起来。动画结束后 JS 会把类去掉，下次点击才能重新播 */
.pp-bob.pp-hopping {
  animation: pp-hop 420ms ease-out;
}

@keyframes pp-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-9px);
  }
}

/* 幽灵和史莱姆这类不落地的，平时就上下飘着；跳的时候让位给 pp-hop */
.pp-pet[data-float='true'] .pp-bob:not(.pp-hopping) {
  animation: pp-float 2.6s ease-in-out infinite;
}

@keyframes pp-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.pp-zzz {
  display: none;
  position: absolute;
  top: -14px;
  right: -4px;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
}

.pp-pet[data-behavior='sleep'] .pp-zzz {
  display: block;
  animation: pp-zzz 2.2s ease-in-out infinite;
}

@keyframes pp-zzz {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-7px);
  }
}

/*
 * 系统要求减少动态效果时，全部停掉
 *
 * engine.ts 已经不再推进 rAF 循环了，这里再把纯 CSS 的飘动和 zzz 关掉，
 * 两处都堵上才真的一动不动。
 */
@media (prefers-reduced-motion: reduce) {
  .pp-bob,
  .pp-zzz {
    animation: none !important;
  }
}

@media print {
  .pp-stage {
    display: none;
  }
}