main {
  transform-origin:50% 42%;
}

html.page-transition-enter main {
  animation:course-page-enter 260ms cubic-bezier(.22, .8, .28, 1) both;
}

html.page-transition-leaving main {
  pointer-events:none;
  will-change:opacity, transform;
  animation:course-page-leave 180ms cubic-bezier(.4, 0, 1, 1) both;
}

html.page-transition-leaving.page-transition-back main {
  animation-name:course-page-leave-back;
}

@keyframes course-page-enter {
  from { opacity:.68; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}

@keyframes course-page-leave {
  from { opacity:1; transform:none; }
  to { opacity:.15; transform:translateY(-6px); }
}

@keyframes course-page-leave-back {
  from { opacity:1; transform:none; }
  to { opacity:.15; transform:translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-presenter-motion="enabled"]) main,
  html:not([data-presenter-motion="enabled"]).page-transition-leaving main {
    animation:none !important;
    transition:none !important;
  }
}