@media (prefers-reduced-motion: no-preference) {
  .course-enter {
    animation: course-arrival 480ms cubic-bezier(.2, .7, .3, 1) backwards;
  }

  .course-enter:nth-child(2) {
    animation-delay: 55ms;
  }

  @media (hover: hover) {
    main :is(.btn, .download, .why-card) {
      transition: translate 180ms ease, box-shadow 180ms ease;
    }

    main :is(.btn, .download, .why-card):hover {
      translate: 0 -2px;
    }
  }
}

@keyframes course-arrival {
  from { opacity: .78; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}