/* ============================================
   PAGE TRANSITION — a smooth zoom through the point you clicked.
   The page you leave glides toward that point and dissolves into a soft
   glow; the next page settles in out of the blur.
   Native cross-document View Transitions (no overlay, no delay). The
   `.warping` class is set in each page's <head> only while one runs, so the
   journal's own in-page transitions keep their choreography.
   ============================================ */
@view-transition { navigation: auto; }

/* the space between the pages: a soft light where you clicked */
html.warping::view-transition {
  background:
    radial-gradient(circle at var(--warp-x, 50%) var(--warp-y, 50%),
      rgba(160, 222, 255, .38) 0,
      rgba(79, 195, 247, .16) 10%,
      rgba(124, 58, 237, .1) 28%,
      transparent 62%),
    #06060d;
}

html.warping::view-transition-old(root) {
  transform-origin: var(--warp-x, 50%) var(--warp-y, 50%);
  animation: warpOut .85s cubic-bezier(.65, 0, .35, 1) both;
}
html.warping::view-transition-new(root) {
  animation: warpIn .95s cubic-bezier(.22, 1, .36, 1) .28s both;
}

@keyframes warpOut {
  to { transform: scale(1.5); opacity: 0; filter: blur(10px) brightness(1.5); }
}
@keyframes warpIn {
  from { transform: scale(.94); opacity: 0; filter: blur(10px); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}