/* The accordion-folded word: a strip of paper on a warm page, folded along vertical creases, turned over and
   opened again on its other side. The word is printed in Anybody, on the width axis that makes it fill the strip. */
:root {
  --page: #ece8df;        /* the page */
  --paper: #fbf9f4;       /* the front of the strip */
  --paper-back: #f5f0e5;  /* the back of the strip, a shade warmer */
  --ink: #141414;         /* the printed word and the dimension line */
  --accent: #ff4a1f;      /* the little marks on the creases */
  --shade: #4a4234;       /* the colour of the panels turned away from the light */
}

* {
  box-sizing: border-box;
}

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

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

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

.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, 1800px);
  perspective-origin: 0 0;
  opacity: 0;
}

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

/* every panel turns on its left edge, the crease it shares with the panel before */
.panel {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* the back of the paper: turned over on the horizontal axis, so it reads upright once the strip is turned over */
.face--back {
  background: var(--paper-back);
  transform: rotateX(180deg);
}

/* the marks on the crease, top and bottom: where a printer would say "fold here" */
.face::before,
.face::after {
  content: '';
  position: absolute;
  left: 0;
  width: 1.5px;
  height: 9%;
  background: var(--accent);
  z-index: 2;
}

.face::before {
  top: 0;
}

.face::after {
  bottom: 0;
}

.panel--first .face::before,
.panel--first .face::after {
  display: none;
}

/* the printed word: a whole copy in every panel, moved left so that the panels show it piece by piece */
.print,
.probe {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  line-height: 1;
  white-space: pre;
  text-transform: uppercase;
  font-kerning: normal;
  color: var(--ink);
}

.print {
  opacity: var(--ink-o, 1);
}

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

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

/* the light: the panels that face away from it get darker */
.shade {
  position: absolute;
  inset: 0;
  background: var(--shade);
  opacity: 0;
  z-index: 1;
}

/* ------------------------------------------------------------------ the shadow under the strip */
.shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 20px;
  margin: -10px 0 0 -50px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 32, 20, 0.2), rgba(40, 32, 20, 0));
  will-change: transform, opacity;
}

/* ------------------------------------------------------------------ the dimension line above the strip */
.quota {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

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

.quota__tick {
  position: absolute;
  left: -0.5px;
  top: -6px;
  width: 1px;
  height: 13px;
  background: var(--ink);
  opacity: 0.55;
}

.quota__label {
  position: absolute;
  left: 0;
  top: -26px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 16px;
  font-variation-settings: 'wdth' 100, 'wght' 520;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  white-space: pre;
  color: var(--ink);
  opacity: 0.7;
  transform: translateX(-50%);
}