.site-intro {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #061a3b;
  opacity: 1;
  visibility: visible;
  animation: signature-failsafe 0s 3s forwards;
}

.site-intro[hidden],
.signature-seen .site-intro { display: none; }

.site-intro__mark {
  width: clamp(220px, 27vw, 390px);
  aspect-ratio: 951 / 121;
  display: block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  clip-path: inset(0 100% 0 0);
  will-change: opacity, transform, clip-path;
}

.site-intro__mark img {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.site-intro.is-running .site-intro__mark {
  animation: signature-mark-in 840ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.site-intro.is-leaving {
  pointer-events: none;
  animation: signature-screen-out 560ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.site-intro.is-leaving .site-intro__mark {
  animation: signature-mark-out 360ms ease forwards;
}

html.signature-lock,
html.signature-lock body { overflow: hidden; }

@keyframes signature-mark-in {
  0% { opacity: 0; transform: translate3d(0, 10px, 0); clip-path: inset(0 100% 0 0); }
  34% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes signature-mark-out {
  to { opacity: 0; transform: translate3d(0, -5px, 0); }
}

@keyframes signature-screen-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes signature-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 640px) {
  .site-intro__mark { width: min(68vw, 280px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro { animation: none; }
  .site-intro__mark { opacity: 1; transform: none; clip-path: none; }
  .site-intro.is-running .site-intro__mark,
  .site-intro.is-leaving,
  .site-intro.is-leaving .site-intro__mark { animation-duration: 140ms; }
}