/* PRE signature: stroke-by-stroke draw driven by assets/js/signature.js. */
.pre-signature {
  display: block;
  color: inherit;
}

/* Hold the default asset's footprint while it is fetched, so nothing below jumps. */
.pre-signature.is-loading {
  aspect-ratio: 320 / 120;
}

.pre-signature__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pre-signature__svg :is(path, line, polyline, circle, ellipse) {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* While armed, non-scaling strokes scale normally at an equivalent width so pathLength dashing is reliable. */
.pre-signature.is-armed .pre-signature__svg [data-sig-nss] {
  vector-effect: none;
  stroke-width: var(--sig-nss-width, 2.4px);
}

/* Armed: every stroke hidden just behind its own start, so the round cap leaves no dot. */
.pre-signature.is-armed .pre-signature__svg :is(path, line, polyline, circle, ellipse) {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.01;
}

.pre-signature.is-drawing .pre-signature__svg :is(path, line, polyline, circle, ellipse) {
  animation: pre-signature-draw var(--sig-duration, 1.4s) var(--sig-ease, ease) var(--sig-delay, 0s) both;
}

.pre-signature.is-drawn .pre-signature__svg :is(path, line, polyline, circle, ellipse) {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .pre-signature .pre-signature__svg :is(path, line, polyline, circle, ellipse) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}