.pencil-heading-text {
  display: inline-block;
  position: relative;
  padding-bottom: 0.3em;
}

.pencil-text-line {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.pencil-note {
  position: absolute;
  left: -0.02em;
  bottom: -0.02em;
  width: calc(100% + 0.04em);
  height: 0.42em;
  overflow: visible;
  pointer-events: none;
}

.pencil-star-note {
  position: absolute;
  left: calc(100% + 0.05em);
  bottom: -0.2em;
  width: 0.78em;
  height: 0.78em;
  overflow: visible;
  pointer-events: none;
}

.pencil-stroke {
  stroke-width: 2.5;
  opacity: 0.95;
  vector-effect: non-scaling-stroke;
}

.pencil-stroke.pencil-soft {
  stroke-width: 4.5;
  opacity: 0.2;
}

@media (prefers-reduced-motion: no-preference) {
  [data-pencil-reveal].is-pencil-ready .pencil-stroke {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  [data-pencil-reveal].is-pencil-drawn .pencil-first {
    animation: pencil-draw 0.85s ease-in-out 0.12s both;
  }

  [data-pencil-reveal].is-pencil-drawn .pencil-second {
    animation: pencil-draw 0.45s ease-in-out 1.1s both;
  }

  [data-pencil-reveal].is-pencil-drawn .pencil-star {
    animation: pencil-draw 0.8s linear 1.7s both;
  }

  @keyframes pencil-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }
}