/* Bars that fold into figures: the annual report of a made-up architecture studio, in the minimal style. A warm white
   page, black ink, one red for the bar. In a tall section a stage stays still while you scroll: a hairline across the
   screen with five small ticks, and on it three figures that take turns. The script splits every figure into its
   digits, adds the pieces of bar and draws them. */
:root {
  --carta: #f4f2ee;        /* the warm white of the page */
  --inchiostro: #121212;   /* the figures and the words */
  --tenue: #8e8a82;        /* the small text */
  --sottile: #d6d2c9;      /* the hairline and its ticks */
  --barra: #ff3b1f;        /* the bar and its pieces */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Inter Tight Variable', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ the opening and the end */
.apertura {
  display: grid;
  align-content: center;
  gap: 22px;
  min-height: 92vh;
  padding: 80px clamp(16px, 5vw, 72px);
}

.apertura--fine {
  min-height: 70vh;
}

.piccolo {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.piccolo--tenue {
  color: var(--tenue);
}

.titolo {
  margin: 0;
  font-size: clamp(52px, 9vw, 132px);
  font-weight: 250;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.titolo--medio {
  font-size: clamp(40px, 6vw, 88px);
}

/* ------------------------------------------------------------ the stage */
.racconto {
  position: relative;
  height: 560lvh;
}

.palco {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
}

.testa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 26px clamp(16px, 5vw, 72px);
}

.marchio {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.scena {
  position: absolute;
  inset: 0;
}

/* the three figures sit in the same place, one over the other: only the one being told is drawn */
.cifre {
  position: absolute;
  left: clamp(16px, 5vw, 72px);
  bottom: 38%;
  display: grid;
}

.cifra {
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  margin: 0;
}

.cifra__numero {
  margin: 0;
  font-size: min(25vw, 46lvh);
  font-weight: var(--w, 620);
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.cifra__numero .g {
  display: inline-block;
}

/* a copy of the figure that never moves, always thin: the script measures the digits on it */
.righello {
  position: absolute;
  left: 0;
  bottom: 0;
  visibility: hidden;
  pointer-events: none;
  font-weight: var(--peso-sottile, 200);
}

.sonda {
  display: inline-block;
  width: 0;
  height: 0;
}

/* the label sits beside the figure, its last line on the hairline; --sotto is written by the script */
.cifra__dida {
  position: absolute;
  left: 100%;
  bottom: calc(var(--sotto, 0px) + 6px);
  display: grid;
  gap: 5px;
  width: max-content;
  padding-left: clamp(14px, 1.8vw, 30px);
  white-space: nowrap;
}

.cifra__riga {
  display: block;
  overflow: hidden;
  padding: 2px 0;
}

.cifra__nome,
.cifra__nota {
  display: inline-block;
}

.cifra__nome {
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 520;
  letter-spacing: -0.015em;
}

.cifra__nota {
  color: var(--tenue);
  font-size: clamp(13px, 1vw, 15px);
}

/* the hairline: its height and top are written by the script, on the baseline of the figures */
.linea {
  position: absolute;
  left: clamp(16px, 5vw, 72px);
  right: clamp(16px, 5vw, 72px);
  top: 62%;
  height: 1px;
  background: var(--sottile);
  transform-origin: 0 50%;
}

.tacca {
  position: absolute;
  top: 0;
  width: 1px;
  height: 7px;
  background: var(--sottile);
  transform-origin: 50% 0;
}

.tacca:nth-child(1) { left: 0; }
.tacca:nth-child(2) { left: 25%; }
.tacca:nth-child(3) { left: 50%; }
.tacca:nth-child(4) { left: 75%; }
.tacca:nth-child(5) { right: 0; }

.pezzi {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* a piece of bar is one pixel wide and gets its length from scaleX */
.pezzo {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  background: var(--barra);
  transform-origin: 0 0;
  will-change: transform;
}

.segno {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 11px;
  margin-left: -1px;
  background: var(--barra);
  transform-origin: 50% 0;
}

.punta {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--barra);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.01em;
  white-space: nowrap;
  will-change: transform, opacity;
}

.voci {
  position: absolute;
  left: clamp(16px, 5vw, 72px);
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 13px;
  font-weight: 500;
}

.voce {
  color: var(--sottile);
}

/* ------------------------------------------------------------ phone: the same, with the label under the hairline */
@media (max-width: 640px) {
  .cifre {
    bottom: 50%;
  }

  .cifra__numero {
    font-size: min(34vw, 40lvh);
  }

  .cifra__dida {
    left: 0;
    bottom: auto;
    top: calc(100% - var(--sotto, 0px) + 24px);
    padding-left: 0;
  }

  .voci {
    gap: 8px 22px;
  }
}