.page-transitioning {
  pointer-events: none;
}

html.page-transition-js:not(.page-transition-entered)
  [data-page-transition] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

@keyframes lodcerPageEnter {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes lodcerPageExit {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -20px, 0); }
}

.page-transition-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  width: 100%; height: 2px;
  background: var(--accent-primary);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform, opacity;
}

[data-page-transition] {
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html.page-transition-js:not(.page-transition-entered) [data-page-transition] {
    opacity: 1; transform: none;
  }
  .page-transition-progress { display: none; }
  [data-page-transition] { will-change: auto; }
}