/* ============================================
   ナレーター（SVG）— 置き場所・色・動き
   絵の組み立ては js/guide.js。ここは「どこに、何色で、どう動くか」だけ。
   ============================================
   🚨 動きは CSS アニメーションで書く。SMIL は MP4 書き出しで止まる（→ guide.js の注意）。
   🚨 回す部品には transform-box を明示する。SVG の既定は view-box なので、
      「その部品の中心」で回したいときは fill-box を付けないと画面中心のまわりを回る
      （2026-09-19、機関車の車輪が公転して枠外へ消えた）。
   ============================================ */

.chr {
  position: absolute;
  z-index: 5;
  right: 2px;
  bottom: 104px;
  width: 190px;
  height: 285px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;

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

  /* 画面の中身とぶつかる場面では、小さく端へ寄せる */
  &.is-small {
    right: -4px;
    bottom: 104px;
    width: 148px;
    height: 222px;
  }
}

.gd {
  width: 100%;
  height: 100%;
  overflow: visible;

  /* 紙ものの配色。線は落とさず、面の塗り分けで見せる */
  --skin: #f4d3b4;
  --hair: #4a3526;
  --wear: #dd5c3c;
  --wear-dark: #c14c2f;
  --mouth-in: #7c3b33;
}

/* ── 体 ── */
.gd-torso { fill: var(--wear) }
.gd-collar { fill: #fdfaf2 }
.gd-neck { fill: var(--skin) }
/* 腕は線で描く。袖（服の色・太い）→ 前腕（肌・細い）→ 手（丸）の3段。
   端を丸くしてあるので、どの角度へ回しても腕に見える */
.gd-sleeve {
  fill: none;
  stroke: var(--wear-dark);
  stroke-width: 26;
  stroke-linecap: round;
}

.gd-forearm {
  fill: none;
  stroke: var(--skin);
  stroke-width: 19;
  stroke-linecap: round;
}

.gd-hand { fill: var(--skin) }

/* ── 頭 ── */
.gd-face, .gd-ear { fill: var(--skin) }
.gd-hair-back, .gd-hair-front { fill: var(--hair) }
.gd-cheek { fill: #ef9f88; opacity: .5 }
.gd-nose { fill: none; stroke: #c99a74; stroke-width: 2.4; stroke-linecap: round }

.gd-brow {
  fill: none;
  stroke: var(--hair);
  stroke-width: 2.9;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.gd-eye-white { fill: #fffdf7 }
.gd-pupil { fill: #2f2a24 }
.gd-glint { fill: #fff }
.gd-lash { fill: none; stroke: #2f2a24; stroke-width: 2.6; stroke-linecap: round }

/* ── 口。4つ重ねてあるうち、いまの形だけ出す ── */
.gd-m { display: none }
.gd-m-closed { fill: none; stroke: #b0705c; stroke-width: 3; stroke-linecap: round }
.gd-m-small, .gd-m-round, .gd-m-wide ellipse { fill: var(--mouth-in) }
.gd-tongue { fill: #de8578 }

.chr[data-mouth="closed"] .gd-m-closed,
.chr[data-mouth="small"] .gd-m-small,
.chr[data-mouth="wide"] .gd-m-wide,
.chr[data-mouth="round"] .gd-m-round { display: block }

/* ── まばたき ──
   🚨 「1回だけ再生」にしない。MP4 書き出しはコマごとに時刻を止めて撮るので、
      有限のアニメーションは終わったあとの姿（＝開いた目）で全コマ固まる。
      終わりのないループの中に3回置く。周期9.4秒／1.10・4.30・5.25秒。
      2回続けてから長く空けるのが人の癖。毎分19.1回＝人の平均15〜20回。 */
.gd-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: gd-blink 9.4s linear infinite;
}

@keyframes gd-blink {
  0%, 11.7% { scale: 1 1 }
  12.66% { scale: 1 .06 }
  13.62% { scale: 1 1 }
  45.74% { scale: 1 1 }
  46.7% { scale: 1 .06 }
  47.66% { scale: 1 1 }
  55.85% { scale: 1 1 }
  56.81% { scale: 1 .06 }
  57.77%, 100% { scale: 1 1 }
}

/* ── 呼吸。いつでも少し動いている（完全な静止は死んで見える） ── */
.gd-body {
  transform-box: view-box;
  transform-origin: 70px 210px;
  animation: gd-breathe 3.8s ease-in-out infinite;
}

@keyframes gd-breathe {
  0%, 100% { scale: 1 1 }
  50% { scale: 1.012 1.018 }
}

/* ── 頭。首のつけ根を支点に回す ── */
.gd-head {
  transform-box: view-box;
  transform-origin: 70px 94px;
  animation: gd-head-float 5.6s ease-in-out infinite;
}

@keyframes gd-head-float {
  0%, 100% { rotate: -.8deg; translate: 0 0 }
  50% { rotate: .9deg; translate: 0 -2px }
}

/* ── 腕。肩を支点に回す（既定は下ろしたまま） ── */
.gd-arm { transform-box: view-box }
.gd-arm-l { transform-origin: 45px 136px }
.gd-arm-r { transform-origin: 95px 136px }

/* ── 汗。困った顔のときだけ ── */
.gd-sweat { fill: #6fb2d8; opacity: 0 }

/* ── 印（！ へ〜） ── */
.chr-mark {
  position: absolute;
  left: -10px;
  top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--yellow);
  font-size: 21px;
  font-weight: 900;
  scale: 0;
  opacity: 0;
}

.chr.is-mark .chr-mark { animation: chr-mark 1.6s ease-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 }
}

/* ============================================
   姿勢ごとの動き
   体の一部だけを動かすのではなく、支点を決めて「そこから先」を動かす。
   ============================================ */

/* おどろく：体ごと跳ねて、目が見開く */
.chr.is-jolt .gd-body,
.chr.is-jolt .gd-head { animation: gd-jolt 1.9s ease-out infinite }
.chr.is-wide-eye .gd-eye-white { scale: 1.16; transform-box: fill-box; transform-origin: center }
/* おどろきは「眉を上げる」だけ。ここで回すと怒り顔になる */
.chr.is-wide-eye .gd-brow { translate: 0 -5px }

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

/* うなずく：首から上だけ */
.chr.is-nod .gd-head { animation: gd-nod 2.4s ease-in-out infinite }

@keyframes gd-nod {
  0%, 100% { rotate: 0deg }
  18% { rotate: 4.2deg }
  36% { rotate: 0deg }
  54% { rotate: 3deg }
  72% { rotate: 0deg }
}

/* 指さす：中身は画面の左にあるので、左腕を左上へ上げる */
.chr.is-point .gd-arm-l { animation: gd-point 2.2s ease-in-out infinite }

@keyframes gd-point {
  0%, 100% { rotate: 124deg }
  50% { rotate: 131deg }
}

/* 考える：体を揺らしながら、右手をあごへ */
.chr.is-sway .gd-body { animation: gd-sway 4.2s ease-in-out infinite }
/* 手は顔の横で止める。あごの下へ持っていくと、顔の絵の下に隠れて見えなくなる */
.chr.is-think .gd-arm-r { rotate: -152deg; scale: .82 }
/* 考える：片方の眉だけ内側を下げる（両方下げると怒り顔） */
.chr.is-think .gd-brow-l { rotate: 6deg; translate: 0 1px }

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

/* 困る：眉が八の字に落ちて、汗がゆっくり流れる */
/* 困り顔は八の字＝内側（鼻より）が上がって外側が下がる。
   🚨 向きを逆にすると怒り顔になる。左眉は外→内に引いてあるので、
      内側を上げるには反時計回り（負）（2026-09-20 に逆を書いて怒らせた） */
.chr.is-troubled .gd-brow-l { rotate: -14deg; translate: 0 3px }
.chr.is-troubled .gd-brow-r { rotate: 14deg; translate: 0 3px }
.chr.is-troubled .gd-head { animation: gd-tilt 3.4s ease-in-out infinite }
.chr.is-troubled .gd-sweat { animation: gd-sweat 2.6s ease-in infinite }

@keyframes gd-tilt {
  0%, 100% { rotate: -5deg }
  50% { rotate: -2deg }
}

@keyframes gd-sweat {
  0% { opacity: 0; translate: 0 -6px }
  22% { opacity: .95; translate: 0 0 }
  70% { opacity: .95; translate: 0 16px }
  100% { opacity: 0; translate: 0 26px }
}

/* 手をふる：右腕を上げて振る */
.chr.is-wave .gd-arm-r { animation: gd-wave 900ms ease-in-out infinite }
.chr.is-wave .gd-body { animation: gd-breathe 3.8s ease-in-out infinite, gd-bob 1.8s ease-in-out infinite }

@keyframes gd-wave {
  0%, 100% { rotate: -132deg }
  50% { rotate: -160deg }
}

@keyframes gd-bob {
  0%, 100% { translate: 0 0 }
  50% { translate: 0 -5px }
}

@media (prefers-reduced-motion: reduce) {
  .gd *, .gd { animation: none !important }
}