/* ======================================================
   儿童友好型宠物头像系统 - CSS样式
   设计原则：圆润可爱、颜色鲜艳、动画有趣
   ====================================================== */

/* ── 基础容器 ──────────────────────────────────────── */
.kfp-wrap {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 90px;
  border-radius: 50%;
  overflow: visible;
  transition: transform 0.3s ease;
}

.kfp-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* ── 等级背景光晕 ──────────────────────────────────── */
/* 幼年期：淡淡光晕 */
.kfp-junior .kfp-glow,
.kfp-wrap.kfp-junior {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
}

/* 成长期：暖色光晕 */
.kfp-wrap.kfp-middle {
  filter: drop-shadow(0 4px 10px rgba(251,191,36,0.35));
}

/* 成熟期：金色发光 */
.kfp-wrap.kfp-senior {
  filter: drop-shadow(0 0 14px rgba(251,191,36,0.6)) drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}

/* ── 幼年期动画：温柔浮动 ──────────────────────────── */
@keyframes kfp-float-gentle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}

.kfp-wrap.kfp-junior {
  animation: kfp-float-gentle 3s ease-in-out infinite;
}

/* ── 成长期动画：欢快跳动 ─────────────────────────── */
@keyframes kfp-bounce-happy {
  0%, 100% { transform: translateY(0px) scale(1); }
  25%       { transform: translateY(-8px) scale(1.03); }
  50%       { transform: translateY(-4px) scale(1.01); }
  75%       { transform: translateY(-10px) scale(1.04); }
}

.kfp-wrap.kfp-middle {
  animation: kfp-bounce-happy 2s ease-in-out infinite;
}

/* ── 成熟期动画：威风呼吸 + 金色脉冲 ────────────────── */
@keyframes kfp-pulse-majestic {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

.kfp-wrap.kfp-senior {
  animation: kfp-pulse-majestic 2.5s ease-in-out infinite;
}

/* ── 悬停效果 ──────────────────────────────────────── */
.kfp-wrap:hover {
  animation-play-state: paused;
  transform: scale(1.18) translateY(-4px) !important;
  filter: drop-shadow(0 8px 20px rgba(251,191,36,0.5)) drop-shadow(0 4px 8px rgba(0,0,0,0.25)) !important;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  z-index: 10;
}

/* ── 宠物卡片中的头像尺寸 ──────────────────────────── */
.pet-avatar-container .kfp-wrap {
  width: 72px;
  height: 80px;
}

/* 大屏展示模式 */
.projection-mode .kfp-wrap {
  width: 100px;
  height: 112px;
}

/* 宠物详情弹窗 */
.pet-detail-avatar .kfp-wrap {
  width: 120px;
  height: 135px;
}

/* 排行榜缩略 */
.rank-pet .kfp-wrap {
  width: 52px;
  height: 58px;
}

/* 选宠物选择器 */
.pet-picker-item .kfp-wrap {
  width: 60px;
  height: 68px;
}

/* ── 特殊宠物额外效果 ─────────────────────────────── */

/* 独角兽 彩虹轨迹 */
.kfp-wrap.kfp-unicorn.kfp-senior {
  filter: drop-shadow(0 0 16px rgba(167,139,250,0.7)) drop-shadow(0 0 8px rgba(251,191,36,0.5));
}

/* 神龙 绿色火焰光 */
.kfp-wrap.kfp-dragon.kfp-senior {
  filter: drop-shadow(0 0 14px rgba(34,197,94,0.7)) drop-shadow(0 0 6px rgba(249,115,22,0.4));
}

/* 青蛙 清新绿光 */
.kfp-wrap.kfp-frog.kfp-senior {
  filter: drop-shadow(0 0 12px rgba(74,222,128,0.6));
}

/* 猫头鹰 橙色暖光 */
.kfp-wrap.kfp-owl.kfp-senior {
  filter: drop-shadow(0 0 12px rgba(249,115,22,0.6)) drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}

/* 小鸭 金色光 */
.kfp-wrap.kfp-duck.kfp-senior {
  filter: drop-shadow(0 0 12px rgba(217,119,6,0.6)) drop-shadow(0 0 6px rgba(5,150,105,0.4));
}

/* ── 未知蛋 专属动画 ─────────────────────────────── */
@keyframes kfp-egg-wobble {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-8deg); }
  40%       { transform: rotate(8deg); }
  60%       { transform: rotate(-5deg); }
  80%       { transform: rotate(5deg); }
}

.kfp-wrap.kfp-unknown {
  animation: kfp-egg-wobble 2.5s ease-in-out infinite;
}

.kfp-wrap.kfp-unknown:hover {
  animation: kfp-egg-wobble 0.5s ease-in-out infinite;
}

/* ── 成熟期金色光晕脉冲环 ──────────────────────────── */
@keyframes kfp-ring-pulse {
  0%, 100% { opacity: 0.3; r: 40; }
  50%       { opacity: 0.7; r: 44; }
}

/* ── 点击缩放反馈 ──────────────────────────────────── */
.kfp-wrap:active {
  transform: scale(0.92) !important;
  transition: transform 0.1s ease;
}

/* ── 复活期（灰色+旋转）──────────────────────────── */
.kfp-wrap.kfp-revival {
  filter: grayscale(0.6) drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

@keyframes kfp-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── 勋章获得时的庆祝动画 ─────────────────────────── */
@keyframes kfp-celebrate {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.25) rotate(-10deg); }
  40%  { transform: scale(1.3) rotate(10deg); }
  60%  { transform: scale(1.2) rotate(-5deg); }
  80%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.kfp-wrap.kfp-celebrate {
  animation: kfp-celebrate 0.8s ease forwards !important;
}

/* ── 响应式适配 ──────────────────────────────────── */
@media (max-width: 600px) {
  .kfp-wrap {
    width: 64px;
    height: 72px;
  }
  .projection-mode .kfp-wrap {
    width: 80px;
    height: 90px;
  }
}