.signature-wrapper {
  display: block;
  align-items: center;
  flex-shrink: 1; /* allows shrinking if needed */
  min-width: 0; /* allows flex items to shrink properly */
  margin-left: 0.5rem;
}

/* sig width */
.signature-svg {
  display: block;
  height: auto;
  width: clamp(230px, 45vw, 310px); /* (x=min width on small, med % of viewport, max on large) scales with width, not height */
  max-height: 110px; /* prevents it from getting too tall */
}

/* Optional: fine-tune alignment */
.signature-svg text {
  dominant-baseline: middle;
}

.comforter-brush-regular {
  font-family: "Comforter Brush", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Script style and ink look */
.signature-path {
  font-family: "Comforter Brush", cursive;
  font-size: 2.5rem;
  font-weight: 300;
  fill: none;
  text-decoration: none;
  stroke: #453f3e;
  /* rich ink tone */
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: writeSignature 5s ease-in-out forwards,
    inkFade 2s 2s ease-in forwards;
  /*filter: drop-shadow(0.4px 0.4px 0 rgba(0, 0, 0, 0.1));*/
}

/* Animation: writing effect */
@keyframes writeSignature {
  0% {
    stroke-dashoffset: 1500;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/* Animation: ink fills in after stroke */
@keyframes inkFade {
  from {
    fill: transparent;
  }

  to {
    fill: #453f3e;
  }
}


@keyframes subtleShift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 10px 8px;
  }
}