li {
  animation-name: grow;
  animation-timeline: view(80% auto);
  animation-fill-mode: forwards;

  transform-origin: bottom left;
  scale: 0.5;
  opacity: 0;
  translate: -100px 0;
}

@keyframes grow {
  to {
    scale: 1;
    opacity: 1;
    translate: 0;
  }
}


@layer setup {
  html {
    font: 110%/1.5 system-ui;
    font-variation-settings: "wght" 350, "wdth" 80;
    padding: 1rem;
  }
  li {
    margin-block-end: 0.5rem;
  }
}