/* Keep the original illustration; animate its actors and screen surfaces in place. */
.pricing-page .shared-code-hero.pricing-training-hero {
  --training-scene: url('/assets/pricing-plan-robots-20261010.png');
  aspect-ratio: 2048 / 600;
}

/* Both crops are 29% of the 2172 × 724 source, scaled uniformly to banner height. */
.pricing-training-hero .course-training-hero__scene {
  width: 25.48828125%;
  background-size: 344.827586% 100%;
}
.pricing-training-hero .course-training-hero__scene .course-training-hero__part {
  background-size: 344.827586% 100%;
}
.pricing-training-hero .course-training-hero__part--pointing {
  --part-mask: radial-gradient(ellipse 10% 5.8% at 60% 37.1%, #000 48%, #000b 73%, transparent 100%);
  transform-origin: 65% 38%;
  animation: pricing-presenter-point 8s ease-in-out infinite;
  animation-play-state: paused;
}
.pricing-training-hero .course-training-hero__part--teacher-head {
  --part-mask: radial-gradient(ellipse 5.2% 5.8% at 72.7% 29.8%, #000 52%, #000b 75%, transparent 100%);
  transform-origin: 72.7% 35%;
  animation: pricing-presenter-nod 4s ease-in-out infinite;
  animation-play-state: paused;
}
.pricing-training-hero .course-training-hero__part--student-hand {
  --part-mask: radial-gradient(ellipse 3% 3.6% at 54.6% 58.8%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 54% 60.5%;
  animation: pricing-robot-type 1.6s ease-in-out infinite -.35s;
  animation-play-state: paused;
}
.pricing-training-hero .pricing-student-head {
  --part-mask: radial-gradient(ellipse 5.2% 5.5% at 59.2% 53.2%, #000 50%, #000b 74%, transparent 100%);
  transform-origin: 60% 58%;
  animation: pricing-presenter-nod 4s ease-in-out infinite -.6s;
  animation-play-state: paused;
}
.pricing-training-hero .course-training-hero__focus {
  transform-origin: 274px 306px;
  fill: rgb(33 201 240 / .08);
  animation: pricing-plan-focus 8s ease-in-out infinite;
  animation-play-state: paused;
}
.pricing-training-hero .pricing-plan-choice {
  fill: rgb(43 188 255 / .12);
  stroke: #28c4ff;
  stroke-width: 3;
  stroke-linejoin: round;
  opacity: 0;
  animation: pricing-plan-compare 8s ease-in-out infinite 3s;
  animation-play-state: paused;
}
.pricing-training-hero .pricing-plan-choice--middle { animation-delay: 3.9s; }
.pricing-training-hero .pricing-plan-choice--right { animation-delay: 4.8s; }
.pricing-training-hero .pricing-point-feedback {
  fill: rgb(71 205 255 / .08);
  stroke: #29baff;
  stroke-width: 2.2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pricing-point-feedback 8s ease-out infinite;
  animation-play-state: paused;
}
.pricing-page .pricing-training-hero .shared-code-hero__description .pricing-training-hero__phrase {
  display: inline-block;
  font: inherit;
  white-space: nowrap;
}

@keyframes pricing-presenter-point {
  0%, 30%, 60%, 100% { transform: rotate(0); }
  12%, 20%, 42%, 50% { transform: rotate(-3deg) translateY(-1px); }
  72%, 80% { transform: rotate(1.8deg); }
}
@keyframes pricing-presenter-nod {
  0%, 14%, 42%, 68%, 100% { transform: rotate(0) translateY(0); }
  24%, 32%, 52%, 60% { transform: rotate(2deg) translateY(1.3px); }
  80%, 88% { transform: rotate(-1.2deg) translateY(-.8px); }
}
@keyframes pricing-robot-type {
  0%, 12%, 26%, 40%, 54%, 68%, 84%, 100% { transform: translate(0, 0) rotate(0); }
  6%, 33%, 61% { transform: translate(-.6px, -2.6px) rotate(-1.2deg); }
  19%, 47%, 76% { transform: translate(.5px, 1.8px) rotate(.8deg); }
}
@keyframes pricing-plan-focus {
  0%, 70%, 100% { opacity: 0; }
  76%, 92% { opacity: .8; }
}
@keyframes pricing-plan-compare {
  0%, 4%, 15%, 100% { opacity: 0; }
  6%, 12% { opacity: .9; }
}
@keyframes pricing-point-feedback {
  0%, 8%, 29%, 38%, 59%, 68%, 89%, 100% { opacity: 0; transform: scale(.65); }
  12%, 42%, 72% { opacity: .75; transform: scale(.8); }
  23%, 53%, 83% { opacity: 0; transform: scale(1.9); }
}

/* An eight-second input → processing → completion loop, offset between scenes. */
.pricing-training-hero .course-training-hero__scene--practice {
  --work-phase: -1.2s;
  --training-scene: url('/assets/pricing-typing-robots-20261024.jpg');
}
.pricing-training-hero .course-training-hero__scene--practice.is-pricing-rig-ready {
  --training-scene: url('/assets/pricing-typing-stage-20261024.jpg');
}
.pricing-robot-rig {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  visibility: hidden;
}
.is-pricing-rig-ready .pricing-robot-rig { visibility: visible; }
.pricing-rig-part { transform-box: view-box; }
.pricing-rig-part--near {
  transform-origin: 297px 474px;
  animation: pricing-forearm-type 8s ease-in-out infinite -1.2s;
}
.pricing-rig-part--far {
  transform-origin: 247px 407px;
  animation: pricing-forearm-type 8s ease-in-out infinite -1.38s;
  --typing-angle: -5deg;
}
.pricing-rig-part--operator {
  transform-origin: 244px 398px;
  animation: pricing-operator-look 8s ease-in-out infinite -1.2s;
}
.pricing-rig-part--mentor {
  transform-origin: 208px 295px;
  animation: pricing-mentor-look 8s ease-in-out infinite -1.2s;
}
@keyframes pricing-forearm-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, -5deg)); }
  76%, 88% { transform: rotate(-2deg); }
}
@keyframes pricing-operator-look {
  0%, 6%, 36%, 56%, 100% { transform: rotate(0); }
  12%, 28%, 44% { transform: rotate(4deg) translateY(1px); }
  68%, 80% { transform: rotate(-3deg) translateY(-1px); }
  87%, 92% { transform: rotate(2deg); }
}
@keyframes pricing-mentor-look {
  0%, 26%, 58%, 100% { transform: rotate(0); }
  12%, 18% { transform: rotate(3.5deg); }
  38%, 48% { transform: rotate(-2deg); }
  72%, 82% { transform: rotate(4deg) translateY(1px); }
}
.pricing-terminal__surface { fill: #f0faff; }
.pricing-terminal__header { stroke: #a9dff2; stroke-width: 3; }
.pricing-terminal__line, .pricing-terminal__progress, .pricing-estimate-row {
  fill: none;
  stroke: #238df0;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pricing-type-line 8s steps(12, end) infinite;
  animation-delay: calc(var(--work-phase, 0s) + var(--line-delay, 0s));
}
.pricing-terminal__line--two { --line-delay: .65s; stroke: #35b6d5; }
.pricing-terminal__line--three { --line-delay: 1.3s; }
.pricing-terminal__progress {
  stroke: #13b9ae;
  stroke-width: 5;
  animation-name: pricing-progress;
  animation-timing-function: ease-in-out;
}
.pricing-terminal__caret {
  fill: none;
  stroke: #176cd6;
  stroke-width: 2;
  animation: pricing-caret .7s steps(1, end) infinite;
}
.pricing-keyboard rect {
  fill: #47dcf4;
  opacity: 0;
  animation: pricing-keypress 1.6s ease-out infinite;
  animation-delay: var(--work-phase, 0s);
}
.pricing-keyboard rect:nth-child(2) { animation-delay: calc(var(--work-phase, 0s) + .2s); }
.pricing-keyboard rect:nth-child(3) { animation-delay: calc(var(--work-phase, 0s) + .55s); }
.pricing-keyboard rect:nth-child(4) { animation-delay: calc(var(--work-phase, 0s) + .85s); }
.pricing-data-trail {
  fill: none;
  stroke: #32c7e3;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .12 .88;
  opacity: 0;
  animation: pricing-data-transfer 8s linear infinite;
  animation-delay: var(--work-phase, 0s);
}
.pricing-board-check {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pricing-progress 8s ease-in-out infinite;
}
.pricing-board-check--two { animation-delay: .6s; }
.pricing-estimate-row {
  stroke: #30a8ef;
  stroke-width: 8;
  opacity: .65;
  animation-name: pricing-estimate-fill;
  animation-timing-function: ease-in-out;
}
.pricing-estimate-row--two { --line-delay: .45s; }
.pricing-estimate-row--three { --line-delay: .9s; }
.pricing-estimate-row--four { --line-delay: 1.35s; }
.pricing-complete-ring {
  fill: none;
  stroke: #20bfbc;
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pricing-complete 8s ease-out infinite;
  animation-delay: var(--work-phase, 0s);
}
.pricing-work-status {
  position: absolute;
  top: 91%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  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%);
}
.pricing-work-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2cb5da;
  animation: pricing-status-dot 1.6s ease-in-out infinite;
}
.pricing-work-status__labels { display: grid; }
.pricing-work-status__labels > span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: pricing-status-input 8s step-end infinite;
  animation-delay: var(--work-phase, 0s);
}
.pricing-work-status__labels .pricing-work-status__input { opacity: 1; }
.pricing-work-status__labels .pricing-work-status__process { animation-name: pricing-status-process; }
.pricing-work-status__labels .pricing-work-status__done { color: #128a82; animation-name: pricing-status-done; }
.pricing-motion-toggle {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #48687c;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transform: translateX(-50%);
}
.pricing-motion-toggle[hidden] { display: none; }
.pricing-motion-toggle:hover { background: #eaf5fa; }
.pricing-motion-toggle:focus-visible { outline: 2px solid #2582e8; outline-offset: 2px; }
.pricing-motion-toggle__icon { width: 8px; height: 9px; border-inline: 2px solid currentColor; }
.pricing-motion-toggle[aria-pressed="true"] .pricing-motion-toggle__icon {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left: 8px solid currentColor;
  border-right: 0;
}

@keyframes pricing-type-line {
  0%, 5% { stroke-dashoffset: 1; }
  24%, 82% { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: 1; }
}
@keyframes pricing-progress {
  0%, 42% { stroke-dashoffset: 1; opacity: 1; }
  70%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pricing-estimate-fill {
  0%, 44% { stroke-dashoffset: 1; opacity: .65; }
  58%, 82% { stroke-dashoffset: 0; opacity: .65; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pricing-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes pricing-keypress {
  0%, 25%, 50%, 100% { opacity: 0; }
  8%, 35% { opacity: .85; }
}
@keyframes pricing-data-transfer {
  0%, 35% { stroke-dashoffset: 1; opacity: 0; }
  40% { opacity: .85; }
  65% { stroke-dashoffset: -2; opacity: .85; }
  70%, 100% { stroke-dashoffset: -2; opacity: 0; }
}
@keyframes pricing-complete {
  0%, 72% { opacity: 0; transform: scale(.85); }
  77% { opacity: .8; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes pricing-status-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pricing-status-input { 0%, 100% { opacity: 1; } 42% { opacity: 0; } }
@keyframes pricing-status-process { 0%, 76%, 100% { opacity: 0; } 42% { opacity: 1; } }
@keyframes pricing-status-done { 0%, 100% { opacity: 0; } 76% { opacity: 1; } }

/* The shared visibility controller pauses every decorative layer together. */
.pricing-training-hero .course-training-hero__stage * { animation-play-state: paused; }
.pricing-training-hero.is-training-active .course-training-hero__stage * { animation-play-state: running; }

@media (min-width: 1024px) {
  .pricing-page .pricing-training-hero .shared-code-hero__copy {
    top: 50%;
    width: min(52%, 1100px);
  }
}

@media (max-width: 1023px) {
  .pricing-page .shared-code-hero.pricing-training-hero { aspect-ratio: auto; }
  .pricing-training-hero .course-training-hero__scene {
    width: 100%;
    aspect-ratio: 629.88 / 724;
    contain: layout;
  }
  .pricing-training-hero .course-training-hero__stage { margin-bottom: 34px; }
  .pricing-work-status { top: 100%; }
  .pricing-motion-toggle { position: relative; left: auto; bottom: auto; margin: 8px 16px -8px auto; transform: none; }
}

@media (max-width: 767px) {
  .pricing-page .pricing-training-hero .shared-code-hero__description > span {
    display: block;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-training-hero .course-training-hero__stage * { animation: none !important; }
  .pricing-training-hero .course-training-hero__scene--practice.is-pricing-rig-ready { --training-scene: url('/assets/pricing-typing-robots-20261024.jpg'); }
  .pricing-training-hero .pricing-robot-rig { display: none; }
  .pricing-training-hero :is(.pricing-terminal, .pricing-keyboard, .pricing-data-trail, .pricing-board-check, .pricing-estimate-rows, .pricing-complete-ring, .pricing-work-status, .pricing-motion-toggle) { display: none; }
}