/* 짝꿍 캐릭터의 동작. 표정 자체는 buddy.js가 그린다. */

.buddy {
  display: grid;
  place-items: center;
  min-height: 0;
}
.buddy svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(150, 80, 120, .16));
}

.fig { transform-box: fill-box; transform-origin: 50% 100%; }
.eye, .spark, .tear, .drop, .sweat { transform-box: fill-box; transform-origin: 50% 50%; }

[data-mood="idle"]  .fig { animation: bob 2.8s ease-in-out infinite; }
[data-mood="idle"]  .eye { animation: blink 4.6s infinite; }
[data-mood="hurry"] .fig { animation: shiver .28s ease-in-out infinite; }
[data-mood="happy"] .fig { animation: jump .62s cubic-bezier(.32, 1.3, .5, 1); }
[data-mood="shock"] .fig { animation: recoil .62s ease-in-out; }
[data-mood="sad"]   .fig { animation: droop 2.6s ease-in-out infinite; }
[data-mood="cheer"] .fig { animation: bob 1.1s ease-in-out infinite; }
[data-mood="party"] .fig { animation: jump .8s cubic-bezier(.32, 1.3, .5, 1) infinite; }

.spark { animation: twinkle .8s ease-in-out infinite; }
.spark.s2 { animation-delay: .16s; }
.spark.s3 { animation-delay: .32s; }
.sweat { animation: falldrop 1.1s ease-in infinite; }
.tear  { animation: falldrop 2.4s ease-in infinite; }
.tear.t2 { animation-delay: 1.1s; }
.drop  { animation: falldrop 1.8s linear infinite; }
.drop.d2 { animation-delay: .8s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(.1); }
}
@keyframes jump {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  14% { transform: translateY(0) scale(1.08, .9); }
  44% { transform: translateY(-17px) scale(.95, 1.07); }
  72% { transform: translateY(0) scale(1.06, .94); }
}
@keyframes recoil {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  14% { transform: translate(0, -8px) scale(1.06); }
  34% { transform: translate(-6px, 0) rotate(-5deg); }
  56% { transform: translate(6px, 0) rotate(5deg); }
  78% { transform: translate(-2px, 0) rotate(-2deg); }
}
@keyframes shiver {
  0%, 100% { transform: translateX(-1.6px); }
  50% { transform: translateX(1.6px); }
}
@keyframes droop {
  0%, 100% { transform: translateY(4px) scaleY(.96); }
  50% { transform: translateY(8px) scaleY(.93); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  45% { opacity: 1; transform: scale(1); }
}
@keyframes falldrop {
  0% { opacity: 0; transform: translateY(-3px); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translateY(16px); }
}

/* 애니메이션 자체는 base.css 가 전역으로 멈춘다.
   반짝임은 끝 상태가 투명이라 여기서 다시 보이게 한다. */
@media (prefers-reduced-motion: reduce) {
  .spark { opacity: 1; }
}