/* Native cross-document transitions preserve links, history, scroll restoration
   and the game's pagehide save. Unsupported browsers keep normal navigation.
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition */
@view-transition{navigation:auto}

:root{--page-ease:cubic-bezier(.22,1,.36,1)}
.page-header .brand img,.docs-header .docs-brand img{view-transition-name:snake-mark}

::view-transition{pointer-events:none}
::view-transition-group(root){animation-duration:240ms;animation-timing-function:var(--page-ease)}
::view-transition-old(root){
  animation:160ms ease-out both page-out;
  mix-blend-mode:normal;
}
::view-transition-new(root){
  animation:240ms var(--page-ease) both page-in;
  mix-blend-mode:normal;
}
::view-transition-group(snake-mark){animation-duration:240ms;animation-timing-function:var(--page-ease)}
::view-transition-old(snake-mark),::view-transition-new(snake-mark){animation-duration:180ms;mix-blend-mode:normal}

@keyframes page-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Keep a motion preference consistent across both page swaps and anchor jumps. */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}