@keyframes page-surface-in {
  from { opacity: .35; }
  to { opacity: 1; }
}
html.page-motion-in :is(.login-shell, .account-shell),
html.page-motion-in.page-motion-ready .viewport {
  animation: page-surface-in 280ms ease-out backwards;
}
html.page-motion-in.page-motion-out :is(.login-shell, .account-shell, .viewport) {
  animation: none;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 220ms ease-in, translate 220ms ease-in;
}
@media (prefers-reduced-motion: reduce) {
  html.page-motion-in :is(.login-shell, .account-shell),
  html.page-motion-in.page-motion-ready .viewport { animation: none; }
  html.page-motion-in.page-motion-out :is(.login-shell, .account-shell, .viewport) { transition: none; }
}