.rotating-words {
  display: inline-block;
  position: relative;
  text-shadow: none;
}

.rotating-words-letter {
  display: inline-block;
  padding: 0.2em 0.04em 0.28em;
  margin: -0.2em -0.04em -0.28em;
  background-image: linear-gradient(100deg, var(--accent-fill-active), var(--accent-foreground-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Prerendered markup gets this instead of -animate (see RotatingWords.razor)
   so the word stays invisible until the component is truly interactive,
   rather than flashing static text that then jumps to hidden right before
   the entrance animation plays. */
.rotating-words-letter-hidden {
  opacity: 0;
}

.rotating-words-letter-animate {
  animation: rotating-words-letter-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rotating-words-letter-in {
  from {
    opacity: 0;
    transform: translateY(12%);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}