@view-transition {
  navigation: auto;
}

html:active-view-transition-type(account-enter)::view-transition-old(root) {
  animation: none;
}

html:active-view-transition-type(account-enter)::view-transition-new(root) {
  animation: account-fade-in 320ms ease both;
}

html::view-transition-group(account-sidebar),
html::view-transition-group(account-heading),
html::view-transition-group(account-body) {
  z-index: 2;
  animation: none;
}

html:active-view-transition-type(account-enter)::view-transition-new(account-sidebar) {
  animation: account-heading-enter 800ms 180ms cubic-bezier(.2, .7, .2, 1) both;
}

html:active-view-transition-type(account-enter)::view-transition-new(account-heading) {
  animation: account-heading-enter 800ms cubic-bezier(.2, .7, .2, 1) both;
}

html:active-view-transition-type(account-enter)::view-transition-new(account-body) {
  animation: account-card-enter 1000ms 120ms cubic-bezier(.2, .7, .2, 1) both;
}

html:active-view-transition-type(account-exit)::view-transition-old(root) {
  z-index: 1;
  animation: account-fade-out 320ms 120ms cubic-bezier(.4, 0, .2, 1) both;
}

html:active-view-transition-type(account-exit)::view-transition-new(root) {
  z-index: 0;
  animation: none;
}

html:active-view-transition-type(account-exit)::view-transition-old(account-sidebar) {
  animation: account-fade-out 160ms ease-in both;
}

html:active-view-transition-type(account-exit)::view-transition-old(account-heading) {
  animation: account-fade-out 200ms 40ms ease-in both;
}

html:active-view-transition-type(account-exit)::view-transition-old(account-body) {
  animation: account-card-leave 320ms 60ms cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes account-fade-out {
  to { opacity: 0; }
}

@keyframes account-fade-in {
  from { opacity: 0; }
}

@keyframes account-heading-enter {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes account-card-enter {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
}

@keyframes account-card-leave {
  to { opacity: 0; transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  html::view-transition-old(*),
  html::view-transition-new(*) {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}