.letter-flicker-word {
  display: inline;
  white-space: nowrap;
}

.hero-accent .letter-flicker-word {
  display: inline-block;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
}

.letter-flicker-char {
  display: inline-block;
  color: inherit;
  will-change: opacity, filter, text-shadow, transform, color;
}

.hero-accent .letter-flicker-word .letter-flicker-char {
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.letter-flicker-char.is-flicker {
  animation: letter-char-flicker 290ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes letter-char-flicker {
  0% {
    opacity: 1;
    color: inherit;
    filter: none;
    text-shadow: none;
    transform: none;
  }

  16% {
    opacity: 0.24;
    color: #f9a8d4;
    transform: translate3d(0, -0.02em, 0);
    filter: brightness(calc(1.22 * var(--flicker-strength, 1)));
    text-shadow:
      0 0 6px rgba(251, 113, 185, 0.42),
      0 0 12px rgba(236, 72, 153, 0.34);
  }

  36% {
    opacity: 0.95;
    color: inherit;
    transform: none;
    filter: none;
    text-shadow: none;
  }

  54% {
    opacity: 0.2;
    color: #fbcfe8;
    transform: translate3d(0, 0.01em, 0);
    filter: brightness(calc(1.3 * var(--flicker-strength, 1)));
    text-shadow: 0 0 8px rgba(249, 168, 212, 0.44);
  }

  74% {
    opacity: 1;
    color: inherit;
    transform: none;
    filter: none;
    text-shadow: none;
  }

  88% {
    opacity: 0.42;
    color: #f9a8d4;
    transform: translate3d(0, -0.01em, 0);
    filter: brightness(calc(1.16 * var(--flicker-strength, 1)));
  }

  100% {
    opacity: 1;
    color: inherit;
    filter: none;
    text-shadow: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.wf-force-letter-flicker) .letter-flicker-char,
  html:not(.wf-force-letter-flicker) .letter-flicker-char.is-flicker {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
}