/* ── Signing animation + loaders ──────────────────────────────────────────
   One drawing, three jobs: the loading overlay, inline button spinners, and
   the demo panel beside the auth forms. Everything is inline SVG and CSS so
   it costs no network request and can't fail to load the way a hosted GIF or
   video can.

   Palette hooks: --primary / --primary-soft may already be defined by the
   page. Fallbacks keep this usable on the standalone auth pages too. */

.sig-anim {
  --sa-ink: #0f172a;
  --sa-paper: #ffffff;
  --sa-line: #e2e8f0;
  --sa-accent: var(--primary, #e04502);
  --sa-accent-soft: var(--primary-soft, #fff1e8);
  --sa-seal: #15803d;
  --sa-seal-soft: #dcfce7;
  display: block;
  width: 100%;
  height: auto;
}

/* The sheet lifts slightly as the signature lands. */
.sig-anim .sa-sheet {
  transform-origin: 60px 70px;
  animation: sa-sheet 6.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.sig-anim .sa-textline {
  transform-origin: left center;
  animation: sa-textline 6.4s ease-out infinite;
}
.sig-anim .sa-textline:nth-of-type(1) { animation-delay: .05s }
.sig-anim .sa-textline:nth-of-type(2) { animation-delay: .12s }
.sig-anim .sa-textline:nth-of-type(3) { animation-delay: .19s }
.sig-anim .sa-textline:nth-of-type(4) { animation-delay: .26s }

/* The stroke draws itself, holds, then clears for the next loop. */
.sig-anim .sa-stroke {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: sa-draw 6.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
/* The nib rides the same path so the ink appears to come from the pen. */
.sig-anim .sa-nib {
  offset-path: path("M26 96 C34 74 42 70 46 84 C50 98 40 106 38 92 C36 78 50 66 66 70 C82 74 78 96 70 94 C62 92 74 74 92 76 C110 78 116 88 126 84");
  offset-rotate: 0deg;
  animation: sa-nib 6.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
.sig-anim .sa-seal {
  transform-origin: 132px 44px;
  animation: sa-seal 6.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.sig-anim .sa-seal-tick {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: sa-tick 6.4s ease-out infinite;
}

@keyframes sa-sheet {
  0%        { transform: translateY(5px) scale(.98); opacity: 0 }
  6%, 90%   { transform: translateY(0)   scale(1);   opacity: 1 }
  100%      { transform: translateY(-3px) scale(.99); opacity: 0 }
}
@keyframes sa-textline {
  0%        { transform: scaleX(0); opacity: 0 }
  10%, 90%  { transform: scaleX(1); opacity: 1 }
  100%      { transform: scaleX(1); opacity: 0 }
}
@keyframes sa-draw {
  0%, 6%    { stroke-dashoffset: 260 }
  42%, 92%  { stroke-dashoffset: 0 }
  100%      { stroke-dashoffset: 0 }
}
@keyframes sa-nib {
  0%, 6%    { offset-distance: 0%;   opacity: 0 }
  10%       { opacity: 1 }
  42%       { offset-distance: 100%; opacity: 1 }
  48%, 100% { offset-distance: 100%; opacity: 0 }
}
@keyframes sa-seal {
  0%, 44%   { transform: scale(.3); opacity: 0 }
  54%, 90%  { transform: scale(1);  opacity: 1 }
  100%      { transform: scale(1);  opacity: 0 }
}
@keyframes sa-tick {
  0%, 48%   { stroke-dashoffset: 22 }
  60%, 100% { stroke-dashoffset: 0 }
}

/* ── Full-screen loading overlay ─────────────────────────────────────── */
.pactly-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background: rgba(255, 250, 247, .82);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.pactly-loader.is-visible { opacity: 1; visibility: visible }

.pactly-loader-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 32px 40px;
  text-align: center;
  transform: translateY(6px);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.pactly-loader.is-visible .pactly-loader-card { transform: translateY(0) }
.pactly-loader-art { width: 168px; height: 124px }

.pactly-loader-msg {
  font-family: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.1px;
  color: #1f2937;
}
.pactly-loader-sub {
  font-family: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 12.5px; color: #5f6878; margin-top: -10px;
  max-width: 30ch; line-height: 1.5;
}

/* Progress hint - indeterminate, so it must not imply a known duration. */
.pactly-loader-bar {
  width: 132px; height: 3px; border-radius: 3px;
  background: rgba(224, 69, 2, .14); overflow: hidden;
}
.pactly-loader-bar i {
  display: block; height: 100%; width: 42%; border-radius: 3px;
  background: var(--primary, #e04502);
  animation: pactly-bar 1.15s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes pactly-bar {
  0%   { transform: translateX(-105%) }
  100% { transform: translateX(340%) }
}

/* ── Inline button spinner ───────────────────────────────────────────── */
.btn.is-loading, button.is-loading, .submit.is-loading, .btn-cta.is-loading {
  position: relative; color: transparent !important;
  pointer-events: none;
}
.btn.is-loading > *, button.is-loading > *,
.submit.is-loading > *, .btn-cta.is-loading > * { visibility: hidden }
.btn.is-loading::after, button.is-loading::after,
.submit.is-loading::after, .btn-cta.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; color: #fff;
  animation: pactly-spin .6s linear infinite;
}
.btn-outline.is-loading::after, .btn-xs.is-loading::after,
.ghost.is-loading::after { color: var(--primary, #e04502) }
@keyframes pactly-spin { to { transform: rotate(360deg) } }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sig-anim .sa-sheet, .sig-anim .sa-textline, .sig-anim .sa-stroke,
  .sig-anim .sa-nib, .sig-anim .sa-seal, .sig-anim .sa-seal-tick {
    animation: none;
  }
  /* Show the finished state rather than a frozen blank one. */
  .sig-anim .sa-stroke, .sig-anim .sa-seal-tick { stroke-dashoffset: 0 }
  .sig-anim .sa-nib { opacity: 0 }
  .sig-anim .sa-seal { opacity: 1; transform: none }
  .pactly-loader-bar i { animation-duration: 2.4s }
  .btn.is-loading::after, button.is-loading::after,
  .submit.is-loading::after, .btn-cta.is-loading::after {
    animation-duration: 1.6s;
  }
  .pactly-loader, .pactly-loader-card { transition: none }
}