/* Afloat: a minimal hover piece. Warm paper, one word afloat on one hairline of water. Above the line the letters
   are ink; below it the same letters are seen through the water: wider, lighter, a little magnified and blue. The
   pointer stirs the water, the ripples run along the line and the letters ride them, rocking on their own springs,
   while the part under the surface bends with the slope of the water. */
:root {
  --paper: #f3f0e8;       /* the background */
  --ink: #141414;         /* the word above the water */
  --deep: #2b3cff;        /* the colour of the word under the water */
  --line: #141414;        /* the waterline */
  --muted: #8a8478;       /* the small print */
  --weight: 580;          /* how heavy the word is above the water (100 to 900) */
  --width: 96;            /* how wide the word is above the water, in percent (62 to 125) */
  --under-weight: 380;    /* how heavy the word looks under the water */
  --under-width: 116;     /* how wide the word looks under the water: the water magnifies */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* the word for screen readers: the letters on show are drawn twice, above and below the water */
.title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the two layers cover the whole stage; the script cuts them along the surface of the water */
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layer--water {
  color: var(--deep);
}

/* a letter: a still box at its place, and the glyph inside that rides the water */
.l {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  line-height: 1;
  white-space: pre;
}

.g {
  display: block;
  font-weight: var(--weight);
  font-stretch: calc(var(--width) * 1%);
  will-change: transform;
  opacity: 0;
}

.layer--water .g {
  font-weight: var(--under-weight);
  font-stretch: calc(var(--under-width) * 1%);
}

.measure {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  line-height: 1;
  white-space: pre;
  visibility: hidden;
  pointer-events: none;
}

.measure span {
  display: block;
  font-weight: var(--weight);
  font-stretch: calc(var(--width) * 1%);
}

.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.line {
  fill: none;
  stroke: var(--line);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hint,
.read {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 460;
  font-stretch: 100%;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
}

.read {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* a little window the word rolls through when the water changes */
.read__win {
  display: inline-block;
  overflow: hidden;
  min-width: 4.6em;
  height: 1.3em;
  text-align: left;
}

.read__value {
  display: inline-block;
  font-weight: 620;
  font-stretch: 92%;
  color: var(--ink);
}

.read__value.is-deep {
  color: var(--deep);
}

@media (hover: hover) and (pointer: fine) {
  .stage {
    cursor: crosshair;
  }
}

@media (max-width: 560px) {
  .hint,
  .read {
    font-size: 11px;
  }
}