// zmp-parallax
.router-transition-zmp-parallax-forward {
  .page-next {
    animation: zmp-parallax-next-to-current var(--zmp-page-parallax-transition-duration) forwards;
  }
  .page-current {
    animation: zmp-parallax-current-to-prev var(--zmp-page-parallax-transition-duration) forwards;
  }
}
.router-transition-zmp-parallax-backward {
  .page-current {
    animation: zmp-parallax-current-to-next var(--zmp-page-parallax-transition-duration) forwards;
  }
  .page-previous {
    animation: zmp-parallax-prev-to-current var(--zmp-page-parallax-transition-duration) forwards;
  }
}
.router-transition-zmp-parallax-forward,
.router-transition-zmp-parallax-backward {
  .page-next,
  .page-current,
  .page-previous:not(.stacked) {
    pointer-events: none;
  }
}
@keyframes zmp-parallax-next-to-current {
  from {
    .ltr({
      transform: translateX(100%);
    });
    .rtl({
      transform: translateX(-100%);
    });
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes zmp-parallax-current-to-next {
  from {
    transform: translateX(0%);
  }
  to {
    .ltr({
      transform: translateX(100%);
    });
    .rtl({
      transform: translateX(-100%);
    });
  }
}
@keyframes zmp-parallax-current-to-prev {
  from {
    transform: translateX(0%);
  }
  to {
    .ltr({
      transform: translateX(-20%);
    });
    .rtl({
      transform: translateX(20%);
    });
  }
}
@keyframes zmp-parallax-prev-to-current {
  from {
    .ltr({
      transform: translateX(-20%);
    });
    .rtl({
      transform: translateX(20%);
    });
  }
  to {
    transform: translateX(-0%);
  }
}