:root {
  --tectonic-navigation-transition-color: var(--tectonic-menu-red, #c61927);
  --tectonic-navigation-transition-ease: cubic-bezier(0.76, 0, 0.24, 1);
}

.tectonic-navigation-transition {
  position: fixed;
  inset: 0;
  z-index: 24000;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--tectonic-navigation-transition-color);
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
  contain: strict;
  will-change: auto;
}

html.is-tectonic-navigation-transition .tectonic-navigation-transition {
  pointer-events: auto;
  visibility: visible;
  will-change: transform;
}

html.is-tectonic-navigation-transition,
html.is-tectonic-navigation-transition body {
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  .tectonic-navigation-transition {
    will-change: auto;
  }
}