/* ============================================
   LilPal CSS 角色 - 可爱的 blob 小生物
   ============================================ */

#lilpal-character,
#login-character {
  --pal-body: #c4b5fd;
  --pal-body-2: #f0abfc;
  --pal-shadow: rgba(167, 139, 250, 0.3);
  --pal-cheek: #f9a8d4;
  --pal-eye: #1e1b4b;

  width: 110px;
  height: 110px;
  position: relative;
  margin: 0 auto;
}

/* 登录页的静态浮动 */
#login-character .pal-body::before {
  animation: float 3s ease-in-out infinite;
}

/* 身体 - 不规则椭圆 blob */
.pal-body {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.pal-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 35% 30%, var(--pal-body-2), var(--pal-body) 60%);
  border-radius: 50% 50% 45% 55% / 55% 50% 50% 45%;
  box-shadow:
    0 8px 24px var(--pal-shadow),
    inset 0 -4px 8px rgba(0,0,0,0.04);
}

/* 投影 */
.pal-shadow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 12px;
  background: rgba(167, 139, 250, 0.2);
  border-radius: 50%;
  z-index: 0;
  animation: shadow-pulse 3s ease-in-out infinite;
}

/* 眼睛 */
.pal-eyes {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.pal-eye {
  width: 18px;
  height: 22px;
  background: var(--pal-eye);
  border-radius: 50%;
  position: relative;
  animation: blink 4s ease-in-out infinite;
}

.pal-eye::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  top: 4px;
  left: 4px;
}

/* 嘴巴 */
.pal-mouth {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 8px;
  border-bottom: 2.5px solid var(--pal-eye);
  border-radius: 0 0 50% 50%;
  z-index: 2;
}

/* 腮红 */
.pal-cheeks {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.pal-cheek {
  width: 14px;
  height: 9px;
  background: var(--pal-cheek);
  border-radius: 50%;
  opacity: 0.5;
}

/* ============================================
   情绪状态
   ============================================ */

/* 开心 (默认) */
.mood-happy .pal-body::before {
  animation: float 3s ease-in-out infinite;
}

/* 兴奋 - 弹跳 */
.mood-excited .pal-body::before {
  animation: bounce 0.5s ease-out;
}

.mood-excited .pal-mouth {
  height: 10px;
  width: 18px;
  border-bottom-width: 3px;
}

.mood-excited .pal-eye {
  animation: blink 4s ease-in-out infinite, eye-squint 0.5s ease-out;
}

/* 思考 */
.mood-thinking .pal-body::before {
  animation: float-slow 5s ease-in-out infinite;
}

.mood-thinking .pal-eye {
  animation: blink 4s ease-in-out infinite, look-up 0.3s ease-out forwards;
}

.mood-thinking .pal-mouth {
  width: 10px;
  border-bottom-width: 2px;
  transform: translateX(-50%) translateX(-3px);
}

/* 困倦 */
.mood-sleepy .pal-body::before {
  animation: float-slow 6s ease-in-out infinite;
}

.mood-sleepy .pal-eye {
  height: 4px;
  border-radius: 50%;
  animation: none;
}

.mood-sleepy .pal-eye::after {
  opacity: 0;
}

.mood-sleepy .pal-mouth {
  width: 12px;
  height: 6px;
}

/* ============================================
   动画关键帧
   ============================================ */

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-4px) rotate(0.5deg); }
  75%  { transform: translateY(2px) rotate(-0.5deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-3px); }
}

@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.2; }
  50%  { transform: translateX(-50%) scale(0.85); opacity: 0.15; }
}

@keyframes blink {
  0%, 96%, 100% { transform: scaleY(1); }
  98%  { transform: scaleY(0.1); }
}

@keyframes bounce {
  0%   { transform: translateY(0) scale(1, 1); }
  10%  { transform: translateY(0) scale(0.9, 1.1); }
  30%  { transform: translateY(-14px) scale(1.05, 0.95); }
  50%  { transform: translateY(0) scale(1, 1); }
  70%  { transform: translateY(-6px) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes eye-squint {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

@keyframes look-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}