body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: black;
}

$distance-percents: 20%, 40%, 60%, 80%, 100%; // 定义物体移动路径的百分比

.stage {
  position: relative;

  .hero {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(78, 192, 233, 0.6);
    border: 2px solid var(--primary-color);
    border-top-color: var(--warning-color);
    border-left-color: var(--danger-color);
    border-right-color: var(--danger-color);
    offset-path: var(--d); // 定义物体移动路径
    offset-rotate: 90deg auto; // 使物体头的朝向在路径前方
    transition: 1s;

    &::before {
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 4px;
      height: 4px;
      background: var(--danger-color);
      border-radius: 50%;
    }

    @for $i from 1 through length($distance-percents) {
      &.check-#{$i} {
        offset-distance: nth($distance-percents, $i);
      }
    }
  }

  .checkpoints {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);

    .checkpoint {
      position: absolute;
      width: 18px;
      height: 18px;
      background: var(--warning-color);
      border-radius: 50%;
      offset-path: var(--d); // 检查点分布路径应与物体移动路径重合

      &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        animation: pulse 2s ease-out infinite;
      }

      @for $i from 1 through length($distance-percents) {
        &:nth-child(#{$i}) {
          offset-distance: nth($distance-percents, $i);
        }
      }
    }
  }
}

#go-forth {
  margin-top: 36px;
}

@keyframes pulse {
  50%,
  75% {
    transform: scale(2);
  }

  80%,
  100% {
    opacity: 0;
  }
}
