/* Text-Rolle (js/components/roll-text.js): alter und neuer Text liegen in derselben Zelle */
.roll-text {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
}

.roll-text > * {
  grid-area: 1 / 1;
}

.roll-text__now {
  animation: roll-text-in 520ms var(--ease-out) both;
}

.roll-text__old {
  animation: roll-text-out 420ms var(--ease-in-out) both;
}

@keyframes roll-text-in {
  from {
    opacity: 0;
    transform: translateY(105%);
  }
}

@keyframes roll-text-out {
  to {
    opacity: 0;
    transform: translateY(-105%);
  }
}

:root[data-motion='still'] :is(.roll-text__now, .roll-text__old) {
  animation: none;
}