.hsc-rise {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes hsc-rise {
      from {
        opacity: 0;
        transform: translateY(36px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hsc-rise {
      animation: hsc-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}