.highlight {
    position: relative;
    display: inline-block;
    margin: -2px -6px;
    padding: 2px 6px;

    /* control the wipe of the BACKGROUND only */
    --revealRight: 100%;
    /* start fully hidden */
  }

  /* Background brush layer */
  .highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/css/pen-brushes.svg') no-repeat center/cover;
    z-index: 0;
    /* behind the text */
    clip-path: inset(0 var(--revealRight) 0 0);
    /* wipe from left -> right */
    -webkit-clip-path: inset(0 var(--revealRight) 0 0);
    will-change: clip-path;
  }

  /* Text stays above and fully visible from the beginning */
  .highlight .bg {
    position: relative;
    z-index: 1;
  }