:root {
  color-scheme: light;
  --porcelain: #f7f6f2;
  --ink: #262724;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  background: var(--porcelain);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  animation: surface-settle 650ms ease-out both;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stage {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100dvh;
  place-items: center;
  padding-bottom: 7dvh;
  isolation: isolate;
  overflow: hidden;
}

.stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../images/grain.png") repeat;
  background-size: 128px 128px;
  content: "";
  opacity: 0.024;
  pointer-events: none;
}

.identity {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}

.identity.is-active {
  visibility: visible;
}

.signature {
  display: block;
  overflow: visible;
  fill: none;
  color: var(--ink);
}

.signature--classic { width: min(29vw, 430px); }
.signature--diplomatic { width: min(30vw, 450px); }
.signature--modern { width: min(32vw, 475px); }
.signature--architect { width: min(32vw, 475px); }
.signature--graphite { width: min(35vw, 520px); }
.signature--quill { width: min(30.5vw, 455px); }

.signature-stroke {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.signature-dot {
  fill: currentColor;
  opacity: 0;
}

.signature--classic .signature-stroke {
  stroke-width: 3.25;
  stroke-linecap: round;
}

.signature--classic .signature-stroke:nth-of-type(2) { stroke-width: 3.65; }
.signature--classic .signature-stroke:nth-of-type(3) { stroke-width: 2.85; }
.signature--classic .signature-stroke:nth-of-type(4) { stroke-width: 3.55; }
.signature--classic .signature-stroke:nth-of-type(5) { stroke-width: 2.7; }

.signature--modern .signature-stroke {
  stroke-width: 2.45;
  stroke-linecap: square;
}

.signature--diplomatic .signature-stroke {
  stroke-width: 2.35;
  stroke-linecap: round;
}

.signature--diplomatic .signature-stroke:nth-of-type(2) { stroke-width: 3.35; }
.signature--diplomatic .signature-stroke:nth-of-type(3) { stroke-width: 1.65; }
.signature--diplomatic .signature-stroke:nth-of-type(4) { stroke-width: 3; }
.signature--diplomatic .signature-stroke:nth-of-type(5) { stroke-width: 1.75; }

.signature--architect .signature-stroke {
  stroke-width: 2.15;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.signature--graphite {
  color: #41413d;
  filter: drop-shadow(0.35px 0.25px 0 rgb(38 39 36 / 0.16));
}

.signature--graphite .signature-stroke {
  stroke-width: 2.05;
  stroke-linecap: round;
  opacity: 0.78;
}

.signature--quill .signature-stroke {
  stroke-width: 2.6;
  stroke-linecap: round;
}

.signature--quill .signature-stroke:nth-of-type(1) { stroke-width: 2.35; }
.signature--quill .signature-stroke:nth-of-type(2) { stroke-width: 3.8; }
.signature--quill .signature-stroke:nth-of-type(3) { stroke-width: 1.7; }
.signature--quill .signature-stroke:nth-of-type(4) { stroke-width: 3.5; }
.signature--quill .signature-stroke:nth-of-type(5) { stroke-width: 1.85; }

.quill-accent {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.diplomatic-flourish {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.identity--classic.is-active .signature-stroke {
  animation: draw 600ms cubic-bezier(0.36, 0, 0.18, 1) var(--delay) forwards;
}

.identity--classic.is-active .signature-dot {
  animation: dot-in 160ms ease-out 1.73s forwards;
}

.identity--diplomatic.is-active .signature-stroke {
  animation: draw 520ms cubic-bezier(0.38, 0, 0.17, 1) var(--delay) forwards;
}

.identity--diplomatic.is-active .signature-dot {
  animation: dot-in 150ms ease-out 1.46s forwards;
}

.identity--diplomatic.is-active .diplomatic-flourish {
  animation: draw 360ms ease-out 1.48s forwards;
}

.identity--modern.is-active .signature-stroke {
  animation: draw 430ms cubic-bezier(0.4, 0, 0.2, 1) var(--delay) forwards;
}

.identity--modern.is-active .signature-dot {
  animation: dot-in 140ms ease-out 1.19s forwards;
}

.identity--architect.is-active .signature-stroke {
  animation: draw 380ms cubic-bezier(0.4, 0, 0.2, 1) var(--delay) forwards;
}

.identity--graphite.is-active .signature-stroke {
  animation: draw 470ms cubic-bezier(0.4, 0, 0.24, 1) var(--delay) forwards;
}

.identity--graphite.is-active .signature-dot {
  animation: dot-in 140ms ease-out 1.3s forwards;
}

.identity--quill.is-active .signature-stroke {
  animation: draw 560ms cubic-bezier(0.42, 0, 0.15, 1) var(--delay) forwards;
}

.identity--quill.is-active .signature-dot {
  animation: dot-in 160ms ease-out 1.52s forwards;
}

.identity--quill.is-active .quill-accent {
  animation: draw 420ms cubic-bezier(0.42, 0, 0.18, 1) 1.34s forwards;
}

.identity--classic.is-exiting .signature-stroke {
  animation: unwrite 780ms cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}

.identity--classic.is-exiting .signature-dot,
.identity--diplomatic.is-exiting .signature-dot,
.identity--modern.is-exiting .signature-dot,
.identity--graphite.is-exiting .signature-dot,
.identity--quill.is-exiting .signature-dot {
  animation: dot-out 140ms ease-in forwards;
}

.identity--diplomatic.is-exiting .signature {
  animation: ink-settle 720ms cubic-bezier(0.55, 0, 0.8, 0.3) forwards;
}

.identity--modern.is-exiting .signature-stroke,
.identity--architect.is-exiting .signature-stroke {
  animation: line-reduce 640ms cubic-bezier(0.55, 0, 0.75, 0.25) forwards;
}

.identity--graphite.is-exiting .signature {
  animation: graphite-out 740ms ease-in forwards;
}

.identity--quill.is-exiting .signature {
  animation: ink-settle 760ms cubic-bezier(0.55, 0, 0.8, 0.3) forwards;
}

@keyframes surface-settle {
  from { background-color: #fbfaf7; }
  to { background-color: var(--porcelain); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes dot-in {
  to { opacity: 1; }
}

@keyframes dot-out {
  to { opacity: 0; }
}

@keyframes unwrite {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

@keyframes line-reduce {
  from { stroke-dashoffset: 0; opacity: 1; }
  to { stroke-dashoffset: -0.18; opacity: 0; }
}

@keyframes ink-settle {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(0.25px); }
}

@keyframes graphite-out {
  from { opacity: 1; filter: drop-shadow(0.35px 0.25px 0 rgb(38 39 36 / 0.16)) blur(0); }
  to { opacity: 0; filter: drop-shadow(0 0 0 transparent) blur(0.35px); }
}

@media (max-width: 560px) {
  .stage { padding-bottom: 6dvh; }
  .signature--classic { width: 61vw; }
  .signature--diplomatic { width: 64vw; }
  .signature--modern { width: 68vw; }
  .signature--architect { width: 68vw; }
  .signature--graphite { width: 72vw; }
  .signature--quill { width: 64vw; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .identity:not(.identity--classic) { display: none; }
  .identity--classic { visibility: visible; }

  .identity--classic .signature-stroke,
  .identity--classic.is-active .signature-stroke {
    stroke-dashoffset: 0;
    animation: none;
  }

  .identity--classic .signature-dot,
  .identity--classic.is-active .signature-dot {
    opacity: 1;
    animation: none;
  }
}