/* AM先生の待機モーション。ベース画像を髪・服の領域で重ね、静止画でも呼吸感を作る。 */
.teacher-stage::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(circle at 48% 33%, #ffffff20 0 10%, transparent 32%);
  animation: stageGlow 6s ease-in-out infinite;
}

.teacher-avatar {
  animation: teacherIdle 4.8s ease-in-out infinite;
  will-change: transform;
}

.teacher-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.teacher-hair {
  clip-path: inset(0 0 45% 0);
  transform-origin: 50% 90%;
  animation: hairSway 3.6s ease-in-out infinite;
  will-change: transform;
}

.teacher-blink,
.teacher-speaking {
  opacity: 0;
}

.teacher-blink {
  animation: naturalBlink 5.8s steps(1, end) infinite;
}

.teacher-avatar.is-speaking .teacher-blink {
  animation-play-state: paused;
  opacity: 0;
}

.teacher-avatar.is-speaking .teacher-speaking {
  animation: mouthTalk .34s steps(1, end) infinite;
}

.teacher-clothes {
  clip-path: inset(57% 0 0 0);
  transform-origin: 50% 100%;
  animation: clothesBreathe 4.8s ease-in-out infinite;
  will-change: transform;
}

.teacher-avatar.is-speaking {
  animation-duration: 1.25s;
}

.teacher-avatar.is-speaking .teacher-hair { animation-duration: 1.1s; }
.teacher-avatar.is-speaking .teacher-clothes { animation-duration: 1.25s; }

.teacher-avatar.is-speaking::after {
  content: "";
  position: absolute;
  inset: 12% 12% 9%;
  border: 2px solid #ffdc78aa;
  border-radius: 48% 48% 42% 42%;
  animation: speakingRing 1.25s ease-out infinite;
}

.spark { animation: sparkleFloat 3s ease-in-out infinite; }
.spark-two { animation-delay: -1.4s; }

@keyframes teacherIdle {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  28% { transform: translateX(-50%) translateY(-2px) rotate(-0.35deg); }
  58% { transform: translateX(-50%) translateY(1px) rotate(0.28deg); }
  78% { transform: translateX(-50%) translateY(-1px) rotate(-0.15deg); }
}

@keyframes hairSway {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  33% { transform: rotate(-0.7deg) translateX(-1px); }
  72% { transform: rotate(0.85deg) translateX(1px); }
}

@keyframes clothesBreathe {
  0%, 100% { transform: scaleX(1) translateY(0); }
  50% { transform: scaleX(1.012) translateY(1px); }
}

@keyframes stageGlow {
  0%, 100% { transform: translate(-3%, -1%) scale(.98); opacity: .45; }
  50% { transform: translate(3%, 2%) scale(1.04); opacity: .9; }
}

@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0) scale(.88); opacity: .45; }
  50% { transform: translateY(-9px) scale(1.12); opacity: 1; }
}

@keyframes speakingRing {
  from { transform: scale(.9); opacity: .82; }
  to { transform: scale(1.12); opacity: 0; }
}

@keyframes naturalBlink {
  0%, 91%, 97%, 100% { opacity: 0; }
  93%, 95% { opacity: 1; }
}

@keyframes mouthTalk {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .teacher-stage::after, .teacher-avatar, .teacher-hair, .teacher-clothes, .teacher-blink, .teacher-speaking, .spark { animation: none; }
}