/* ════════════════════════════════════════════════════════════════════════════
   THE SINGULARITY · PAGE TRANSITIONS — native cross-document View Transitions.

   The browser snapshots the OLD page and the NEW page and cross-fades them on the
   GPU compositor — a genuinely seamless, jank-free fade between full page
   navigations. No JS, no overlay, no handoff gap (the thing that made the custom
   approach jitter). Browsers without support just navigate instantly — no jank,
   graceful degradation. Same-document SPA routing (hash / data-goto) is untouched.
   ════════════════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

/* A calm, slightly-slow cross-fade with a gentle decelerate. The root snapshot of
   the old page eases out as the new page eases in — composited, so it's smooth by
   construction regardless of how heavy either page is. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.33, 0, 0.15, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

::view-transition-old(root) { animation-name: sg-page-out; z-index: 1; }
::view-transition-new(root) { animation-name: sg-page-in;  z-index: 2; }

/* old page: fade out with a whisper of recede; new page: fade in from a whisper
   closer — barely-there depth that reads as premium, never as motion-sickness. */
@keyframes sg-page-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.992); }
}
@keyframes sg-page-in {
  from { opacity: 0; transform: scale(1.008); }
  to   { opacity: 1; transform: scale(1); }
}

/* the transition backdrop is the void, so any sliver of gap reads as brand-black */
::view-transition { background: #08080A; }

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