.opening-intro {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #080908;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  will-change: transform;
}
.opening-signature {
  position: relative;
  width: 420px;
  height: 286px;
  max-width: 100vw;
  transform: scale(1.3);
}
.opening-signature svg {
  position: absolute;
  display: block;
  overflow: visible;
  transform: translate(-50%, -50%);
}
.opening-signature .signature-al {
  width: 64px;
  height: 72px;
  left: 46%;
  top: 50%;
}
.opening-signature .signature-vin {
  width: 52px;
  height: 24px;
  left: 55%;
  top: 51%;
  opacity: 0;
}
.opening-signature .signature-dot {
  width: 10px;
  height: 9px;
  left: 56%;
  top: 46%;
  opacity: 0;
}
/* A gap longer than the normalized path prevents the next dash’s round cap
   appearing at the far endpoint while the current stroke is still hidden. */
.opening-signature path {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}
.signature-light {
  stroke: #bdc314;
  opacity: 0.28;
}
.signature-ink {
  stroke: #bdc314;
}
.is-signing .signature-al .signature-light {
  animation: signature-write 480ms cubic-bezier(0.4, 0, 0.6, 1) var(--signature-start, 0ms) both;
}
.is-signing .signature-al .signature-ink {
  animation: signature-write 700ms cubic-bezier(0.4, 0, 0.6, 1) var(--signature-start, 0ms) both;
}
.is-signing .signature-vin {
  animation: signature-dot 1ms linear calc(var(--signature-start, 0ms) + 400ms) both;
}
.is-signing .signature-vin .signature-light {
  animation: signature-write 450ms cubic-bezier(0.4, 0, 0.6, 1)
    calc(var(--signature-start, 0ms) + 400ms) both;
}
.is-signing .signature-vin .signature-ink {
  animation: signature-write 600ms cubic-bezier(0.4, 0, 0.6, 1)
    calc(var(--signature-start, 0ms) + 400ms) both;
}
.is-signing .signature-dot {
  animation: signature-dot 1ms linear calc(var(--signature-start, 0ms) + 700ms) both;
}
.signature-dot path {
  stroke-dashoffset: 0;
}
@keyframes signature-write {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes signature-dot {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opening-signature path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  .opening-signature .signature-dot,
  .opening-signature .signature-vin {
    animation: none;
    opacity: 1;
  }
}