/* Page transition, library-free.

   The template drove ::view-transition-old/new through the Web Animations API
   inside a React hook (next-view-transitions). Cross-document view transitions
   do the same thing from CSS alone: the outgoing page lifts and fades, the
   incoming one clips up from the bottom. Browsers without support just
   navigate. */

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}

::view-transition-image-pair(root) {
  isolation: isolate;
  will-change: transform, opacity, clip-path;
}

::view-transition-old(root) {
  z-index: 1;
  animation: sb-page-out 1.5s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}

::view-transition-new(root) {
  z-index: 10000;
  animation: sb-page-in 1.5s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}

@keyframes sb-page-out {
  from { opacity: 1;   transform: translateY(0); }
  to   { opacity: 0.2; transform: translateY(-35%); }
}

@keyframes sb-page-in {
  from {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    transform: translateY(25%);
  }
  to {
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
    transform: translateY(0%);
  }
}

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