main {
  font-weight: 300;
  width: 90vw;
  max-width: 40em;
  margin: 0 auto;
  padding: 4rem 0;
}

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll(block root);
}
@keyframes roted-box {
  from {
    transform: rotate(0deg) scale(0);
  }
  to {
    transform: rotate(180deg) scale(1);
  }
}
#box {
  width: 50px;
  aspect-ratio: 1;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 25%;

  /* animation: roted-box 1s linear forwards; */
  animation: roted-box auto linear;
  animation-timeline: scroll(block root);
}