/* The theme's motion. Opening another page fades the old one out (90ms), then the new one in while it rises 8px (200ms),
   with cross-document view transitions; the navbar and a repository's tabs stay in place and only cross-fade. Content
   that arrives after the page (theme-fade-in) fades in over 160ms. Visitors who ask for less motion get none. */
@view-transition {
  navigation: auto;
}

#navbar {
  view-transition-name: github-navbar;
}

.repository-tab-nav {
  view-transition-name: github-repository-tabs;
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.32, 0, 0.67, 0) both theme-fade-out;
}

::view-transition-new(root) {
  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 90ms both theme-fade-rise;
}

::view-transition-group(github-navbar),
::view-transition-group(github-repository-tabs) {
  animation-duration: 150ms;
}

/* Tabs that only one of the two pages has leave and arrive with the page instead of cross-fading on their own. */
::view-transition-old(github-repository-tabs):only-child {
  animation: 90ms cubic-bezier(0.32, 0, 0.67, 0) both theme-fade-out;
}

::view-transition-new(github-repository-tabs):only-child {
  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 90ms both theme-fade-in;
}

.theme-fade-in {
  animation: 160ms cubic-bezier(0.33, 1, 0.68, 1) both theme-fade-in;
}

@keyframes theme-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes theme-fade-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes theme-fade-in {
  from {
    opacity: 0;
  }
}

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

  .theme-fade-in {
    animation: none;
  }
}