/* =========================================================================
   PAGE TRANSITION
   Click a menu link and a dark curtain sweeps UP over the page. The next
   page loads behind it, then the curtain keeps travelling in the same
   direction and slides off the top, revealing the new page underneath.

   The curtain is two panels rather than one. The second is a fraction of a
   second behind the first, so the sweep has a visible leading edge instead
   of looking like a flat block. Colours are the site's own: near-black with
   a faint blue-slate cast.

   Everything to do with the effect lives in this one file and in
   js/page-transition.js — delete both and the site simply loads pages the
   ordinary way.
   ========================================================================= */

/* The curtain sits above everything on the page (the highest z-index used
   anywhere else on the site is 1046) and never swallows a click. */
.pt_curtain {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    pointer-events: none;
}

/* Both panels start covering the screen and immediately slide away upwards,
   which is what makes a freshly loaded page appear from behind the curtain.
   This is plain CSS, so it happens even if the JavaScript never arrives. */
.pt_panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    transform: translateY(0);
    animation: pt_reveal 0.62s cubic-bezier(.77, 0, .18, 1) both;
}

.pt_a { background: #121212; }

/* Slightly blue, slightly see-through, and a touch behind the first panel. */
.pt_b {
    background: #1b2733;
    opacity: 0.92;
    animation-delay: 0.07s;
}

/* Added by the JavaScript the moment a link is clicked: the same two panels
   now sweep the other way, up from below, to cover the page before it goes. */
.pt_leaving .pt_panel { animation-name: pt_cover; }

@keyframes pt_cover {
    from { transform: translateY(101%); }
    to   { transform: translateY(0); }
}

@keyframes pt_reveal {
    from { transform: translateY(0); }
    to   { transform: translateY(-101%); }
}

/* As the curtain lifts, the page content rises the last few pixels into
   place instead of just being there. */
.pxsnap_content {
    animation: pt_up 0.9s cubic-bezier(.16, 1, .3, 1) 0.12s both;
}

@keyframes pt_up {
    from { opacity: 0; transform: translateY(46px); }
    to   { opacity: 1; transform: none; }
}

/* The About page pins its split layout to the screen, and a parent that is
   sliding about would knock it loose. That page fades in on the spot
   instead of rising. */
.pxsnap_content:has(.pxsnap_page_splitscreen) { animation-name: pt_fade; }

@keyframes pt_fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Visitors who have asked their computer for less movement get none of it —
   no curtain, no rise, pages just change. */
@media (prefers-reduced-motion: reduce) {
    .pt_curtain { display: none; }

    .pxsnap_content { animation: none; }
}