#course-grid {
  perspective: 1400px;
  transform-origin: center top;
  will-change: transform, opacity;
}

#course-grid.htmx-swapping {
  animation: deck-roll-away 260ms cubic-bezier(.55, 0, 1, .45) both;
  pointer-events: none;
}

#course-grid.htmx-settling {
  animation: deck-roll-in 340ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes deck-roll-away {
  from {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
  to {
    opacity: 0;
    transform: translateY(-28px) rotateX(10deg);
  }
}

@keyframes deck-roll-in {
  from {
    opacity: 0;
    transform: translateY(28px) rotateX(-10deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #course-grid.htmx-swapping,
  #course-grid.htmx-settling {
    animation-duration: 1ms;
  }
}