/* =============================================
   PAGE TRANSITION

   Two cat heads rise from the bottom edge over the page being left, ears
   first, and sink back off the page that arrives. Same outline and curves as
   the menu's curtain (nav-overlay.css), cut down to two heads: yellow leads
   on the way up and trails on the way down, so the ears still read against
   a page that opens on purple.

   Three state classes on <html>, one per stage of the hand-over:
     .pt-leaving   the outgoing document is raising the heads
     .pt-armed     the incoming document has painted but its script has not
                   run yet, so the heads hold the screen
     .pt-entering  the incoming document is sinking them
   Off all three the cover is not rendered at all.

   Over the tier modals (9000), so leaving from an open one still covers it.
   ============================================= */

.pt-cover {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    overflow: hidden;
    pointer-events: none;
}

html.pt-leaving .pt-cover,
html.pt-armed .pt-cover,
html.pt-entering .pt-cover {
    display: block;
}

/* Holds clicks while the screen is covered or about to be, and lets go the
   moment the heads start sinking, so the page works as soon as it shows. */
html.pt-leaving .pt-cover,
html.pt-armed .pt-cover {
    pointer-events: auto;
}

/* What shows if the arriving document paints before the parser reaches the
   cover. Body as well as root: body carries its own background. */
html.pt-armed,
html.pt-armed body {
    background-color: var(--color-primary, #4947b8);
}

.pt-cover__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------------------------------------------
   HEADS

   Each is a viewport-tall body with the ears standing on top of it, parked
   below the bottom edge until a stage class moves it.
   --------------------------------------------- */
.pt-head {
    --head-w: 110vw;
    --head-x: 50%;
    /* The ears outline's own height at this width (viewBox 119 x 74). */
    --head-cap: calc(var(--head-w) * 74 / 119);

    position: absolute;
    top: 0;
    left: calc(var(--head-x) - var(--head-w) / 2);
    width: var(--head-w);
    height: 100%;
    background: var(--head-fill);
    color: var(--head-fill);
    transform: translate3d(0, calc(100% + var(--head-cap)), 0);
    will-change: transform;
}

/* The outline runs on below its viewBox, so the rough filter never frays the
   edge that meets the body, and a pixel of overlap keeps a fractional offset
   from opening a seam there. */
.pt-head > svg {
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 119 / 74;
    fill: currentColor;
}

/* Wider and off centre, so its ears clear the purple pair instead of hiding
   behind them. */
.pt-head--accent {
    --head-fill: var(--color-accent-01, #ffd861);
    --head-w: 126vw;
    --head-x: 40%;
    --rise-delay: 0s;
    --sink-delay: 0.08s;
}

.pt-head--ground {
    --head-fill: var(--color-primary, #4947b8);
    --rise-delay: 0.08s;
    --sink-delay: 0s;
}

/* The rise stops as soon as the screen is covered: the body a fifth of the
   ears' height below the top edge, where the shoulders still reach past both
   corners. page-transition.js navigates when it ends, so there is no hold. */
@keyframes pt-rise {
    from { transform: translate3d(0, calc(100% + var(--head-cap)), 0); }
    to   { transform: translate3d(0, calc(var(--head-cap) / 5), 0); }
}

@keyframes pt-sink {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, calc(100% + var(--head-cap)), 0); }
}

html.pt-leaving .pt-head {
    animation: pt-rise 0.7s cubic-bezier(0.3, 0, 0.15, 1) var(--rise-delay) both;
}

html.pt-armed .pt-head {
    transform: translate3d(0, 0, 0);
}

html.pt-entering .pt-head {
    animation: pt-sink 0.62s cubic-bezier(0.35, 0, 0.3, 1) var(--sink-delay) both;
}