/* The wire cube: one cube of hairlines on warm paper, a word on every face. Drag it and it spins on, slows down
   and snaps to the face nearest to you, whose word takes on weight and the one colour of the page. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the wire and the words */
  --accent: #ff3d1f;   /* the word that faces you, once the cube has settled */
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background: var(--paper);
  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;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

@media (hover: hover) {
  .stage {
    cursor: grab;
  }
}

.stage.is-dragging {
  cursor: grabbing;
}

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

/* the scene is a point in the middle of the page with the perspective on it; the script sets --s (the side of the
   cube) and --p (the distance of the eye) in pixels */
.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  perspective: var(--p, 1200px);
  perspective-origin: 0 0;
  pointer-events: none;
}

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

/* every face is a square centred on the middle of the cube, pushed out to its side by the script */
.face {
  position: absolute;
  left: calc(var(--s, 300px) / -2);
  top: calc(var(--s, 300px) / -2);
  width: var(--s, 300px);
  height: var(--s, 300px);
  backface-visibility: visible;
}

.word {
  position: absolute;
  left: 50%;
  top: 50%;
  /* set at twice the size and scaled by half in the script: a face in 3D is painted at its own size and then
     enlarged by the perspective, and the front word would come out soft */
  font-size: calc(var(--type, 70px) * 2);
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: pre;
  font-kerning: normal;
}

/* the hint under the cube; it goes away the first time someone takes the cube */
.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, 7vh);
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 112, 'wght' 460;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}

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

.stage:focus-visible .hint {
  opacity: 0.6 !important;
}