/* ---- page transition: halves close in, then the black fades away ---- */
.pt{position:fixed;inset:0;z-index:300;pointer-events:none;display:none}
.pt.on{display:block}
.pt span{position:fixed;top:0;bottom:0;width:50.2vw;background:#000;will-change:transform;
  transition:transform .6s cubic-bezier(.65,0,.2,1)}
.pt span:first-child{left:0;transform:translateX(-101%)}
.pt span:last-child{right:0;transform:translateX(101%)}
/* closed = the two halves meet in the middle */
.pt.closed{pointer-events:all}
.pt.closed span{transform:none}
/* reveal = the black sheet fades out; the page is already there underneath */
.pt.fade{opacity:0;transition:opacity .5s ease}
@media (prefers-reduced-motion:reduce){.pt{display:none!important}}