/* ---------- Page transitions (js/transition.js): a wave in the colour of the page you are going to ----------
   Leaving: a circle of the next page's colour grows from where you clicked, the dark ground follows right behind it.
   Arriving: the dark ground lifts away upward, its coloured edge leading, and the new page shows from below.
   Only transform and opacity move, so it stays on the graphics card and does not lag. */
.pt { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; contain: strict; visibility: hidden; }
.pt.is-on { visibility: visible; pointer-events: auto; }

/* leaving: two circles, colour first, ground right behind it */
.pt-o { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate3d(0,0,0) scale(0); will-change: transform; }
.pt-o1 { background: radial-gradient(closest-side, var(--pt-hi) 0%, var(--pt-c) 55%, var(--pt-lo) 100%); }
.pt-o2 { background: #0C0C0C; }
.pt.is-out .pt-o { transition: transform .46s cubic-bezier(.7,0,.25,1); transform: translate3d(0,0,0) scale(1); }
.pt.is-out .pt-o2 { transition-delay: .08s; transition-duration: .4s; }

/* arriving: the ground, with a curved band of colour at its bottom edge, slides up and away */
.pt-i { position: absolute; left: -10%; right: -10%; top: 0; height: 135%; transform: translate3d(0,0,0); will-change: transform;
  background: linear-gradient(to bottom, #0C0C0C 0%, #0C0C0C 72%, var(--pt-lo) 80%, var(--pt-c) 88%, var(--pt-hi) 94%, transparent 100%);
  border-radius: 0 0 50% 50% / 0 0 14% 14%; }
.pt-mark { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.pt-mark i { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--pt-c); border-top-color: transparent; animation: pt-spin .7s linear infinite; }
.pt.is-wait .pt-mark { opacity: 1; transition: opacity .25s ease .35s; }
@keyframes pt-spin { to { transform: rotate(360deg); } }

/* the head snippet adds html.pt-in before the first paint, so the new page never flashes before its cover */
html.pt-in::after { content: ""; position: fixed; inset: 0; z-index: 2147483001; background: #0C0C0C; }
.pt.is-out .pt-i { display: none; }
.pt.is-in .pt-i { transition: transform .6s cubic-bezier(.65,0,.2,1); transform: translate3d(0,-100%,0); }

@media (prefers-reduced-motion: reduce) {
  .pt.is-out .pt-o, .pt.is-in .pt-i { transition-duration: .01s !important; transition-delay: 0s !important; }
}