/* Aditus motion: a short exit and a soft, slightly rising entrance. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vios-page-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: vios-page-in 420ms var(--vios-ease) both;
}

.vios-header__brand {
  view-transition-name: vios-brand;
}

::view-transition-group(vios-brand) {
  animation-duration: 420ms;
  animation-timing-function: var(--vios-ease);
}

::view-transition-old(vios-brand),
::view-transition-new(vios-brand) {
  animation-duration: 420ms;
}

/* Also soften direct visits, reloads and browsers without navigation transitions.
   Leave the fixed header outside the animated content's containing block. */
.vios-site-content {
  animation: vios-page-in 420ms var(--vios-ease);
}

.vios-page-transitioned .vios-site-content {
  animation: none;
}

html:active-view-transition .vios-site-content {
  animation: none;
}

@keyframes vios-page-out {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes vios-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

  .vios-site-content {
    animation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}