/* The word coming into register: one big word on warm paper, in a variable typeface (Roboto Flex, width 25 to 151
   and weight 100 to 1000), cut into thin horizontal strips that sit out of register. A red hairline runs down the
   word and the strips fall into place behind it, one after the other; then they slide apart into the next word. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the word */
  --rule: #bdb7aa;     /* the two guides of the column and their ticks */
  --accent: #e2432a;   /* the hairline that brings the strips into register */
}

* {
  box-sizing: border-box;
}

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

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

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

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

/* ------------------------------------------------------------------ the rig */
/* the script writes the size of the type (--size), the line box (--line), the column (--col), the top of the
   capitals (--cap-top) and their height (--cap) */
.rig {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--col, 600px);
  height: var(--line, 200px);
  visibility: hidden;
}

.rig.is-ready {
  visibility: visible;
}

.line {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--col, 600px);
  height: var(--line, 200px);
  font-size: var(--size, 160px);
  line-height: var(--line, 200px);
  letter-spacing: 0.012em;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  font-kerning: normal;
  /* the script writes width and weight here: the word in register at WIDTH and WEIGHT */
  font-variation-settings: 'wdth' var(--wd, 90), 'wght' var(--wg, 760);
}

.line--probe {
  visibility: hidden;
  pointer-events: none;
}

.line--probe i {
  display: inline-block;
  width: 0;
  height: 0;
}

/* the strips: windows on the line box, cut on whole pixels; each holds a track with the word now and the next one */
.strips {
  position: absolute;
  inset: 0;
}

.strip {
  position: absolute;
  left: 0;
  width: var(--col, 600px);
  overflow: hidden;
}

.track {
  position: absolute;
  left: 0;
  width: var(--col, 600px);
  height: var(--line, 200px);
}

/* the guides: two hairlines on the edges of the column, with a tick at every cut */
.guide {
  position: absolute;
  top: calc(var(--cap-top, 40px) - var(--cap, 120px) * 0.22);
  width: 0;
  height: calc(var(--cap, 120px) * 1.44);
}

.guide--left {
  left: 0;
}

.guide--right {
  left: var(--col, 600px);
}

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

.tick {
  position: absolute;
  height: 1px;
  width: 7px;
  background: var(--rule);
  transform: scaleX(0);
}

.guide--left .tick {
  right: 0;
  transform-origin: 100% 50%;
}

.guide--right .tick {
  left: 0;
  transform-origin: 0% 50%;
}

/* the scan: one red hairline across the column, a little longer than it */
.scan {
  position: absolute;
  left: -14px;
  top: 0;
  width: calc(var(--col, 600px) + 28px);
  height: 0;
}

.scan > i {
  position: absolute;
  left: 0;
  top: -0.5px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0% 50%;
}