@view-transition {
  navigation: auto;
}

html {
  background: #f8fafc;
}

::view-transition-old(root) {
  animation: pmt-route-old 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: pmt-route-new 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body {
  animation: pmt-page-enter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

html.pmt-route-leaving body {
  animation: pmt-page-exit 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

@keyframes pmt-route-old {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.995);
    filter: blur(2px);
  }
}

@keyframes pmt-route-new {
  from {
    opacity: 0;
    transform: translateY(10px) scale(1.005);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes pmt-page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pmt-page-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  body,
  html.pmt-route-leaving body {
    animation: none;
  }
}