/* Page transition "la faille" shared by every page: two void panels close along the crack,
   the next page opens them again. Drawn with pseudo-elements so it is on screen from the first paint. */
html.wipe-in::before, html.wipe-in::after, html.wipe-out::before, html.wipe-out::after {
  content: ""; position: fixed; inset: -2px; z-index: 1000; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(155, 107, 255, .22), transparent 70%),
    #0a0812;
}
html.wipe-in::before, html.wipe-out::before { clip-path: polygon(0 0, 100% 0, 100% 24%, 0 76%); }
html.wipe-in::after, html.wipe-out::after { clip-path: polygon(0 76%, 100% 24%, 100% 100%, 0 100%); }
/* the glowing seam */
html.wipe-in body::after, html.wipe-out body::after {
  content: ""; position: fixed; left: -10%; right: -10%; top: 50%; height: 4px; z-index: 1001; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff3d8b 20%, #fff2f8 50%, #ff3d8b 80%, transparent);
  box-shadow: 0 0 18px #ff3d8b, 0 0 40px rgba(255, 61, 139, .6);
  transform: rotate(-27.5deg) scaleX(1);
}

/* leaving: panels slide in, the seam flashes */
html.wipe-out::before { animation: wipe-close-top .5s cubic-bezier(.7, 0, .3, 1) both; }
html.wipe-out::after { animation: wipe-close-bottom .5s cubic-bezier(.7, 0, .3, 1) both; }
html.wipe-out body::after { animation: seam-in .5s ease-in both; }
@keyframes wipe-close-top { from { transform: translate(-8%, -110%); } to { transform: none; } }
@keyframes wipe-close-bottom { from { transform: translate(8%, 110%); } to { transform: none; } }
@keyframes seam-in { 0%, 60% { opacity: 0; transform: rotate(-27.5deg) scaleX(0); } 100% { opacity: 1; transform: rotate(-27.5deg) scaleX(1); } }

/* arriving: panels open, the seam fades */
html.wipe-in.wipe-open::before { animation: wipe-open-top .9s cubic-bezier(.8, 0, .2, 1) .1s both; }
html.wipe-in.wipe-open::after { animation: wipe-open-bottom .9s cubic-bezier(.8, 0, .2, 1) .1s both; }
html.wipe-in.wipe-open body::after { animation: seam-out .5s ease-out both; }
@keyframes wipe-open-top { to { transform: translate(-8%, -110%); } }
@keyframes wipe-open-bottom { to { transform: translate(8%, 110%); } }
@keyframes seam-out { to { opacity: 0; transform: rotate(-27.5deg) scaleX(1.4); } }

@media (prefers-reduced-motion: reduce) {
  html.wipe-in::before, html.wipe-in::after, html.wipe-out::before, html.wipe-out::after, html.wipe-in body::after, html.wipe-out body::after { display: none; }
}