/* La parola impressa a secco: una pagina bianco caldo, un biglietto di carta spessa e una parola che non ha colore.
   Le lettere sono dello stesso colore del biglietto: si vedono solo per l'ombra e la luce dei bordi, come in una
   stampa a secco. L'unico colore è il vermiglio del punzone e del punto finale, in lamina. */
:root {
  --page: #ece7dc;     /* la pagina intorno */
  --card: #f7f4ed;     /* il biglietto: anche le lettere sono di questo colore */
  --shade: #5a4630;    /* l'ombra dentro l'impressione (in alto a sinistra) */
  --light: #ffffff;    /* la luce sul bordo opposto (in basso a destra) */
  --foil: #d4462a;     /* il punzone sottile e il punto in lamina */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--page);
  font-family: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* il biglietto: misure scritte dallo script */
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
}

.card__sheet {
  width: 100%;
  height: 100%;
  background: var(--card);
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(60, 45, 25, 0.08),
    0 10px 30px -12px rgba(60, 45, 25, 0.28);
}

.word {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1;
  color: var(--card);
  opacity: 0;
}

/* una lettera: la scatola esterna è di GSAP (scala), il glifo dentro lo colora lo script */
.l {
  position: relative;
  display: inline-block;
  text-align: center;
  transform-origin: 50% 80%;
}

.l__g {
  display: block;
}

/* il riferimento della linea di base: una scatola alta zero allineata alla base */
.base {
  display: inline-block;
  width: 0;
  height: 0;
}

/* il punzone: una cornice sottile vermiglia */
.die {
  position: absolute;
  left: 0;
  top: 0;
  border: 1.5px solid var(--foil);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
}