@view-transition { navigation: auto; }
::view-transition-group(sf-login-catalog) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  overflow: clip;
  border-radius: 34px;
  background: #f2f6f3;
}
::view-transition-old(sf-login-catalog),
::view-transition-new(sf-login-catalog) {
  height: 100%;
  object-fit: cover;
  object-position: top left;
  mix-blend-mode: normal;
}
::view-transition-old(sf-login-catalog) { animation: sf-morph-out 180ms ease-out both; }
::view-transition-new(sf-login-catalog) { animation: sf-morph-in 400ms ease-out both; }
::view-transition-old(root) { animation: sf-morph-out 420ms ease-out both; }
::view-transition-new(root) { animation: sf-morph-in 420ms ease-out both; }
@keyframes sf-morph-out { to { opacity: 0; } }
@keyframes sf-morph-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none;
  }
}