#robot-full {
  display: block;
  padding: 2rem 2rem 2rem 0;
  /* fixed relative to the viewport so it keeps its size regardless of the
     60/40 column split and is allowed to overflow into the text column */
  width: 80vw;
  max-width: 40rem;
  height: auto;
  max-height: 50rem;
  overflow: visible;
  flex-shrink: 0;
}

#robot-hover {
  --robot-size: min(32vw, 8rem);
  --animation-exaggeration: 2;
  --jump-height: calc(var(--robot-size) * 0.5 * var(--animation-exaggeration));

  animation: robot-jump 2.4s ease-in-out infinite;
  will-change: transform;
}

#robot {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: robot-squash 2.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes robot-jump {
  0% {
    transform: translateY(0);
  }
  12% {
    transform: translateY(calc(var(--robot-size) * 0.06));
  }
  22% {
    transform: translateY(calc(var(--jump-height) * -0.45));
  }
  38% {
    transform: translateY(calc(var(--jump-height) * -1));
  }
  55% {
    transform: translateY(calc(var(--jump-height) * -0.8));
  }
  68% {
    transform: translateY(0);
  }
  77% {
    transform: translateY(calc(var(--robot-size) * -0.04));
  }
  88% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes robot-squash {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  12% {
    transform: scaleX(calc(1 + 0.1 * var(--animation-exaggeration)))
      scaleY(calc(1 - 0.1 * var(--animation-exaggeration)));
  }
  22% {
    transform: scaleX(calc(1 - 0.04 * var(--animation-exaggeration)))
      scaleY(calc(1 + 0.08 * var(--animation-exaggeration)));
  }
  40% {
    transform: scaleX(1) scaleY(1);
  }
  58% {
    transform: scaleX(calc(1 - 0.03 * var(--animation-exaggeration)))
      scaleY(calc(1 + 0.05 * var(--animation-exaggeration)));
  }
  68% {
    transform: scaleX(calc(1 + 0.16 * var(--animation-exaggeration)))
      scaleY(calc(1 - 0.14 * var(--animation-exaggeration)));
  }
  77% {
    transform: scaleX(calc(1 - 0.03 * var(--animation-exaggeration)))
      scaleY(calc(1 + 0.05 * var(--animation-exaggeration)));
  }
  88% {
    transform: scaleX(1) scaleY(1);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #robot-hover,
  #robot {
    animation: none;
    transform: none;
  }
}