.wipe {
  position: fixed; inset: 0; left: -20%; width: 140%; z-index: 500;
  pointer-events: none; background: var(--wipe, var(--accent));
  transform: translateX(-110%) skewX(-8deg); will-change: transform;
}
.wipe.page-exit-fwd { animation: pageExitFwd .36s cubic-bezier(.65,0,.35,1) both; }
.wipe.page-exit-back { animation: pageExitBack .36s cubic-bezier(.65,0,.35,1) both; }
.wipe.page-enter-fwd { animation: pageEnterFwd .32s cubic-bezier(.65,0,.35,1) both; }
.wipe.page-enter-back { animation: pageEnterBack .32s cubic-bezier(.65,0,.35,1) both; }
@keyframes pageExitFwd { from { transform:translateX(-110%) skewX(-8deg) } to { transform:translateX(0) skewX(-8deg) } }
@keyframes pageExitBack { from { transform:translateX(110%) skewX(8deg) } to { transform:translateX(0) skewX(8deg) } }
@keyframes pageEnterFwd { from { transform:translateX(0) skewX(-8deg) } to { transform:translateX(110%) skewX(-8deg) } }
@keyframes pageEnterBack { from { transform:translateX(0) skewX(8deg) } to { transform:translateX(-110%) skewX(8deg) } }
html.page-arriving .wipe { transform: translateX(0) skewX(-8deg); }