/* The frame contains one word only, so words cannot overlap or clip mid-change. */
.motto {
  display: inline-grid;
  width: 286px;
  height: 56px;
  place-items: center;
  vertical-align: middle;
  letter-spacing: -0.02em;
}

.motto-word {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.motto-word.is-leaving {
  transform: translateY(-10px);
  transition:
    transform 160ms ease;
}

.motto-word.is-entering {
  animation: motto-word-in 280ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@keyframes motto-word-in {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

@media (max-width: 800px) {
  .motto {
    width: 220px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motto-word.is-leaving {
    transform: none;
    transition: none;
  }
  .motto-word.is-entering {
    animation: none;
  }
}