@import url("../color/opus-tokens.css?v=2");

:root {
  --display: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  /* Lockup width; clear space is 100 of its 527 units on every side. */
  --lockup: min(760px, 80vw);
  --clear: calc(var(--lockup) * 100 / 527);
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  display: flex;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--clear);
  padding: clamp(32px, 8vw, 96px);
}

/* Primary lockup, Chalk on Ink. */
.lockup { width: var(--lockup); }
.lockup svg { width: 100%; height: auto; display: block; overflow: visible; }

.copy { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }

/* Jost 300 at the book's 24/32 screen size. */
.line {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.333;
  color: var(--chalk);
  text-wrap: balance;
}

.label {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ash);
}

/* The opening, about eight seconds, all in Chalk on Ink. Within the book's
   misuse rules: the mark is never rotated, recoloured, shadowed or
   stretched. It is only drawn.
   0.9s   a held beat of darkness
   0.9s   the O opens from its slot in both directions, closing at six o'clock
   3.8s   P, U and S are drawn stroke by stroke, in writing order
   5.3s   WATCHES is written letter by letter
          throughout, the lockup settles from 103.5% to its true size
   6.5s   the line comes into focus, then the label */
.lockup svg { transform: scale(1.035); animation: settle 6600ms cubic-bezier(.25,.1,.25,1) 900ms forwards; }
/* Dash slightly longer than the path, gap far longer, so rounding never
   leaves a speck at a stroke's end before it is drawn or a gap after. */
.o-draw path, .letters path, .descriptor path { stroke-dasharray: 1.01 2; stroke-dashoffset: 1.01; }
.o-draw path { animation: draw 2600ms cubic-bezier(.65,0,.35,1) 900ms forwards; }
.o-fill { opacity: 0; animation: fade 300ms linear 3450ms forwards; }
.letters path { animation: draw 1150ms cubic-bezier(.55,0,.25,1) calc(3800ms + var(--i) * 320ms) forwards; }
.descriptor path { animation: draw 620ms cubic-bezier(.45,0,.25,1) calc(5300ms + var(--i) * 95ms) forwards; }
.line, .label { opacity: 0; }
html.ready .line { animation: focus 2000ms cubic-bezier(.2,.6,.2,1) forwards; }
html.ready .label { animation: rise 1500ms cubic-bezier(.2,.6,.2,1) 700ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes settle { to { transform: none; } }
@keyframes focus { from { opacity: 0; filter: blur(8px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* A click, tap or key press finishes the opening at once. */
html.skip *, html.skip *::before, html.skip *::after { animation-duration: 1ms !important; animation-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
  .lockup svg, .o-fill, html .line, html .label, html.ready .line, html.ready .label { transform: none; opacity: 1; animation: none; }
  .o-draw path, .letters path, .descriptor path { stroke-dashoffset: 0; animation: none; }
}