/* ==========================================================================
   EndlessLoop · 互动宠物窝 / 点击特效样式
   --------------------------------------------------------------------------
   1. 宠物窝：左下角玻璃小窝 + 3 只真实宠物（img/pet/pets.png 精灵图裁剪）
   2. 说话气泡
   3. 点击特效：Hello Kitty 风格贴纸 + 核心价值观文字
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. 宠物窝
   ------------------------------------------------------------------------- */

.el-pet {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: bottom center;
  will-change: transform;
  pointer-events: none;
}

.el-pet-body {
  display: block;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
  transform-origin: bottom center;
  animation: el-pet-breathe 3.8s ease-in-out infinite;
}

.el-pet-body:focus-visible {
  outline: 2px solid var(--el-sakura);
  outline-offset: 2px;
  border-radius: 14px;
}

/* 悬停：轻微抬头 + 变亮 */
.el-pet-body:hover {
  animation: el-pet-hover 0.5s var(--el-ease) forwards;
  filter: brightness(1.07) saturate(1.04) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
}

/* 点击：弹跳反应 */
.el-pet-body.is-pop {
  animation: el-pet-pop 0.55s var(--el-ease-back);
}

/* 随机跳一下 */
.el-pet-body.is-jumping {
  animation: el-pet-jump 0.75s var(--el-ease);
}

/* 随机左右轻晃 */
.el-pet-body.is-sway {
  animation: el-pet-sway 0.9s var(--el-ease);
}

/* 随机伸懒腰 */
.el-pet-body.is-stretch {
  animation: el-pet-stretch 1.1s var(--el-ease);
}

/* 随机点头 */
.el-pet-body.is-nod {
  animation: el-pet-nod 0.9s var(--el-ease);
}

/* 随机扭动 */
.el-pet-body.is-wiggle {
  animation: el-pet-wiggle 0.7s var(--el-ease);
}

@keyframes el-pet-breathe {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-4px) scaleY(1.035);
  }
}

@keyframes el-pet-hover {
  to {
    transform: translateY(-5px) rotate(-2deg);
  }
}

@keyframes el-pet-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.08, 0.94);
  }
  65% {
    transform: scale(0.97, 1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes el-pet-jump {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-20px) scale(1.03);
  }
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-6px);
  }
}

@keyframes el-pet-sway {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

@keyframes el-pet-stretch {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08, 0.95);
  }
  70% {
    transform: scale(1);
  }
}

@keyframes el-pet-nod {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  30% {
    transform: translateY(3px) scaleY(0.94);
  }
  60% {
    transform: translateY(-2px) scaleY(1.04);
  }
}

@keyframes el-pet-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-6deg);
  }
  40% {
    transform: rotate(6deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  80% {
    transform: rotate(4deg);
  }
}

/* -------------------------------------------------------------------------
   2. 说话气泡（悬浮在宠物上方）
   ------------------------------------------------------------------------- */

.el-pet-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  max-width: 200px;
  padding: 8px 13px;
  border: 1px solid var(--el-glass-border);
  border-radius: 14px;
  background: var(--el-glass-bg-strong);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: var(--el-shadow-2);
  color: var(--el-text);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(6px) scale(0.9);
  transform-origin: bottom center;
  transition: opacity 0.25s var(--el-ease), transform 0.25s var(--el-ease);
}

.el-pet-bubble.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.el-pet-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--el-glass-bg-strong);
  border-right: 1px solid var(--el-glass-border);
  border-bottom: 1px solid var(--el-glass-border);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
   3. 点击特效：Hello Kitty 风格贴纸 + 核心价值观文字
   ------------------------------------------------------------------------- */

.el-click-sticker {
  position: fixed;
  z-index: 9999;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
  animation: el-click-sticker 1.1s var(--el-ease) forwards;
}

@keyframes el-click-sticker {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
  }
  40% {
    opacity: 1;
    transform: scale(1.12) rotate(5deg);
  }
  60% {
    transform: scale(0.96) rotate(-2deg);
  }
  75% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0deg);
  }
}

.el-click-text {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  color: #fff;
  font-family: 'Space Grotesk', 'DM Sans', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 130, 190, 0.85);
  text-shadow: 0 0 10px hsla(var(--accent-hue), 100%, 81%, 0.85), 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: el-click-text 1.1s var(--el-ease) forwards;
}

@keyframes el-click-text {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.7);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.1);
  }
  55% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-42px) scale(1);
  }
}

/* -------------------------------------------------------------------------
   响应式 / 降级
   ------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  /* 移动端宠物稍微降低透明度，避免抢正文 */
  .el-pet {
    opacity: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-pet-body,
  .el-pet-body:hover,
  .el-pet-body.is-pop,
  .el-pet-body.is-jumping,
  .el-pet-body.is-sway,
  .el-pet-body.is-stretch,
  .el-pet-body.is-nod,
  .el-pet-body.is-wiggle,
  .el-click-sticker,
  .el-click-text {
    animation: none;
  }
}