/* Upright heading emphasis with a textured, hand-drawn felt-tip line. */
.pencil-highlight {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: inherit;
  font-style: normal;
  text-decoration: none;
}

.pencil-highlight::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.085em;
  height: clamp(12px, 0.25em, 18px);
  background: url("assets/ink-underline.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Without JavaScript, every underline stays visible. */
.pencil-highlight.is-ink-tracked::after {
  clip-path: inset(0 calc(100% - var(--ink-reveal, 100%)) 0 0);
  transition: clip-path 0.55s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .pencil-highlight.is-ink-tracked::after {
    clip-path: none;
    transition: none;
  }
}

@media print {
  .pencil-highlight.is-ink-tracked::after {
    clip-path: none;
    transition: none;
  }
}