.signature {
  --signature-color: currentColor;
  --signature-stroke-width: 1.5;
  margin-top: 4rem;
}

.signature svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
}

.signature svg path {
  fill: none;
  stroke: var(--signature-color);
  stroke-width: var(--signature-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--start-offset);
}

.signature.animate svg path {
  animation: signature-draw var(--dur) linear forwards;
  animation-delay: var(--delay);
}

@keyframes signature-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signature svg path {
    stroke-dashoffset: 0;
  }
  .signature.animate svg path {
    animation: none;
  }
}