/* A full blue cover, followed by a left-to-right uncover. */
.text-reveal-word {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  white-space: nowrap;
  isolation: isolate;
}

.text-reveal-copy {
  display: inline-block;
  padding-block: 0.12em;
  margin-block: -0.12em;
  clip-path: inset(0 100% 0 0);
}

.text-reveal-word::after {
  content: "";
  position: absolute;
  inset: -0.06em 0;
  z-index: 1;
  background: var(--text-reveal-color, #5b95ff);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

.text-reveal-word.is-revealing::after {
  animation: text-reveal-block 1200ms cubic-bezier(0.76, 0, 0.24, 1) var(--reveal-delay, 0ms) both;
}

.text-reveal-word.is-revealing > .text-reveal-copy {
  animation: text-reveal-letters 540ms cubic-bezier(0.76, 0, 0.24, 1) calc(var(--reveal-delay, 0ms) + 660ms) both;
}

@keyframes text-reveal-block {
  0% { clip-path: inset(0 100% 0 0); }
  45%, 55% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes text-reveal-letters {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.text-reveal-word.is-revealed > .text-reveal-copy {
  clip-path: none;
  animation: none;
}

.text-reveal-word.is-revealed::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .text-reveal-word > .text-reveal-copy {
    clip-path: none;
    animation: none;
  }
  .text-reveal-word::after { display: none; }
}

@media print {
  .text-reveal-word > .text-reveal-copy { clip-path: none; animation: none; }
  .text-reveal-word::after { display: none; }
}