/* The word in the fanned sheets: a stack of very thin sheets on a warm white page, one letter printed on each. The
   letters are set in Archivo, on the width axis that lets each one fill the strip of its sheet left uncovered. */
:root {
  --page: #f3f0e8;     /* the page */
  --paper: #fcfbf7;    /* the sheets */
  --ink: #141414;      /* the letters and the edges of the sheets */
  --accent: #ff4a1f;   /* the edge of the last sheet in the stack */
  --line: rgba(20, 20, 20, 0.16); /* the hairline round every sheet */
}

* {
  box-sizing: border-box;
}

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

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

.stage {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

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

/* ------------------------------------------------------------------ the scene: a point in the middle of the page */
.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  perspective: var(--persp, 1600px);
  perspective-origin: 0 0;
  opacity: 0;
}

.deck {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* one sheet: it turns in its own plane round a pin below its foot, like a card in a fanned hand */
.sheet {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), -3px 0 10px rgba(40, 32, 20, 0.07);
}

/* the letter, at the top left corner: the part of the sheet that the next one leaves uncovered */
.letter {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  line-height: 1;
  white-space: pre;
  color: var(--ink);
  text-transform: uppercase;
  font-kerning: none;
}

/* the edge of the sheet, at right angles to it: all you see of the stack when it is turned edge on */
.edge {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--ink);
  opacity: 0.6;
  transform-origin: 50% 0;
}

.sheet--accent .edge {
  background: var(--accent);
  opacity: 1;
}

.sheet--accent .face {
  box-shadow: inset 1.5px 0 0 0 var(--accent), inset 0 0 0 1px var(--line), -3px 0 10px rgba(40, 32, 20, 0.07);
}

/* ------------------------------------------------------------------ the keyboard handle: the whole page, unseen */
.handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  outline: none;
}

.handle:focus-visible + .note .note__rule {
  background: var(--accent);
  opacity: 1;
}

/* ------------------------------------------------------------------ the note at the foot of the page */
.note {
  position: absolute;
  left: 50%;
  bottom: max(28px, 5vh);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-variation-settings: 'wdth' 100, 'wght' 480;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-50%);
}

.note__hint {
  opacity: 0.55;
}

.note__rule {
  width: 40px;
  height: 1px;
  background: var(--ink);
  opacity: 0.3;
}

.note__deg {
  min-width: 3.2em;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.probe {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  line-height: 1;
  white-space: pre;
  text-transform: uppercase;
  font-kerning: none;
  visibility: hidden;
  pointer-events: none;
}

.probe__base {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}