/* Progressive soft-navigation transitions. */

main#main-content {
  transition: opacity 110ms ease, transform 110ms ease;
}

main#main-content.mh-soft-nav-leaving {
  opacity: 0;
  transform: translateY(3px);
}

main#main-content.mh-soft-nav-entering {
  opacity: 0;
  transform: translateY(3px);
}

.mh-sidebar {
  transition: opacity 170ms ease, transform 170ms ease;
}

.mh-sidebar.mh-soft-sidebar-leaving {
  opacity: 0;
  transform: translateX(20px);
}

.mh-sidebar.mh-soft-sidebar-entering {
  opacity: 0;
  transform: translateX(20px);
}

.mh-page-split {
  transition: grid-template-columns 180ms ease;
}

/*
 * Same-document View Transitions.
 *
 * Keep the overall page cross-fade deliberately subtle so navigation still
 * feels immediate. Shared named elements get slightly more time for geometry
 * changes to read without making the whole page feel animated.
 */
::view-transition-group(root) {
  animation-duration: 110ms;
  animation-timing-function: ease;
}

::view-transition-old(root) {
  animation: mh-vt-root-out 90ms ease both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: mh-vt-root-in 110ms ease both;
  mix-blend-mode: normal;
}

/*
 * Let the browser animate the Riptide card group's size, position, and
 * transform between old/new layouts. The geometry morph is intentionally a
 * touch slower than the root fade so width changes remain visible.
 */
::view-transition-group(mh-riptide-callout) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(.2, .75, .25, 1);
}

::view-transition-old(mh-riptide-callout) {
  animation: mh-vt-fade-out 120ms ease both;
  mix-blend-mode: normal;
}

::view-transition-new(mh-riptide-callout) {
  animation: mh-vt-fade-in 150ms 15ms ease both;
  mix-blend-mode: normal;
}

::view-transition-group(mh-sidebar) {
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(.2, .75, .25, 1);
}

::view-transition-old(mh-sidebar) {
  animation: mh-vt-sidebar-out 140ms ease both;
  mix-blend-mode: normal;
}

::view-transition-new(mh-sidebar) {
  animation: mh-vt-sidebar-in 160ms 10ms ease both;
  mix-blend-mode: normal;
}

@keyframes mh-vt-root-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(2px); }
}

@keyframes mh-vt-root-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mh-vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes mh-vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mh-vt-sidebar-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}

@keyframes mh-vt-sidebar-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

html.mh-soft-nav-loading {
  cursor: progress;
}

html.mh-soft-nav-loading a,
html.mh-soft-nav-loading button {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  main#main-content,
  .mh-sidebar,
  .mh-page-split {
    transition: none;
  }

  main#main-content.mh-soft-nav-leaving,
  main#main-content.mh-soft-nav-entering,
  .mh-sidebar.mh-soft-sidebar-leaving,
  .mh-sidebar.mh-soft-sidebar-entering {
    transform: none;
  }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(mh-riptide-callout),
  ::view-transition-old(mh-riptide-callout),
  ::view-transition-new(mh-riptide-callout),
  ::view-transition-group(mh-sidebar),
  ::view-transition-old(mh-sidebar),
  ::view-transition-new(mh-sidebar) {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }
}