/* The word in the slit: one big word on warm paper, in a variable typeface (Archivo, width 62 to 125 and weight
   100 to 900). A hairline cuts it across the middle, the top half slides left and the bottom half right, and in the
   slit that opens a second, smaller word appears; then the halves close on it and it becomes the new big word. */
:root {
  --paper: #f1eee8;    /* the page */
  --ink: #131312;      /* the big word */
  --accent: #2b45f0;   /* the word in the slit and the hairline of the cut */
}

* {
  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;
  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 height of the line box (--line) and where the cut runs (--cut) */
.rig {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--line, 200px);
  visibility: hidden;
}

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

.line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--line, 200px);
  font-size: var(--size, 160px);
  line-height: var(--line, 200px);
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  font-kerning: normal;
  /* the script writes width and weight here: the big word at WIDTH and WEIGHT */
  font-variation-settings: 'wdth' var(--wd, 75), 'wght' var(--wg, 800);
}

/* every letter is its own span, the same in every copy of a word, so the copies line up to the pixel */
.line span {
  position: relative;
}

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

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

/* the two halves: two windows on the line box, cut at --cut; each holds a track with the word now and the next one */
.band {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  visibility: hidden;
}

.band--top {
  top: 0;
  height: var(--cut, 100px);
}

.band--bottom {
  top: var(--cut, 100px);
  height: calc(var(--line, 200px) - var(--cut, 100px));
}

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

.band--bottom .track {
  top: calc(var(--cut, 100px) * -1);
}

/* the slit: the whole line box, clipped by the script to the strip between the halves */
.slit {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--line, 200px);
  visibility: hidden;
}

.line--small {
  color: var(--accent);
  transform-origin: 50% var(--cut, 100px);
}

/* the blade: two hairlines on the edges of the slit; at rest they are one line across the word */
.blade {
  position: absolute;
  left: 0;
  top: var(--cut, 100px);
  width: 100%;
  height: 0;
}

.blade i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
}

.blade--top i {
  top: -1px;
}

.blade--bottom i {
  top: 0;
}