/* The layered word: one big word on warm paper, in a variable typeface (Archivo, width 62 to 125 and weight 100 to
   900), made of a stack of copies in real CSS 3D. Flat at rest; near the pointer the stack tilts and fans out in depth,
   each copy lighter and thinner than the one in front, the deepest one in the accent. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the word in front */
  --accent: #e8452c;   /* the deepest copy, the back of the ream */
  --quiet: #8a857b;    /* the small lines */
}

* {
  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;
  touch-action: none;
}

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

/* ------------------------------------------------------------------ the stack */
/* the script writes the size of the type (--size) and the depth of view (--prospettiva) */
.scena {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: var(--prospettiva, 1600px);
  visibility: hidden;
}

.scena.pronta {
  visibility: visible;
}

.pila {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.strato {
  text-align: center;
  font-size: var(--size, 160px);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variation-settings: 'wdth' 100;
  color: var(--ink);
  will-change: transform, opacity;
}

/* the copies behind the front one sit on top of it, in the same place */
.strato + .strato {
  position: absolute;
  inset: 0;
}

.strato--fondo {
  color: var(--accent);
}

/* the copies in between are only the outline of the word, a hairline: the edges of the sheets */
.strato--mezzo {
  color: transparent;
  -webkit-text-stroke: var(--filo, 1px) var(--ink);
}

/* ------------------------------------------------------------------ the small lines */
.nota,
.aiuto {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--quiet);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nota {
  top: 28px;
}

.aiuto {
  bottom: 28px;
}

@media (max-width: 560px) {
  .nota {
    top: 20px;
  }

  .aiuto {
    bottom: 22px;
  }
}