:root {
  --signature-cycle: 1000ms;
}
.signature-art {
  position: relative;
  overflow: hidden;
}
.signature-art img {
  display: block;
  width: 100%;
  height: auto;
}
.signature-ghost {
  opacity: 0.18;
}
.signature-art .signature-bright {
  position: absolute;
  inset: 0;
  animation: signature-letter-flash var(--signature-cycle)
    cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: clip-path;
}
@keyframes signature-letter-flash {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  55% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
.signature-loading {
  z-index: 50;
  padding: 32px 7%;
  background: #f7f3ee;
}
.signature-loading .signature-inner {
  width: min(100%, 620px);
}
.signature-status {
  color: #55443b;
  font-size: 0.62rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin: 32px 0 0;
}
.signature-help {
  margin: 25px auto 0;
  max-width: 370px;
  font-size: 0.78rem;
}
.signature-loading:not(.slow) .signature-help {
  visibility: hidden;
}
.signature-loading .signature-help button {
  cursor: pointer;
  min-height: 44px;
}
.signature-loading .signature-help p {
  margin: 0;
}
.brand-wordmark{transition:opacity var(--fast)}
.brand:hover .brand-wordmark{opacity:.78}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .signature-ghost {
    opacity: 1;
  }
  html:not([data-motion="full"]) .signature-art .signature-bright {
    display: none;
    animation: none;
  }
}
html[data-motion="reduce"] .signature-ghost {
  opacity: 1;
}
html[data-motion="reduce"] .signature-art .signature-bright {
  display: none;
  animation: none;
}