/* ============================================
   キャラクター（女性ガイド）— 位置とサイズは毎回同じ。
   変えるのは script.json の character（状態名）だけ。
   口の座標は pack の mouthMask（x 51.5% / y 45.8% / w 15% / h 7.5%）から出した値。
   ============================================ */

.chr {
  position: absolute;
  z-index: 5;
  right: 6px;
  bottom: 112px;
  width: 186px;
  height: 279px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;

  &.is-on { visibility: visible; opacity: 1 }

  /* 画面の中身とぶつかる場面では、少し小さく端に寄せる */
  &.is-small {
    right: 2px;
    bottom: 112px;
    width: 150px;
    height: 225px;
  }

  /* 🚨 直下の img だけ。目の中に置く絵（.chr-eye-art）まで巻き込むと、
     原寸に拡げて位置をずらす指定が上書きされて瞬きが崩れる */
  & > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 口だけを差し替える。土台は動かさないので顔や髪が揺れない。
     🚨 pack の mouthMask は「中心 51.5% / 45.8%、半径 15% / 7.5%」であって
     左上座標＋幅高さではない。四角く切り抜くと縁が見えるので、
     元の実装と同じ楕円のぼかしマスクで顔に溶かす（#000 42% → transparent 76%）。 */
  .chr-mouth {
    opacity: 0;
    -webkit-mask-image: radial-gradient(ellipse 15% 7.5% at 51.5% 45.8%, #000 42%, transparent 76%);
    mask-image: radial-gradient(ellipse 15% 7.5% at 51.5% 45.8%, #000 42%, transparent 76%);
  }

  &.is-talking .chr-mouth { opacity: 1 }

  .chr-mark {
    position: absolute;
    left: -14px;
    top: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--yellow);
    font-size: 21px;
    font-weight: 900;
    scale: 0;
    opacity: 0;
  }

  &.is-mark .chr-mark { animation: chr-mark 1.6s ease-out infinite }
}

/* 土台ごと動かす（体の一部だけを動かさない） */
.chr.is-jolt { animation: chr-jolt 1.9s ease-out infinite }
.chr.is-nod { animation: chr-nod 2.4s ease-in-out infinite }
.chr.is-sway { animation: chr-sway 4.2s ease-in-out infinite }
.chr.is-wave { animation: chr-wave 900ms ease-in-out infinite }

@keyframes chr-mark {
  0% { scale: .4; opacity: 0 }
  14% { scale: 1.12; opacity: 1 }
  26% { scale: 1; opacity: 1 }
  72% { scale: 1; opacity: 1 }
  100% { scale: 1; opacity: 0 }
}

@keyframes chr-jolt {
  0% { translate: 0 0 }
  6% { translate: 0 -11px }
  13% { translate: 0 2px }
  20% { translate: 0 0 }
  100% { translate: 0 0 }
}

@keyframes chr-nod {
  0%, 100% { rotate: 0deg }
  18% { rotate: 3.2deg }
  36% { rotate: 0deg }
  54% { rotate: 2.4deg }
  72% { rotate: 0deg }
}

@keyframes chr-sway {
  0%, 100% { translate: 0 0; rotate: -1deg }
  50% { translate: 0 -6px; rotate: 1.4deg }
}

@keyframes chr-wave {
  0%, 100% { rotate: -2deg }
  50% { rotate: 2.6deg }
}