@font-face {
  /* ISO 3098 lettering, the hand of technical drawings. */
  font-family: "Osifont";
  src: url("fonts/osifont-latin.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Machinist's layout fluid on steel, and the bright metal a scriber exposes. */
  --plate: #1e2d8c;
  --scribe: #e8ecf6;
  --scribe-soft: rgba(232, 236, 246, .62);
  --scribe-dim: rgba(232, 236, 246, .26);
  --scribe-faint: rgba(232, 236, 246, .13);
  --edge: clamp(1.25rem, 4.5vmin, 3.5rem);
  --px: 1;
  color-scheme: dark;
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--plate);
  color: var(--scribe);
  font-family: "Osifont", "DIN Alternate", Bahnschrift, "Arial Narrow", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ---- the drawing ---- */

#plate {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#plate.is-turning { cursor: grabbing; }

#plate * { vector-effect: none; }

.construct {
  fill: none;
  stroke: var(--scribe-dim);
  stroke-width: calc(var(--px) * 1px);
}
.construct .faint { stroke: var(--scribe-faint); }

.ground path {
  fill: none;
  stroke: var(--scribe-soft);
  stroke-width: calc(var(--px) * 1.1px);
  stroke-linecap: round;
}

.link {
  fill: var(--plate);
  stroke: var(--scribe);
  stroke-width: calc(var(--px) * 1.35px);
  stroke-linejoin: round;
}
.hole {
  fill: none;
  stroke: var(--scribe);
  stroke-width: calc(var(--px) * 1.1px);
}

.trail {
  fill: none;
  stroke: var(--scribe);
  stroke-linecap: round;
}
.trail-1 { stroke-width: calc(var(--px) * 2px); }
.trail-1 { filter: drop-shadow(0 0 calc(var(--px) * 3px) rgba(232, 236, 246, .55)); }
.trail-2 { stroke-width: calc(var(--px) * 1.5px); opacity: .6; }
.trail-3 { stroke-width: calc(var(--px) * 1.2px); opacity: .32; }

.scriber circle {
  fill: var(--plate);
  stroke: var(--scribe);
  stroke-width: calc(var(--px) * 1.35px);
}
.scriber path {
  fill: none;
  stroke: var(--scribe);
  stroke-width: calc(var(--px) * 1.1px);
}

.note path {
  fill: none;
  stroke: var(--scribe-soft);
  stroke-width: calc(var(--px) * 1px);
}
.note circle { fill: var(--scribe-soft); }
.note text {
  fill: var(--scribe-soft);
  font-size: calc(var(--px) * 14px);
  letter-spacing: .03em;
}
.note { transition: opacity .8s ease; }
.note.is-done { opacity: 0; }

/* ---- coating: grain and lamp light over the drawing, under the type ---- */

.coating {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 85% at 64% 36%, rgba(255, 255, 255, .045), transparent 62%),
    radial-gradient(140% 120% at 50% 50%, transparent 52%, rgba(6, 10, 48, .5));
}
.coating::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- title ---- */

.title {
  position: fixed;
  left: var(--edge);
  bottom: var(--edge);
  max-width: min(44rem, calc(100vw - 2 * var(--edge)));
  pointer-events: none;
}
.title a { pointer-events: auto; }

h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: .01em;
}

/* The name in ANSI Shadow, drawn cell by cell from the figlet text in the script. */
.wordmark {
  display: block;
  width: min(34rem, calc((100vw - 2 * var(--edge)) * .85), 76vh);
  height: auto;
  overflow: visible;
}
.wordmark .blocks { fill: var(--scribe); }
.wordmark .seams {
  stroke: var(--plate);
  stroke-opacity: .25;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.wordmark .shadow {
  fill: none;
  stroke: var(--scribe);
  stroke-opacity: .8;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
h1.is-drawn .wordmark-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
h1.is-drawn .wordmark { animation: print .7s steps(42, end) 1s both; }
@keyframes print {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.title p {
  margin: 0 0 1.4rem;
  max-width: 27em;
  font-size: clamp(1.05rem, 1rem + .25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: .015em;
  word-spacing: -.1em;
  color: var(--scribe-soft);
  text-wrap: pretty;
}

.title a {
  font-size: clamp(1.05rem, 1rem + .25vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--scribe);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  text-decoration-color: var(--scribe-dim);
  transition: text-decoration-color .2s ease;
}
.title a:hover { text-decoration-color: var(--scribe); }
.title a:focus-visible {
  outline: 1.5px solid var(--scribe);
  outline-offset: .3em;
  border-radius: 1px;
}

/* ---- the one orchestrated moment: the layout is scribed, then it runs ---- */

.scribe-in {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: scribe var(--dur, 1.1s) cubic-bezier(.55, .05, .25, 1) var(--delay, 0s) forwards;
}
@keyframes scribe { to { stroke-dashoffset: 0; } }

.reveal-x {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  animation: reveal-x 1.3s cubic-bezier(.6, .05, .2, 1) .1s forwards;
}
@keyframes reveal-x { to { transform: scaleX(1); } }

.fade-in {
  opacity: 0;
  animation: fade-in .9s ease var(--delay, 0s) forwards;
}
@keyframes fade-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .scribe-in, .reveal-x, .fade-in { animation: none; }
  .scribe-in { stroke-dasharray: none; stroke-dashoffset: 0; }
  .reveal-x { transform: none; }
  .fade-in { opacity: 1; }
  h1.is-drawn .wordmark { animation: none; }
}


/* ---- intro timing, one line per drawn element ---- */

.ground { --delay: .6s; }
#crank .link { --delay: .65s; }
#crank-circle { --delay: .35s; --dur: 1s; }
#swing-arc { --delay: .55s; --dur: .9s; }
#rocker .link { --delay: .8s; }
#coupler-bar { --delay: 1s; --dur: 1.1s; }
#coupler-arm { --delay: 1.25s; --dur: .7s; }
#holes { --delay: 1.3s; }
#curve { --delay: 1.4s; --dur: 1.6s; }
#scriber { --delay: 1.6s; }
#note { --delay: 2.6s; }
.title p { --delay: 1.15s; }
.title a { --delay: 1.3s; }