/* Articulated classroom actors use native 2132 × 738 source coordinates. */
.course-classroom-hero .is-training-rig-ready {
  --training-scene: url('/assets/course-classroom-stage-20261024.jpg');
}
.classroom-rig {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.is-training-rig-ready .classroom-rig { visibility: visible; }
.classroom-part {
  transform-box: view-box;
  transform-origin: var(--pivot-x) var(--pivot-y);
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--actor-delay, 0s);
}
.classroom-part--head { animation-name: classroom-attention; }
.classroom-part--point { animation-name: classroom-point; }
.classroom-part--type { animation-name: classroom-type; --typing-angle: 5deg; }
.classroom-part--student-one-near,
.classroom-part--student-one-far,
.classroom-part--operator-near,
.classroom-part--operator-far { --typing-angle: -5deg; }
.classroom-part--mentor-head { --nod-angle: 4deg; }
.classroom-part--student-two-head { --nod-angle: -3deg; }
.classroom-part--student-three-head { --nod-angle: -4deg; }
.classroom-screen { z-index: 1; }
.classroom-terminal__surface { fill: #f1faff; }
.classroom-terminal__header { stroke: #b9deee; stroke-width: 2; }
.classroom-terminal__line,
.classroom-terminal__progress {
  fill: none;
  stroke: #228ef0;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: classroom-type-line 8s steps(12, end) infinite;
  animation-delay: calc(var(--screen-phase, 0s) + var(--line-delay, 0s));
}
.classroom-terminal__line--two { --line-delay: .5s; stroke: #27b9d2; }
.classroom-terminal__line--three { --line-delay: 1s; }
.classroom-terminal__progress { stroke: #12b5a6; animation-name: classroom-progress; animation-timing-function: ease-in-out; }
.classroom-terminal__caret { stroke: #1b70ce; stroke-width: 1.5; animation: classroom-caret .7s step-end infinite; }
.classroom-keyboard path { fill: #47d7f2; opacity: 0; animation: classroom-keypress 1.4s ease-out infinite; }
.classroom-keyboard path:nth-child(2) { animation-delay: -.2s; }
.classroom-keyboard path:nth-child(3) { animation-delay: -.5s; }
.classroom-diagram-flow { fill: none; stroke: #21b9f0; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 30; opacity: .7; animation: classroom-flow 3s linear infinite; }
.classroom-diagram-focus,
.classroom-point-feedback,
.classroom-completion { fill: none; stroke: #28bfe4; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.classroom-diagram-focus { animation: classroom-focus 8s ease-out infinite; }
.classroom-point-feedback { animation: classroom-focus 8s ease-out infinite 1.4s; }
.classroom-task-check { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: classroom-progress 8s ease-in-out infinite -1.4s; }
.classroom-task-check--two { animation-delay: -.8s; }
.classroom-task-check--three { animation-delay: -.2s; }
.classroom-completion { animation: classroom-complete 8s ease-out infinite -1.4s; }
.classroom-status {
  position: absolute;
  z-index: 3;
  top: 91%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 7px 12px;
  border: 1px solid #d5edf5;
  border-radius: 20px;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 3px 12px rgb(23 102 153 / .06);
  color: #34728f;
  font-size: clamp(10px, .78vw, 14px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transform: translateX(-50%);
}
.classroom-status i { width: 6px; height: 6px; border-radius: 50%; background: #2cb5da; animation: classroom-caret 1.6s ease-in-out infinite; }
.classroom-status__labels { display: grid; }
.course-classroom-hero .classroom-status span { max-width: none; white-space: nowrap; text-wrap: nowrap; word-break: normal; overflow-wrap: normal; }
.classroom-status__labels > span { grid-area: 1 / 1; opacity: 0; animation: classroom-status-input 8s step-end infinite; animation-delay: var(--status-phase, 0s); }
.classroom-status__labels .classroom-status__input { opacity: 1; }
.classroom-status__labels .classroom-status__process { animation-name: classroom-status-process; }
.classroom-status__labels .classroom-status__done { animation-name: classroom-status-done; color: #128a82; }
.course-classroom-hero .course-training-hero__scene--practice { --status-phase: -1.4s; }
.course-classroom-hero .course-training-hero__stage * { animation-play-state: paused; }
.course-classroom-hero.is-training-active .course-training-hero__stage * { animation-play-state: running; }

@keyframes classroom-type {
  0%, 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%, 54%, 60%, 68%, 100% { transform: rotate(0); }
  3%, 9%, 15%, 21%, 27%, 33%, 39%, 45%, 51%, 57% { transform: rotate(var(--typing-angle)); }
  76%, 88% { transform: rotate(calc(var(--typing-angle) * .35)); }
}
@keyframes classroom-attention {
  0%, 6%, 36%, 56%, 100% { transform: rotate(0); }
  12%, 28%, 44% { transform: rotate(var(--nod-angle, 3deg)) translateY(.7px); }
  68%, 80% { transform: rotate(-2deg); }
  87%, 92% { transform: rotate(2deg); }
}
@keyframes classroom-point {
  0%, 30%, 60%, 100% { transform: rotate(0); }
  12%, 20%, 42%, 50% { transform: rotate(-4.5deg); }
  72%, 80% { transform: rotate(2deg); }
}
@keyframes classroom-type-line { 0%, 5% { stroke-dashoffset: 1; } 24%, 82% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }
@keyframes classroom-progress { 0%, 42% { stroke-dashoffset: 1; opacity: 1; } 70%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes classroom-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .2; } }
@keyframes classroom-keypress { 0%, 25%, 50%, 100% { opacity: 0; } 8%, 35% { opacity: .85; } }
@keyframes classroom-flow { to { stroke-dashoffset: -152; } }
@keyframes classroom-focus { 0%, 5%, 50%, 100% { opacity: 0; transform: scale(.8); } 14%, 30% { opacity: .8; } 42% { opacity: 0; transform: scale(1.25); } }
@keyframes classroom-complete { 0%, 72% { opacity: 0; transform: scale(.85); } 77% { opacity: .8; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes classroom-status-input { 0%, 100% { opacity: 1; } 42% { opacity: 0; } }
@keyframes classroom-status-process { 0%, 76%, 100% { opacity: 0; } 42% { opacity: 1; } }
@keyframes classroom-status-done { 0%, 100% { opacity: 0; } 76% { opacity: 1; } }

@media (max-width: 1023px) {
  .course-classroom-hero .course-training-hero__stage { margin-bottom: 34px; }
  .course-classroom-hero .course-training-hero__scene { contain: layout; }
  .course-classroom-hero .course-training-hero__scene--lecture { aspect-ratio: 724.88 / 738; }
  .course-classroom-hero .course-training-hero__scene--practice { aspect-ratio: 618.28 / 738; }
  .classroom-status { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .course-classroom-hero .is-training-rig-ready { --training-scene: url('/assets/course-training-robots-20261010.png'); }
  .course-classroom-hero :is(.classroom-rig, .classroom-screen, .classroom-status) { display: none; }
  .course-classroom-hero .course-training-hero__stage { margin-bottom: 0; }
}