/* The furniture. Fixed to the viewport, built once, never rebuilt.
 *
 * The name and the glass are kirrr's, with one change to the name: its rows are
 * words that wrap (see engine/wordmark.js). The bottom edge is this site's own.
 */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the name ---------- */

/* Two layers, split by the glass: the rows sit under it, so the glyphs that
   leave are refracted on their way out, and the ones that stay are drawn again
   above it. */
.wordmark,
.wordmark-lockup {
  position: fixed;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
  font-size: var(--wordmark-size);
  line-height: var(--wordmark-leading);
  letter-spacing: var(--wordmark-track);
}

.wordmark { z-index: 9980; }          /* under the glass (9990) */
.wordmark-lockup { z-index: 9999; }   /* over it */

.wordmark-glyph.is-kept { visibility: hidden; }

.lock-glyph {
  position: absolute;
  display: inline-block;
  will-change: transform;
  /* The layer does not take the pointer; the lockup does — it is the way back
     to the top. */
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wordmark-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--inset);
  will-change: transform;
}

/* A row is a line of words, and it may wrap between them. Each line is the cap
   height plus the gap, so the rows sit cap to cap in kirrr's rhythm and a name
   that wraps onto two lines keeps it between its own lines as well — which is
   why the stack itself has no gap. */
.wordmark-row {
  display: block;
  max-width: 100%;
  text-align: center;
  line-height: calc(var(--cap) + var(--wordmark-gap));
}

.wordmark-word { display: inline-block; white-space: nowrap; }

/* Cap height to baseline: the box is the letter, with no room above the
   capitals or below the baseline, so a box centred in the bar puts the letter
   itself in the middle. */
.wordmark-glyph,
.lock-glyph {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.wordmark-glyph {
  display: inline-block;
  will-change: transform;
}

/* The drawn mark hangs from the baseline and stands as tall as a capital. It is
   a black drawing in a differenced layer, so it is turned white first — type
   gets there by being painted white, a picture does not. */
.wordmark-glyph.is-drawn,
.lock-glyph.is-drawn { display: inline-block; vertical-align: baseline; }
.wordmark-glyph.is-drawn img,
.lock-glyph.is-drawn img {
  display: block;
  height: var(--cap);
  width: auto;
  filter: invert(1);
}

/* A section's name, travelling from its own opening screen to the bar. */
.wordmark-case {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform, opacity;
}

.wordmark-case-text {
  white-space: nowrap;
  transform-origin: 50% 50%;
}

/* ---------- glass ---------- */

/* Pure vertical refraction along the bottom edge. The filter is built in
   engine/glass.js, which sizes the displacement map to the viewport. */
.glass {
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--band-h, 8vh);
  z-index: 9990;
  pointer-events: none;
}

.glass--top { top: 0; }
.glass--bottom { top: 0; }

/* On a phone the band joins the document and is carried by script: Safari clips
   a fixed element to the visible window, and a fixed band can never reach the
   bottom of the display. See engine/glass.js. */
@media (hover: none), (pointer: coarse) {
  .glass { position: absolute; }
}

.glass--fallback.glass--bottom {
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
}

#glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ---------- the bottom edge ---------- */

/* Email, the length of the story, CV — the three things along the bottom, over
   the glass. The two links hug the insets and the slider holds the centre
   line, where kirrr's face is. */
.bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--inset) env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: var(--label-size);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}

.bottom > * { pointer-events: auto; }

.bottom-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
}
.bottom-link:last-child { justify-self: end; }
.bottom-arrow { display: block; }

/* The slider: three named stops on one track, and a thumb under the one that
   is on. */
.depth {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--stops, 3), minmax(0, 1fr));
  width: min(330px, 60vw);
  padding: 3px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #fff;
}

.depth input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.depth label {
  position: relative;
  z-index: 1;
  padding: 9px 4px;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px;
  cursor: pointer;
  transition: color 300ms var(--ease-out);
}

/* The stop that is on is written in black on the white thumb — which, once the
   whole bar is differenced, is the page's own colour cut out of a dark pill. */
.depth input:checked + label {
  color: #000;
  -webkit-text-fill-color: #000;
}

.depth-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--stops, 3));
  border-radius: 999px;
  background: #fff;
  transform: translateX(calc(var(--at, 0) * 100%));
  transition: transform 450ms var(--ease-out);
}

.bottom-link:focus-visible,
.depth input:focus-visible + label {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .depth { width: min(250px, 62vw); }
  .depth label { padding: 8px 2px; }
}

/* ---------- over whatever is underneath ---------- */

/* Every piece of furniture reads its colour off what is behind it: white
   differenced against the backdrop is black over a light field and white over a
   dark one, per pixel, as the page moves under it. The blend goes on the
   element that owns the stacking context, never on the text inside it. */
.wordmark,
.wordmark-lockup,
.bottom {
  color: #fff;
  -webkit-text-fill-color: #fff;
  mix-blend-mode: difference;
}