/* A brief change of focus between panes. Native navigation is never delayed.
   Browsers without cross-document View Transitions navigate normally. */
@view-transition { navigation: none; }

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

  ::view-transition-group(root) { animation-duration: 260ms; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(.22, .7, .24, 1);
    animation-fill-mode: both;
    mix-blend-mode: normal;
    transform-origin: 50% 50%;
  }
  ::view-transition-old(root) { animation-name: es-pane-recede; }
  ::view-transition-new(root) { animation-name: es-pane-focus; }

  @keyframes es-pane-recede {
    from { transform: scale(1); filter: blur(0); }
    to { transform: scale(.996); filter: blur(1.5px); }
  }
  @keyframes es-pane-focus {
    from { opacity: 0; transform: scale(1.008); filter: blur(2px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}