/* A brief pencil signature, followed by a typewritten imprint. */
.welcome-screen {
  --welcome-ready: 1;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  background: var(--page-bg, #f8f3ea);
  color: var(--navy, #353f4d);
  opacity: 1;
  transition: opacity 300ms ease;
}
.welcome-screen[open] { display: grid; place-items: center; }
.welcome-screen::backdrop { background: #f8f3ea; }
.welcome-screen.is-leaving { opacity: 0; }
html:has(.welcome-screen[open]) { overflow: hidden; }
.welcome-signature { width: min(100%, 520px); text-align: center; }
.welcome-pencil { display: block; width: 100%; height: auto; overflow: visible; }
.welcome-ink { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.welcome-ink path {
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation-duration: 450ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.welcome-screen.is-running .welcome-ink path { animation-name: welcome-write; }
.welcome-ink path:nth-child(1) { animation-delay: 150ms; }
.welcome-ink path:nth-child(2) { animation-delay: 650ms; animation-duration: 180ms; }
.welcome-ink path:nth-child(3) { animation-delay: 850ms; animation-duration: 200ms; }
.welcome-ink path:nth-child(4) { animation-delay: 1100ms; }
.welcome-ink path:nth-child(5) { animation-delay: 1570ms; animation-duration: 330ms; }
.welcome-ink path:nth-child(6) { animation-delay: 1950ms; }
.welcome-imprint { margin: 20px 0 0; font: 400 clamp(20px, 4vw, 28px) / 1.4 "Courier New", monospace; letter-spacing: 0.12em; }
.welcome-typed {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  overflow: visible;
  white-space: nowrap;
  letter-spacing: 0;
}
.welcome-letter { flex: none; opacity: 0; visibility: hidden; }
.welcome-letter.is-visible { opacity: 1; visibility: visible; }
.welcome-typed::after {
  content: "";
  position: absolute;
  inset: 0.1em -0.2em 0.1em auto;
  border-right: 1px solid currentColor;
  opacity: 0;
}
.welcome-typed.is-complete::after { animation: welcome-caret 700ms step-end infinite; }
.welcome-skip {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 48px);
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 24px;
  background: transparent;
  color: inherit;
  font: 400 13px / 1.5 var(--font-body, sans-serif);
  cursor: pointer;
}
.welcome-skip:hover { background: var(--white, #fff); }
.welcome-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@keyframes welcome-write { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes welcome-caret { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .welcome-screen { transition: none; }
  .welcome-screen.is-running .welcome-ink path { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .welcome-letter { opacity: 1; visibility: visible; }
  .welcome-typed.is-complete::after { animation: none; opacity: 0; }
}
@media (max-height: 400px) {
  .welcome-signature { width: min(60%, 320px); }
  .welcome-imprint { margin-top: 0; }
  .welcome-skip { bottom: 12px; }
}