/* ============================================
   場面に出るキャラクター（SVG）— 色と動き
   絵の組み立ては js/cast.js。ここは「何色で、どう動くか」だけ。
   ============================================ */

/* 🚨 ここで width を指定しない。cast.css は blocks.css より後に読まれるので、
   場面ごとの大きさ（.hk-man など）を後勝ちで全部つぶしてしまう（2026-09-20 に一度やった）。
   大きさは置く側が決め、ここは中の SVG を入れ物いっぱいに広げるだけ。 */
.ct {
  display: block;
  line-height: 0;
}

.ct-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── 体 ── */
.ct-torso { fill: var(--wear) }
.ct-collar { fill: #fdfaf2 }
.ct-neck { fill: var(--skin) }

/* ── 頭 ── */
.ct-face, .ct-ear { fill: var(--skin) }
.ct-hair { fill: var(--hair) }
.ct-eye-white { fill: #fffdf7 }
.ct-pupil { fill: #2f2a24 }
.ct-glint { fill: #fff }
.ct-nose { fill: none; stroke: #c99a74; stroke-width: 2.2; stroke-linecap: round }

.ct-brow {
  fill: none;
  stroke: var(--hair);
  stroke-width: 3;
  stroke-linecap: round;
}

/* ── 口。ふだんは線、喋っているあいだは開いた形に入れ替わる ── */
.ct-m-rest { fill: none; stroke: #a8654f; stroke-width: 2.8; stroke-linecap: round }
.ct-m-open { fill: #7c3b33; opacity: 0 }

.ct.is-talking {
  .ct-m-rest { animation: ct-m-rest 480ms steps(1, end) infinite }
  .ct-m-open { animation: ct-m-open 480ms steps(1, end) infinite }
}

@keyframes ct-m-rest { 0%, 45% { opacity: 0 } 46%, 100% { opacity: 1 } }
@keyframes ct-m-open { 0%, 45% { opacity: 1 } 46%, 100% { opacity: 0 } }

/* ── まばたき ──
   🚨 終わりのないループの中に3回置く（有限のアニメーションは MP4 書き出しで開いた目のまま固まる）。
      --phase で人ごとに位相をずらす。全員が同時に瞬くと人形に見える。 */
.ct-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: ct-blink 8.6s linear infinite;
  animation-delay: var(--phase, 0s);
}

@keyframes ct-blink {
  0%, 13% { scale: 1 1 }
  14.1% { scale: 1 .06 }
  15.2% { scale: 1 1 }
  48% { scale: 1 1 }
  49.1% { scale: 1 .06 }
  50.2% { scale: 1 1 }
  59% { scale: 1 1 }
  60.1% { scale: 1 .06 }
  61.2%, 100% { scale: 1 1 }
}

/* ── 呼吸と、首から上のゆれ ── */
.ct-body {
  transform-box: view-box;
  transform-origin: 60px 132px;
  animation: ct-breathe 3.6s ease-in-out infinite;
  animation-delay: var(--phase, 0s);
}

@keyframes ct-breathe {
  0%, 100% { scale: 1 1 }
  50% { scale: 1.014 1.02 }
}

.ct-head {
  transform-box: view-box;
  transform-origin: 60px 64px;
  animation: ct-head 5.2s ease-in-out infinite;
  animation-delay: var(--phase, 0s);
}

@keyframes ct-head {
  0%, 100% { rotate: -1.2deg; translate: 0 0 }
  50% { rotate: 1.2deg; translate: 0 -2px }
}

/* 喋っているあいだは、うなずきながら話す */
.ct.is-talking .ct-head { animation: ct-head-talk 1.9s ease-in-out infinite }

@keyframes ct-head-talk {
  0%, 100% { rotate: -1.4deg; translate: 0 0 }
  30% { rotate: 1.6deg; translate: 0 -3px }
  60% { rotate: -.4deg; translate: 0 1px }
}

/* ── 持ち物 ── */
.ct-hand { fill: var(--skin) }
.ct-razor-blade { fill: #b9c3cb }
.ct-razor-grip { fill: #3f6b92 }

/* ほおを上下にこする。支点は手首のあたり */
.ct-razor {
  transform-box: view-box;
  transform-origin: 104px 58px;
  animation: ct-shave 1.1s ease-in-out infinite;
}

@keyframes ct-shave {
  0%, 100% { translate: 0 -5px; rotate: -4deg }
  50% { translate: -3px 9px; rotate: 3deg }
}

.ct-whiff path {
  fill: none;
  stroke: #2f9a9a;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .75;
}

.ct-whiff-1 { animation: ct-whiff 2.2s ease-in-out infinite }
.ct-whiff-2 { animation: ct-whiff 2.2s ease-in-out infinite; animation-delay: -.75s }
.ct-whiff-3 { animation: ct-whiff 2.2s ease-in-out infinite; animation-delay: -1.5s }

@keyframes ct-whiff {
  0% { opacity: 0; translate: 0 8px }
  30% { opacity: .8 }
  70% { opacity: .8 }
  100% { opacity: 0; translate: 0 -12px }
}

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