@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(root),
  ::view-transition-group(studio-mark) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  ::view-transition-old(root) {
    animation: page-out 180ms ease-in both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    animation: page-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
    mix-blend-mode: normal;
  }
  :root:active-view-transition-type(route-back)::view-transition-old(root) {
    animation-name: page-back-out;
  }
  :root:active-view-transition-type(route-back)::view-transition-new(root) {
    animation-name: page-back-in;
  }
  nav .brand > .bm,
  .side .brand > .bm {
    view-transition-name: studio-mark;
  }
}
@keyframes page-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes page-back-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes page-back-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}