/* The rubber-stamp logo: a stage as big as the window, an SVG the script fills with the sheet, the ink pad and the
   stamp. Every colour is a variable here: the desk, the paper, the ink, the wood, the rubber, the tin. */
:root {
  --desk: #e7ddca;          /* the background: the desk */
  --desk-deep: #d6c9b0;     /* the desk towards the corners */
  --paper: #fbf8f0;         /* the sheet of paper */
  --paper-edge: #d3c4a8;    /* its edge */
  --paper-shade: #6f5a38;   /* its shadow on the desk */
  --grain: #7a6440;         /* the specks and fibres in the paper */
  --ink: #2f4fd0;           /* the ink, once dry */
  --ink-wet: #1a2c96;       /* the ink, fresh and wet */
  --shine: #ffffff;         /* the shine of fresh ink */
  --handle: #b65a2c;        /* the turned handle */
  --handle-deep: #7e3515;   /* its shaded side and grain */
  --wood: #e0aa6c;          /* the wooden block */
  --wood-deep: #a8692f;     /* its grain and shaded side */
  --wood-line: #3b1c0c;     /* the outline of the stamp */
  --cushion: #8f8a82;       /* the grey cushion under the block */
  --rubber: #cf4a32;        /* the rubber */
  --rubber-deep: #8e2818;   /* the raised letters on the rubber */
  --tin: #3f4d5e;           /* the tin of the ink pad */
  --tin-light: #73879b;     /* its rim */
  --tin-deep: #27313d;      /* inside its lid */
  --tin-line: #151c25;      /* its outline */
  --felt: #1d2b7e;          /* the felt soaked in ink */
  --eye: #fffaf0;           /* the white of the eyes */
  --iris: #2c8a7a;          /* the eyes */
  --pupil: #1b120c;         /* the pupils and the mouth */
  --blush: #f0866b;         /* the cheeks */
  --shock: #c4b393;         /* the shock wave on the paper */
  --dust: #e9e1d0;          /* the puffs of paper dust */
  --hint: #8a7d66;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: radial-gradient(120% 90% at 50% 45%, var(--desk) 55%, var(--desk-deep));
  background-color: var(--desk);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* the logo is printed in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Familjen Grotesk Variable', 'Arial Black', sans-serif;
  font-weight: 700;
}

/* the sheet */
.foglio { fill: var(--paper); }
.foglio-grana { opacity: 0.55; }
.foglio-bordo { fill: none; stroke: var(--paper-edge); stroke-linejoin: round; }
.foglio-ombra { fill: var(--paper-shade); opacity: 0.16; }
.foglio-ombra--larga { opacity: 0.08; }

/* the print */
.stampa { fill: var(--ink); }
.stampa-bagnata { fill: var(--ink-wet); }
.lucido-stop { stop-color: var(--shine); stop-opacity: 0.75; }
.lucido-stop--via { stop-opacity: 0; }
.tinta-inchiostro { flood-color: var(--ink); }
.tinta-bagnata { flood-color: var(--ink-wet); }
.tinta-gomma { flood-color: var(--rubber-deep); }

/* the stamp: flat colours with an outline, so that every piece reads even over another piece of the same wood */
.blocco,
.blocco-cima,
.manico,
.cuscino,
.gomma,
.gomma-faccia,
.occhio,
.palpebra {
  stroke: var(--wood-line);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.blocco { fill: var(--wood); }
.blocco-cima { fill: var(--wood); }
.blocco-cima-luce { fill: #fff; opacity: 0.28; }
.blocco-bordo { fill: none; stroke: var(--wood-line); stroke-linejoin: round; }
.blocco-ombra { fill: var(--wood-deep); opacity: 0.45; }
.blocco-luce { fill: #fff; opacity: 0.22; }
.venatura { fill: none; stroke: var(--wood-deep); stroke-linecap: round; opacity: 0.5; }
.nodo { fill: var(--wood-deep); opacity: 0.55; }
.manico { fill: var(--handle); stroke: none; }
.manico-bordo { fill: none; stroke: var(--wood-line); stroke-width: 3.2; stroke-linejoin: round; }
.manico-ombra { fill: var(--handle-deep); opacity: 0.55; }
.manico-vena,
.manico-riga,
.manico-lucido {
  fill: none;
  stroke-linecap: round;
}
.manico-vena { stroke: var(--handle-deep); stroke-width: 2.2; opacity: 0.45; }
.manico-riga { stroke: var(--handle-deep); stroke-width: 2.6; }
.manico-lucido { stroke: #fff; stroke-width: 5; opacity: 0.32; }
.manico-riflesso { fill: #fff; opacity: 0.5; }
.appoggio { fill: var(--wood-line); opacity: 0.22; }
.cuscino { fill: var(--cushion); }
.gomma { fill: var(--rubber); }
.gomma-faccia { fill: var(--rubber); }
.gomma-lettera { fill: var(--rubber-deep); }
.gomma-inchiostro { fill: var(--ink-wet); }
.timbro-ombra { fill: var(--paper-shade); }

/* its face */
.occhio { fill: var(--eye); stroke-width: 2.4; }
.iride { fill: var(--iris); }
.pupilla { fill: var(--pupil); }
.riflesso { fill: #fff; }
.palpebra { fill: var(--wood); stroke-width: 2.4; }
.guancia { fill: var(--blush); opacity: 0.7; }
.ciglio,
.bocca {
  fill: none;
  stroke: var(--wood-line);
  stroke-linecap: round;
}
.ciglio { stroke-width: 4.6; }
.bocca { stroke-width: 3.6; }
.bocca-aperta { fill: var(--pupil); }

/* the ink pad */
.latta,
.latta-bordo,
.latta-interno,
.feltro {
  stroke: var(--tin-line);
  stroke-linejoin: round;
}
.latta { fill: var(--tin); }
.latta-bordo { fill: var(--tin-light); }
.latta-interno { fill: var(--tin-deep); }
.latta-rilievo { fill: none; stroke: var(--tin); }
.latta-lucido { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.3; }
.latta-scuro { fill: var(--tin-line); opacity: 0.35; }
.feltro { fill: var(--felt); }
.feltro-lucido { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.22; }
.feltro-segno { fill: var(--ink-wet); }
.tampone-ombra { fill: var(--paper-shade); opacity: 0.2; }
.goccia { fill: var(--ink-wet); }

/* the effects */
.onda { fill: none; stroke: var(--shock); }
.colpo {
  fill: none;
  stroke: var(--wood-line);
  stroke-linecap: round;
}
.polvere { fill: var(--dust); }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Familjen Grotesk Variable', 'Arial Black', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}