.heading-underline__word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.heading-underline__word::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset-inline: 0;
  bottom: -0.18em;
  height: 0.3em;
  background-color: var(--heading-underline-color, #238b8b);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M2 13 Q16 8 25 3 Q29 1 26 9 Q24 15 39 9 Q51 4 61 5 Q85 3 118 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.heading-underline__word[style*="--heading-underline-mask"]::after {
  mask-image: var(--heading-underline-mask);
}

@media (prefers-reduced-motion: no-preference) {
  .heading-underline__word--animated::after {
    clip-path: inset(0 100% 0 0);
  }

  .heading-underline__word--drawn::after {
    animation: heading-underline-draw 750ms ease-out var(--heading-underline-delay, 0ms) both;
  }
}

@keyframes heading-underline-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}