* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.plane {
  position: absolute;
  left: 0;
  bottom: 82px;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}

.runner-shell {
  position: absolute;
  left: -72px;
  bottom: 66px;
  width: 26px;
  height: 42px;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.runner-shell.active {
  opacity: 1;
  animation: travel 4.2s linear forwards;
}

.runner-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: float 0.32s infinite alternate ease-in-out;
}

.limb-front,
.limb-back {
  transform-box: fill-box;
  transform-origin: top center;
}

.arm-front {
  animation: armFront 0.32s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.arm-back {
  animation: armBack 0.32s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.leg-front {
  animation: legFront 0.32s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.leg-back {
  animation: legBack 0.32s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes travel {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(100vw + 140px), 0, 0);
  }
}

@keyframes float {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(1px);
  }
}

@keyframes armFront {
  from {
    transform: rotate(22deg);
  }
  to {
    transform: rotate(-20deg);
  }
}

@keyframes armBack {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(22deg);
  }
}

@keyframes legFront {
  from {
    transform: rotate(24deg);
  }
  to {
    transform: rotate(-18deg);
  }
}

@keyframes legBack {
  from {
    transform: rotate(-18deg);
  }
  to {
    transform: rotate(24deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .runner-shell,
  .runner-svg,
  .arm-front,
  .arm-back,
  .leg-front,
  .leg-back {
    animation: none !important;
  }

  .runner-shell.active {
    opacity: 1;
  }
}