@media (prefers-reduced-motion: no-preference) {
  html:not(.no-sliding) [slide-enter],
  html:not(.no-sliding) .slide-enter,
  html:not(.no-sliding)
    .markdown-body
    .prose
    > *:not(:has(.table-of-contents)) {
    --enter-stage: 0;
    --enter-step: 90ms;
    --enter-initial: 0ms;

    animation: sakura-fade-up 1s both 1;
    animation-delay: calc(
      var(--enter-initial) + var(--enter-stage) * var(--enter-step)
    );
  }

  .markdown-body .prose > * {
    @for $i from 1 to 20 {
      &:nth-child(#{$i}) {
        --enter-stage: #{$i} !important;
      }
    }
  }
}