/* The original text stays readable; only its glyph fill is revealed. */
.mission-word {
  display: inline-block;
  white-space: nowrap;
}

@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .mission-word.is-wipe-ready {
    background-image: linear-gradient(90deg,#FF2000 0 50%,#FFFFFF 50% 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .mission-word.is-wipe-playing {
    animation: mission-word-fill 1.25s cubic-bezier(.4,0,.2,1) .12s both;
  }
}

@keyframes mission-word-fill {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mission-word.is-wipe-ready {
    background: none;
    color: #FF2000;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}