.jw-signature-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--jw-preloader-bg, #f7f2ed);
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--jw-preloader-fade, 800ms) ease,
    visibility var(--jw-preloader-fade, 800ms) ease;
}

.jw-signature-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.jw-signature-preloader__inner {
  width: min(var(--jw-preloader-width, 430px), 86vw);
  color: var(--jw-preloader-stroke, #111);
  text-align: center;
}

.jw-signature-preloader__mark {
  position: relative;
  width: 100%;
  aspect-ratio: 925 / 530;
}

.jw-signature-preloader__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The exact supplied monogram is revealed directly by this animated mask.
   There is no second logo swap, so the end of the animation stays clean. */
.jw-signature-preloader__mask-path {
  fill: none;
  stroke: #fff;
  stroke-width: 76;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: jw-signature-draw 5.2s cubic-bezier(.32,.04,.18,1) forwards .15s;
}

.jw-signature-preloader__image {
  opacity: 1;
}

.jw-signature-preloader__wordmark,
.jw-signature-preloader__divider,
.jw-signature-preloader__tagline {
  opacity: 0;
}

/* Text arrives while the slower signature is still drawing. */
.jw-signature-preloader__wordmark {
  margin-top: -8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(15px, 4vw, 24px);
  font-weight: 400;
  letter-spacing: .34em;
  line-height: 1;
  white-space: nowrap;
  animation: jw-signature-meta-in .52s ease forwards 2.55s;
}

.jw-signature-preloader__divider {
  width: 58px;
  height: 1px;
  margin: 19px auto 15px;
  background: #777;
  transform: scaleX(0);
  animation: jw-signature-divider-in .44s ease forwards 2.78s;
}

.jw-signature-preloader__tagline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(8px, 2vw, 12px);
  font-weight: 500;
  letter-spacing: .39em;
  line-height: 1.2;
  white-space: nowrap;
  animation: jw-signature-meta-in .5s ease forwards 2.98s;
}

@keyframes jw-signature-draw {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

@keyframes jw-signature-meta-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes jw-signature-divider-in {
  to {
    opacity: .65;
    transform: scaleX(1);
  }
}

@media (max-width: 480px) {
  .jw-signature-preloader__inner {
    width: min(var(--jw-preloader-width, 430px), 92vw);
  }

  .jw-signature-preloader__wordmark {
    letter-spacing: .25em;
  }

  .jw-signature-preloader__tagline {
    letter-spacing: .27em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jw-signature-preloader__mask-path,
  .jw-signature-preloader__wordmark,
  .jw-signature-preloader__tagline,
  .jw-signature-preloader__divider {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}