/* The acronym that spells itself out: a minimal type piece. A warm white page, one line of type on a hairline and
   one red seam. The script builds the words and moves them; the styles only set the look. */
:root {
  --paper: #f3f0e8;   /* the page */
  --ink: #141414;     /* the letters */
  --seam: #e0442b;    /* the thin slot the rest of a word comes out of */
  --rule: #b9b3a6;    /* the hairline under the line and the ticks where every word starts */
}

* {
  box-sizing: border-box;
}

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

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

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* the line: a point in the middle of the page; the script moves the words around it and zooms it to fit */
.line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  font-kerning: none;
}

.rule {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}

.word {
  position: absolute;
  left: 0;
  top: 0;
  height: 1.3em;
  line-height: 1.3;
  white-space: nowrap;
}

.ini,
.clip,
.tail {
  position: absolute;
  top: 0;
  height: 1.3em;
  line-height: 1.3;
}

.ini {
  left: 0;
  display: block;
}

/* the slot: as wide as the part of the word that is already out; the word is pinned to its right edge, so it slides
   out from behind the initial */
.clip {
  left: 0;
  width: 0;
  overflow: hidden;
}

.tail {
  right: 0;
  display: flex;
}

.ch {
  display: block;
}

.seam {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--seam);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.tick {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  background: var(--rule);
  transform-origin: 50% 0;
  transform: scaleY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}