/* Reuse the course motions for the report presenter and office robot. */
.usecase-page .shared-code-hero.usecase-training-hero {
  --training-scene: url('/assets/usecase-office-robots-20261010.png');
  aspect-ratio: 2048 / 600;
}

/* Each 34% crop is 723.52 × 739, scaled uniformly to the banner height. */
.usecase-training-hero .course-training-hero__scene {
  width: 28.683187%;
  background-size: 294.117647% 100%;
}
.usecase-training-hero .course-training-hero__scene .course-training-hero__part {
  background-size: 294.117647% 100%;
}
.usecase-training-hero .course-training-hero__scene--lecture {
  background-image: url('/assets/usecase-report-stage-20261010.png');
  -webkit-mask-image: linear-gradient(90deg, #000 96%, transparent);
  mask-image: linear-gradient(90deg, #000 96%, transparent);
}
.usecase-training-hero .course-training-hero__scene--practice {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%);
  mask-image: linear-gradient(90deg, transparent, #000 8%);
}
.usecase-training-hero .course-training-hero__part--pointing {
  --part-mask: url('/assets/usecase-presenter-arm-mask.svg');
  transform-origin: 73.39% 33.29%;
  animation: usecase-presenter-explain 6.4s ease-in-out infinite;
  animation-play-state: paused;
}
.usecase-training-hero .course-training-hero__part--teacher-head {
  --part-mask: radial-gradient(ellipse 5.9% 6.4% at 78.6% 28.3%, #000 52%, #000b 75%, transparent 100%);
  transform-origin: 78.78% 33.29%;
  animation: usecase-presenter-nod 6.4s ease-in-out infinite;
  animation-play-state: paused;
}
.usecase-training-hero .course-training-hero__part--report-hand {
  --part-mask: radial-gradient(ellipse 4.5% 3% at 71.8% 45.2%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 73.7% 44.8%;
  animation: usecase-presenter-palm 6.4s ease-in-out infinite;
  animation-play-state: paused;
}
.usecase-training-hero .usecase-report-step {
  animation: usecase-report-emphasis 6.4s ease-in-out infinite;
  animation-play-state: paused;
  opacity: 0;
}
.usecase-training-hero .usecase-report-row { fill: #1bcefa; }
.usecase-training-hero .usecase-report-step circle {
  fill: none;
  stroke: #43d3ed;
  stroke-width: 3;
  animation: none;
  opacity: 1;
}
.usecase-training-hero .usecase-report-step:nth-child(2) { animation-delay: 1.35s; }
.usecase-training-hero .usecase-report-step:nth-child(3) { animation-delay: 2.7s; }
.usecase-training-hero .course-training-hero__part--mentor-head {
  --part-mask: radial-gradient(ellipse 6.4% 7.8% at 42% 37.8%, #000 54%, #000b 75%, transparent 100%);
  transform-origin: 42% 44%;
}
.usecase-training-hero .course-training-hero__part--typing-left {
  --part-mask: radial-gradient(ellipse 5.1% 4.2% at 45.7% 56.7%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 41% 60%;
}
.usecase-training-hero .course-training-hero__part--typing-right {
  --part-mask: radial-gradient(ellipse 5.4% 4.2% at 53.8% 53.3%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 50% 57%;
}
.usecase-page .usecase-training-hero .shared-code-hero__description .usecase-training-hero__phrase {
  display: inline-block;
  font: inherit;
  white-space: nowrap;
}

@keyframes usecase-presenter-explain {
  0%, 6%, 37%, 45%, 80%, 100% { transform: rotate(0); }
  16%, 24% { transform: rotate(6deg); }
  58%, 66% { transform: rotate(-6deg); }
}
@keyframes usecase-presenter-nod {
  0%, 6%, 30%, 50%, 75%, 100% { transform: rotate(0); }
  16%, 24%, 58%, 66% { transform: rotate(1.3deg); }
  37%, 45% { transform: rotate(-.8deg); }
}
@keyframes usecase-presenter-palm {
  0%, 22%, 56%, 100% { transform: rotate(0); }
  34%, 44% { transform: rotate(1.8deg); }
  72%, 84% { transform: rotate(-1.4deg); }
}
@keyframes usecase-report-emphasis {
  0%, 8%, 32%, 100% { opacity: 0; }
  16%, 24% { opacity: .85; }
}

@media (min-width: 1024px) {
  .usecase-page .usecase-training-hero .shared-code-hero__copy {
    top: 50%;
    width: min(52%, 1100px);
  }
}
@media (max-width: 1023px) {
  .usecase-page .shared-code-hero.usecase-training-hero { aspect-ratio: auto; }
  .usecase-training-hero .course-training-hero__scene {
    width: 100%;
    aspect-ratio: 723.52 / 739;
  }
}
@media (max-width: 767px) {
  .usecase-page .usecase-training-hero .shared-code-hero__description > span { display: block; }
}