/* Keep the actual outgoing frame until incoming data and artwork are ready. */
@view-transition {
  navigation: auto;
}
::view-transition-group(*) {
  animation: none;
}
::view-transition-old(root) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 0;
}
/* One client screen change: no wipe, the incoming screen replaces the outgoing one once it is ready. */
::view-transition-new(root) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 1;
}
/* Keep the outgoing creditor screen until ready, then replace it in one frame. */
html[data-motion-audience="creditor"]::view-transition-new(root) {
  animation-name: working-creditor-arrive;
  animation-duration: 1ms;
  animation-timing-function: steps(1, end);
}
html:not([data-motion-ready])::view-transition-new(root) {
  animation-play-state: paused;
}
::view-transition-image-pair(*) {
  isolation: isolate;
}
::view-transition-old(*),
::view-transition-new(*) {
  object-fit: none;
  object-position: left top;
}
@keyframes working-creditor-arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* A loader appears only after 400 ms of real waiting; a fast load never shows an empty status frame. */
#app > p[role="status"]:only-child,
.workspace-loading {
  animation: loader-after-wait 400ms steps(1, end) both;
}
@keyframes loader-after-wait {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
/* Cold entry and unsupported browsers show final DOM immediately. No second entrance. */
html[data-working-motion] #app .catalog-scene,
html[data-working-motion] #app .request-workspace,
html[data-working-motion] #app .application-card,
html[data-working-motion] #app .request-paper,
html[data-working-motion] #app .success-scene,
html[data-working-motion] #app .requests-scene,
html[data-working-motion] #app .request-sent-scene,
html[data-working-motion] #app .profile-scene,
html[data-working-motion] #app .partner-card {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}