/**
 * Looks like these HAVE to be in their own file, not "inlined", sigh.
 */

/* Enable View Transitions */
@view-transition {
  navigation: auto;
}

@keyframes off-the-top {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateY(-200%);
  }
}

@keyframes on-from-top {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Enable View Transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  #site-header {
    view-transition-name: header-transition;
  }

  :root::view-transition-old(header-transition) {
    animation: off-the-top 0.2s ease-in forwards;
  }

  :root::view-transition-new(header-transition) {
    animation: off-the-top 0.2s ease-out reverse;
  }
}