@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  :root { --portfolio-slide: 100%; }
  :root.portfolio-home { --portfolio-slide: -100%; }
  :root:active-view-transition .homepage-cursor { visibility: hidden; }

  ::view-transition-group(root) {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: 500ms linear both;
    mix-blend-mode: normal;
  }

  ::view-transition-old(root) { animation-name: portfolio-page-out; }
  ::view-transition-new(root) { animation-name: portfolio-page-in; }

  @keyframes portfolio-page-out {
    to { transform: translateX(calc(-1 * var(--portfolio-slide))); }
  }

  @keyframes portfolio-page-in {
    from { transform: translateX(var(--portfolio-slide)); }
  }
}