/* The canvas occupies a reserved floor area, independent of the purchase CTA. */
.robot-traveller {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 150px;
  height: 166px;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity 450ms ease;
}
.robot-canvas { width: 100%; height: 100%; display: block; opacity: 0; }
.robot-traveller::before {
  content: '';
  position: absolute;
  width: 46%;
  height: 7px;
  bottom: 6px;
  left: 27%;
  background: radial-gradient(ellipse, #000b, transparent 70%);
}
.robot-traveller.ready .robot-canvas { opacity: 1; }
.robot-stage { height: 190px; }
@media (max-width: 760px) {
  .robot-traveller { width: 112px; height: 130px; }
  .robot-stage { height: 159px; }
}

.robot-traveller.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .robot-traveller { transition: none; } }