/* Page transitions between separate HTML pages (multi-page sites: Cloudflare, Astro, Eleventy).
   Uses the browser's cross-document View Transitions. Put this in every page's CSS.
   Browsers that don't support it simply change pages instantly, so nothing breaks.
   (Framer is different: use Site Settings > Page Effects there; see README.) */

@view-transition { navigation: auto; }

/* The new page sweeps in as a quarter-circle from the top-left corner,
   the same corner and curve as the P mark's bowl. */
::view-transition-old(root) {
  animation: qr-hold var(--d-page, 720ms) var(--e-inout, ease) both;
}
::view-transition-new(root) {
  animation: qr-sweep var(--d-page, 720ms) var(--e-inout, ease) both;
}
@keyframes qr-sweep {
  from { clip-path: circle(0% at 0% 0%); }
  to   { clip-path: circle(150% at 0% 0%); }
}
@keyframes qr-hold {
  to { opacity: 0.6; transform: scale(0.985); }
}

/* The site header stays put while the page changes underneath it. */
.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}