/* Moving between the pages should feel like one site, not a jump cut. Chrome fades the whole
   document across the navigation (a cross-document view transition); transition.js adds the
   same fade for the browsers that ignore this. Nothing here changes layout, and a visitor who
   asked their system to reduce motion gets an instant switch. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* the arrival: fade plus a 6px settle, so the new page lands instead of snapping in */
html.wx-enter { opacity: 0; transform: translateY(6px); }
html.wx-enter.wx-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* the departure, for browsers with no cross-document fade of their own */
html.wx-leave {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.23s ease, transform 0.23s ease;
}

/* one pixel of travel under the finger reads as a real press */
.hello-go:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  html.wx-enter,
  html.wx-leave { opacity: 1 !important; transform: none !important; transition: none !important; }
}