// zmp-dive
.router-transition-zmp-dive-forward,
.router-transition-zmp-dive-backward {
  background: var(--zmp-page-bg-color);
  perspective: 1200px;
  .page-next,
  .page-current,
  .page-previous:not(.stacked) {
    pointer-events: none;
  }
}
.router-transition-zmp-dive-forward {
  .page-next {
    animation: zmp-dive-next-to-current var(--zmp-page-dive-transition-duration) forwards;
  }
  .page-current {
    animation: zmp-dive-current-to-prev var(--zmp-page-dive-transition-duration) forwards;
  }
}
.router-transition-zmp-dive-backward {
  .page-current {
    animation: zmp-dive-current-to-next var(--zmp-page-dive-transition-duration) forwards;
  }
  .page-previous {
    animation: zmp-dive-prev-to-current var(--zmp-page-dive-transition-duration) forwards;
  }
}
@keyframes zmp-dive-next-to-current {
  from {
    opacity: 0;
    transform: translateZ(-150px);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateZ(0px);
  }
}
@keyframes zmp-dive-current-to-next {
  from {
    opacity: 1;
    transform: translateZ(0px);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 0;
    transform: translateZ(-150px);
  }
}
@keyframes zmp-dive-current-to-prev {
  from {
    transform: translateZ(0px);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 0;
    transform: translateZ(150px);
  }
}
@keyframes zmp-dive-prev-to-current {
  from {
    opacity: 0;
    transform: translateZ(150px);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateZ(0px);
  }
}