/* 응원 캐릭터(선생님) (assets/js/mascot.js) — jbtraining에서 가져옴
   움직임은 transform·opacity만 쓴다. 기본은 처음부터 움직이고, .still 을 붙이거나 화면의 멈춤 단추를 누르면 멈춘다. */

.msc { display: inline-block; vertical-align: middle; overflow: visible; max-width: 100%; height: auto; }

/* 움직이는 부품의 기준점 */
.msc .msc-fig, .msc .msc-shadow, .msc .msc-eyes, .msc .msc-arm-l, .msc .msc-arm-r,
.msc .msc-spk, .msc .msc-cf, .msc .msc-pc, .msc .msc-blush { transform-box: fill-box; }
.msc .msc-fig { transform-origin: 50% 100%; }
.msc .msc-shadow, .msc .msc-eyes, .msc .msc-spk, .msc .msc-cf, .msc .msc-pc, .msc .msc-blush { transform-origin: 50% 50%; }

/* 눈 깜빡임 (공통) */
.msc .msc-eyes { animation: msc-blink 5s ease-in-out infinite; }
.msc-budget .msc-eyes { animation-delay: -2.2s; }
@keyframes msc-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }

/* ---------- cheer: 파이팅 (위아래로 살짝) ---------- */
.msc-cheer .msc-fig { animation: msc-bob 2.4s ease-in-out infinite; }
.msc-cheer .msc-shadow { animation: msc-shadow-bob 2.4s ease-in-out infinite; }
.msc-cheer .msc-arm-l, .msc-cheer .msc-arm-r { animation: msc-pump 2.4s ease-in-out infinite; }
.msc-cheer .msc-arm-r { animation-delay: -.15s; }
.msc-cheer .msc-pc-bob { animation: msc-coin-bob 2.4s ease-in-out infinite; }
@keyframes msc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes msc-shadow-bob { 0%, 100% { transform: scale(1); opacity: .14; } 50% { transform: scale(.92); opacity: .1; } }
@keyframes msc-pump { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-3px); } }
@keyframes msc-coin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- good: 엄지척 (좌우로 살랑) ---------- */
.msc-good .msc-fig { animation: msc-sway 3s ease-in-out infinite; }
.msc-good .msc-arm-r { transform-origin: 14% 74%; animation: msc-thumb 3s ease-in-out infinite; }
@keyframes msc-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes msc-thumb { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }

/* ---------- great: 박수 + 반짝이 ---------- */
.msc-great .msc-fig { animation: msc-hop 2s ease-in-out infinite; }
.msc-great .msc-arm-l { animation: msc-clap-l 2s ease-in-out infinite; }
.msc-great .msc-arm-r { animation: msc-clap-r 2s ease-in-out infinite; }
.msc-great .msc-blush { animation: msc-glow 2s ease-in-out infinite; }
.msc-great .msc-spk { animation: msc-twinkle 2s ease-in-out infinite; }
.msc-great .msc-spk2 { animation-delay: -.5s; }
.msc-great .msc-spk3 { animation-delay: -1s; }
.msc-great .msc-spk4 { animation-delay: -1.5s; }
.msc-great .msc-pc-drop { animation: msc-coin-drop 2s ease-in infinite; }
@keyframes msc-hop { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-2.5px); } 50% { transform: translateY(0); } }
@keyframes msc-clap-l { 0%, 20%, 40%, 60%, 100% { transform: translateX(0); } 10%, 30%, 50% { transform: translateX(-3px); } }
@keyframes msc-clap-r { 0%, 20%, 40%, 60%, 100% { transform: translateX(0); } 10%, 30%, 50% { transform: translateX(3px); } }
@keyframes msc-glow { 0%, 100% { opacity: .42; } 50% { opacity: .62; } }
@keyframes msc-twinkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes msc-coin-drop {
  0% { transform: translateY(-7px); opacity: 0; }
  20% { transform: translateY(-4px); opacity: 1; }
  62% { transform: translateY(5px); opacity: 1; }
  78%, 100% { transform: translateY(9px); opacity: 0; }
}

/* ---------- star: 만세 점프 + 메달 + 꽃가루 ---------- */
.msc-star .msc-fig { animation: msc-jump 3s ease-in-out infinite; }
.msc-star .msc-shadow { animation: msc-shadow-jump 3s ease-in-out infinite; }
.msc-star .msc-arm-l { transform-origin: 88% 86%; animation: msc-wave-l 3s ease-in-out infinite; }
.msc-star .msc-arm-r { transform-origin: 12% 86%; animation: msc-wave-r 3s ease-in-out infinite; }
.msc-star .msc-cf { opacity: .9; animation: msc-fall-a 3s linear infinite; }
.msc-star .msc-cf2, .msc-star .msc-cf4, .msc-star .msc-cf6 { animation-name: msc-fall-b; }
.msc-star .msc-cf1 { animation-delay: 0s; }
.msc-star .msc-cf2 { animation-delay: -1.7s; }
.msc-star .msc-cf3 { animation-delay: -.8s; }
.msc-star .msc-cf4 { animation-delay: -2.5s; }
.msc-star .msc-cf5 { animation-delay: -1.2s; }
.msc-star .msc-cf6 { animation-delay: -.3s; }
.msc-star .msc-cf7 { animation-delay: -2.1s; }
.msc-budget.msc-star g.msc-cf { animation-name: msc-coin-fall; }
@keyframes msc-jump {
  0%, 52%, 100% { transform: translateY(0) scaleY(1); }
  8% { transform: translateY(0) scaleY(.96); }
  22% { transform: translateY(-8px) scaleY(1.01); }
  36% { transform: translateY(0) scaleY(.97); }
  44% { transform: translateY(0) scaleY(1.01); }
}
@keyframes msc-shadow-jump {
  0%, 52%, 100% { transform: scale(1); opacity: .14; }
  22% { transform: scale(.8); opacity: .09; }
  36% { transform: scale(1.03); opacity: .15; }
}
@keyframes msc-wave-l { 0%, 52%, 100% { transform: rotate(0); } 22% { transform: rotate(6deg); } 76% { transform: rotate(-3deg); } }
@keyframes msc-wave-r { 0%, 52%, 100% { transform: rotate(0); } 22% { transform: rotate(-6deg); } 76% { transform: rotate(3deg); } }
@keyframes msc-fall-a {
  0% { transform: translate(0, -6px) rotate(0); opacity: 0; }
  12% { opacity: .95; }
  80% { opacity: .95; }
  100% { transform: translate(8px, 150px) rotate(300deg); opacity: 0; }
}
@keyframes msc-fall-b {
  0% { transform: translate(0, -6px) rotate(0); opacity: 0; }
  12% { opacity: .95; }
  80% { opacity: .95; }
  100% { transform: translate(-8px, 150px) rotate(-280deg); opacity: 0; }
}
@keyframes msc-coin-fall {
  0% { transform: translate(0, -6px) scaleX(1); opacity: 0; }
  12% { opacity: 1; }
  25% { transform: translate(0, 33px) scaleX(.25); }
  40% { transform: translate(0, 56px) scaleX(1); }
  55% { transform: translate(0, 78px) scaleX(.25); }
  70% { transform: translate(0, 101px) scaleX(1); }
  80% { opacity: 1; }
  85% { transform: translate(0, 124px) scaleX(.25); }
  100% { transform: translate(0, 146px) scaleX(1); opacity: 0; }
}

/* ---------- 말풍선 카드 ---------- */
.msc-card { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.msc-card .msc { display: block; }
.msc-bubble {
  position: relative; max-width: 250px; padding: 8px 14px;
  font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; text-align: center;
  color: #0f2a5f; background: #fff; border: 1.5px solid #dfe4ec; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 42, 95, .06), 0 6px 18px rgba(15, 42, 95, .08);
  word-break: keep-all; overflow-wrap: break-word;
  transform-origin: 50% 100%;
  animation: msc-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.msc-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -7.5px; width: 12px; height: 12px;
  background: inherit; border-right: inherit; border-bottom: inherit; border-bottom-right-radius: 3px;
  transform: translateX(-50%) rotate(45deg);
}
.msc-card-cheer .msc-bubble { background: #fff7ee; border-color: #f7cd9c; }
.msc-card-good  .msc-bubble { background: #f3f8ff; border-color: #c4d8fb; }
.msc-card-great .msc-bubble { background: #effaf9; border-color: #a6e0dd; }
.msc-card-star  .msc-bubble { background: #fffbe6; border-color: #f2d36a; }
@keyframes msc-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 멈춤 고리 */
.msc.still *, .msc-card.still *, .still .msc * { animation-play-state: paused !important; }
/* 멈춘 상태에서 말풍선이 첫 장면(투명)에 멈춰 사라지지 않도록 바로 다 보이게 */
.msc-card.still .msc-bubble, .still .msc-card .msc-bubble { animation: none; }