/* =====================================================================
   cm-transitions.css — page-to-page transitions, site-wide.

   Cross-document View Transitions: when you follow a link between two
   CryptoMath pages, the old page fades out and the new one fades in
   while rising a few pixels. Pure CSS; both pages must load this file
   (every .html page does, in <head>).

   - Browsers without cross-document View Transitions (Firefox, older
     Safari/Chrome) just navigate normally. Nothing to polyfill.
   - Reduced motion (OS setting): opted out here, so navigation is
     instant. The site's own reduce-motion toggle is handled by the small
     inline script next to the <link> (CSS can't read localStorage).
   - Same-origin navigations only, by spec; outbound links are untouched.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}

/* old page: a quick fade out */
::view-transition-old(root){
  animation:cm-vt-out .16s cubic-bezier(.4,0,1,1) both;
}
/* new page: fade in while rising 12px */
::view-transition-new(root){
  animation:cm-vt-in .34s cubic-bezier(.22,1,.36,1) .04s both;
}
@keyframes cm-vt-out{ to{ opacity:0; } }
@keyframes cm-vt-in{ from{ opacity:0; transform:translateY(12px); } }

/* every page is dark: keep the gap between the two snapshots dark too */
::view-transition{ background:#050403; }