/* The waitlist form's states. Joined, the field and button give way to one line in the same pill, so nothing moves. */
.invite-form { position: relative; }
.invite-joined {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 18px;
  outline: none;
  visibility: hidden;
  opacity: 0;
  filter: blur(4px);
  translate: 0 5px;
  transition: opacity 360ms var(--ease) 140ms, filter 360ms var(--ease) 140ms, translate 360ms var(--ease) 140ms, visibility 0s;
}
.invite-form > :is(input, button) { transition: opacity 200ms var(--ease), filter 200ms var(--ease), translate 200ms var(--ease); }
.invite-form[data-state="joined"] > :is(input, button) { opacity: 0; filter: blur(4px); translate: 0 -5px; pointer-events: none; }
.invite-form[data-state="joined"] .invite-joined { visibility: visible; opacity: 1; filter: none; translate: 0 0; }
.invite-form[data-state="sending"] button { opacity: .6; cursor: progress; }
.invite-form[data-state="sending"] input { color: color-mix(in srgb, var(--ink) 50%, transparent); }

.invite-status { min-height: 20px; margin: 12px auto 0; font-size: 15px; line-height: 20px; color: color-mix(in srgb, var(--ink) 70%, transparent); text-align: center; }
.invite-status:empty { visibility: hidden; }
.invite-form[data-state="error"] + .invite-status { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .invite-joined, .invite-form > :is(input, button) { transition: none; } }