.ws-page-transition-stage {
  position: relative;
  width: 100%;
  perspective: 1200px;
  perspective-origin: 50% 36%;
  transform-style: preserve-3d;
  isolation: isolate;
}

.ws-page-transition-stage::before {
  content: "";
  position: absolute;
  inset: -18px max(12px, 3vw);
  z-index: -1;
  pointer-events: none;
  border-radius: 18px;
  background:
    radial-gradient(42% 56% at 50% 18%, rgba(118, 92, 255, 0.22), transparent 70%),
    radial-gradient(34% 42% at 72% 22%, rgba(80, 205, 255, 0.12), transparent 72%);
  opacity: 0;
  transform: translateZ(-80px) scale(0.96);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ws-page-transition-panel {
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

html.ws-page-dir-forward {
  --ws-page-enter-rotate: 10deg;
  --ws-page-enter-x: 22px;
  --ws-page-enter-z: -44px;
  --ws-page-exit-rotate: -8deg;
  --ws-page-exit-x: -18px;
  --ws-page-exit-z: -52px;
}

html.ws-page-dir-reverse {
  --ws-page-enter-rotate: -10deg;
  --ws-page-enter-x: -22px;
  --ws-page-enter-z: -44px;
  --ws-page-exit-rotate: 8deg;
  --ws-page-exit-x: 18px;
  --ws-page-exit-z: -52px;
}

html.ws-page-will-enter .ws-page-transition-panel {
  opacity: 0;
  filter: blur(6px);
  transform:
    rotateY(var(--ws-page-enter-rotate, 10deg))
    translate3d(var(--ws-page-enter-x, 22px), 0, var(--ws-page-enter-z, -44px))
    scale(0.985);
}

html.ws-page-entering .ws-page-transition-stage::before,
html.ws-page-leaving .ws-page-transition-stage::before {
  opacity: 1;
  transform: translateZ(-56px) scale(1);
}

html.ws-page-entering .ws-page-transition-panel {
  opacity: 1;
  filter: blur(0);
  transform: rotateY(0) translate3d(0, 0, 0) scale(1);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

html.ws-page-leaving .ws-page-transition-panel {
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
  transform:
    rotateY(var(--ws-page-exit-rotate, -8deg))
    translate3d(var(--ws-page-exit-x, -18px), 0, var(--ws-page-exit-z, -52px))
    scale(0.985);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

html.ws-page-transitioning,
html.ws-page-transitioning body {
  cursor: progress;
}

html.ws-page-transitioning .ws-page-transition-panel {
  user-select: none;
}

.ws-page-transition-panel:focus {
  outline: none;
}

@media (max-width: 1024px) {
  .ws-page-transition-stage {
    perspective: 980px;
  }

  html.ws-page-dir-forward {
    --ws-page-enter-rotate: 7deg;
    --ws-page-enter-x: 16px;
    --ws-page-enter-z: -34px;
    --ws-page-exit-rotate: -6deg;
    --ws-page-exit-x: -14px;
    --ws-page-exit-z: -38px;
  }

  html.ws-page-dir-reverse {
    --ws-page-enter-rotate: -7deg;
    --ws-page-enter-x: -16px;
    --ws-page-enter-z: -34px;
    --ws-page-exit-rotate: 6deg;
    --ws-page-exit-x: 14px;
    --ws-page-exit-z: -38px;
  }
}

@media (max-width: 520px) {
  .ws-page-transition-stage {
    perspective: 760px;
  }

  .ws-page-transition-stage::before {
    inset: -10px 8px;
    border-radius: 12px;
  }

  html.ws-page-dir-forward {
    --ws-page-enter-rotate: 4deg;
    --ws-page-enter-x: 8px;
    --ws-page-enter-z: -18px;
    --ws-page-exit-rotate: -3deg;
    --ws-page-exit-x: -8px;
    --ws-page-exit-z: -22px;
  }

  html.ws-page-dir-reverse {
    --ws-page-enter-rotate: -4deg;
    --ws-page-enter-x: -8px;
    --ws-page-enter-z: -18px;
    --ws-page-exit-rotate: 3deg;
    --ws-page-exit-x: 8px;
    --ws-page-exit-z: -22px;
  }

  html.ws-page-will-enter .ws-page-transition-panel,
  html.ws-page-leaving .ws-page-transition-panel {
    filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ws-page-will-enter .ws-page-transition-panel,
  html.ws-page-entering .ws-page-transition-panel,
  html.ws-page-leaving .ws-page-transition-panel {
    filter: none;
    transform: none;
  }

  html.ws-page-entering .ws-page-transition-panel,
  html.ws-page-leaving .ws-page-transition-panel {
    transition: opacity 160ms ease;
  }

  .ws-page-transition-stage::before {
    display: none;
  }
}