/* Login and sign-up only. Moving between the two is one smooth morph: the card grows or shrinks
   to the new form while its content cross-fades, and the background and language picker stay put.
   (Cross-document view transitions; browsers without them simply load the next page.) */
@view-transition { navigation: auto; }

.card { view-transition-name: auth-card; }
.login__lang { view-transition-name: auth-lang; }

::view-transition-group(root) { animation-duration: .3s; }
::view-transition-group(auth-card) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(auth-card) { animation: auth-out .2s ease both; }
::view-transition-new(auth-card) { animation: auth-in .3s ease .12s both; }
@keyframes auth-out { to { opacity: 0; } }
@keyframes auth-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}