/* Apply this class to any heading */
.svg-draw-heading {
  position: relative;
}

/* Keep original text in the layout so size never changes */
.svg-draw-heading.sdh-ready {
  color: transparent !important;
}

/* Overlay SVG exactly on top of the original heading box */
.svg-draw-heading .sdh-svg-wrap {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.svg-draw-heading .sdh-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The animated outline */
.svg-draw-heading .sdh-text {
  fill: transparent;
  stroke: currentColor;
  stroke-width: var(--sdh-stroke-width, 1.8px);
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--sdh-dash, 0);
  stroke-dashoffset: var(--sdh-dash, 0);
  transition: stroke-dashoffset var(--sdh-duration, 1.6s) cubic-bezier(.22,.61,.36,1);
  will-change: stroke-dashoffset;
}

/* Entrance only */
.svg-draw-heading.sdh-animated .sdh-text {
  stroke-dashoffset: 0;
}

/* Screen reader helper */
.sdh-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  .svg-draw-heading .sdh-text {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
}