/* ============================================================
   THE SEAM · page transition
   Ink grows out of one hairline at the centre of the screen and,
   on the next page, withdraws back into it. No glow, no panels,
   nothing that can be left at the edges.
   ============================================================ */
html.tr-in::before{content:'';position:fixed;inset:0;z-index:99990;pointer-events:none;background:#040405;
  animation:seamOpen .6s cubic-bezier(.7,0,.2,1) .1s both}
html.tr-in::after{content:'';position:fixed;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;z-index:99991;pointer-events:none;
  background:rgba(var(--tr-c,124,92,255),.6);animation:seamLine .95s ease both}
@keyframes seamOpen{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 50% 0 50%);visibility:hidden}}
@keyframes seamLine{0%,62%{opacity:1}100%{opacity:0;visibility:hidden}}

.tr-out{position:fixed;inset:0;z-index:99990;pointer-events:none}
.tr-out .ink{position:absolute;inset:0;background:#040405;clip-path:inset(0 50% 0 50%);transition:clip-path .38s cubic-bezier(.7,0,.2,1) .02s}
.tr-out .ln{position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:rgba(var(--tr-c,124,92,255),.6);
  opacity:0;transform:scaleY(0);transition:opacity .2s ease,transform .36s cubic-bezier(.7,0,.2,1)}
.tr-out.on .ink{clip-path:inset(0 0 0 0)}
.tr-out.on .ln{opacity:1;transform:none}

.tr-lab{position:fixed;left:50%;top:50%;z-index:99992;transform:translate(-50%,-50%);pointer-events:none;
  padding:12px 20px 12px calc(20px + .52em);background:#040405;white-space:nowrap;
  font-family:'Josefin Sans','DM Mono',sans-serif;font-weight:300;font-size:12px;letter-spacing:.52em;text-transform:uppercase;
  color:rgba(239,236,228,.9);opacity:0;transition:opacity .22s ease .16s}
.tr-out.on .tr-lab{opacity:1}
.tr-lab.leave{opacity:1;transition:opacity .45s ease .1s}
.tr-lab.leave.out{opacity:0}
@media(prefers-reduced-motion:reduce){html.tr-in::before,html.tr-in::after,.tr-out,.tr-lab{display:none!important}}