:root {
  --panel-overlap: 90px;
  --panel-reserve: 90px;
}

html {
  background: #101112;
}

body.module-parallax main {
  position: relative;
  overflow: clip;
  background: #101112;
}

body.module-parallax .parallax-panel {
  --panel-shift: 0px;
  position: relative;
  isolation: isolate;
  backface-visibility: hidden;
}

body.module-parallax .parallax-incoming {
  margin-top: calc(-1 * var(--panel-overlap));
  transform: translate3d(0, var(--panel-shift), 0);
  transform-origin: 50% 0;
}

body.module-parallax .parallax-outgoing::after {
  content: "";
  display: block;
  height: var(--panel-reserve);
  pointer-events: none;
}

body.module-parallax .parallax-panel.parallax-active {
  will-change: transform;
}

body.module-parallax .nav {
  z-index: 1000;
}

@media (max-width: 760px) {
  :root {
    --panel-overlap: 36px;
    --panel-reserve: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.module-parallax .parallax-incoming {
    --panel-shift: 0px !important;
    transform: none !important;
    margin-top: 0;
  }

  body.module-parallax .parallax-outgoing::after {
    height: 0;
  }
}