/* The paintbrush logo: a stage as big as the window, an SVG the script fills with the canvas, the strokes and the
   brush. Every colour is a variable here: the canvas, the two paints, the bristles, the ferrule, the handle. */
:root {
  --canvas: #f6f2ea;        /* the primed canvas */
  --canvas-deep: #e9e2d4;   /* the canvas towards the corners */
  --weave: #8a7b62;         /* the threads of the weave */
  --paint: #e5432c;         /* the first stroke: vermilion */
  --paint-deep: #a8251a;    /* its ridges and the rim round the letters */
  --paint-light: #ff8a66;   /* its wet shine */
  --paint-2: #ffc02a;       /* the second stroke: cadmium yellow */
  --paint-2-deep: #d88a0c;  /* its ridges */
  --paint-2-light: #fff0a8; /* its wet shine */
  --shine: #ffffff;         /* the glint that runs along fresh paint */
  --bristle: #ead2a4;       /* the bristles, clean */
  --bristle-deep: #8c6a3c;  /* the lines between the bristles */
  --ferrule: #c9ced6;       /* the metal ferrule */
  --ferrule-deep: #7d8592;  /* its crimps */
  --handle: #1f5b54;        /* the lacquered handle */
  --handle-light: #5fa69a;  /* its shine */
  --handle-end: #e9b45a;    /* the gilded ring and the tip of the handle */
  --line: #24170f;          /* the outline of the brush */
  --shadow: #3d2c1a;        /* the brush's shadow on the canvas */
  --hint: #8d816c;          /* 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(130% 95% at 50% 45%, var(--canvas) 55%, var(--canvas-deep));
  background-color: var(--canvas);
  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 painted in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Syne Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}

/* the canvas */
.tela { fill: transparent; }
.tela-trama { opacity: 0.5; }

/* the first stroke */
.pittura { fill: var(--paint); }
.pittura-cresta { fill: none; stroke: var(--paint-deep); stroke-linecap: round; }
.pittura-luce { fill: none; stroke: var(--paint-light); stroke-linecap: round; }
.pittura-secca { fill: none; stroke: var(--paint); stroke-linecap: round; }
.pittura-buchi { fill: none; stroke: var(--canvas); stroke-linecap: round; }
.pittura-bordo { fill: none; stroke: var(--paint-deep); stroke-linejoin: round; }
.pittura-onda { fill: none; stroke: var(--paint-light); }
.colatura,
.schizzo { fill: var(--paint); }

/* the second stroke */
.pittura-2 { fill: var(--paint-2); }
.pittura-2-cresta { fill: none; stroke: var(--paint-2-deep); stroke-linecap: round; }
.pittura-2-luce { fill: none; stroke: var(--paint-2-light); stroke-linecap: round; }
.pittura-2-secca { fill: none; stroke: var(--paint-2); stroke-linecap: round; }
.schizzo-2 { fill: var(--paint-2); }
.tinta-buco { flood-color: #000; }
.tinta-bordo { flood-color: var(--paint-deep); }

.lucido-stop { stop-color: var(--shine); stop-opacity: 0.6; }
.lucido-stop--via { stop-opacity: 0; }
.ombra-tinta { flood-color: var(--shadow); }

/* the brush: flat colours with an outline */
.setole,
.ghiera {
  stroke: var(--line);
  stroke-linejoin: round;
}
.setole { fill: var(--bristle); }
.setole-colore { fill: var(--paint); }
.setole-colore.col-2 { fill: var(--paint-2); }
.setole-fili { fill: none; stroke: var(--bristle-deep); stroke-linecap: round; opacity: 0.55; }
.setole-lucido { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.4; }
.ghiera { fill: var(--ferrule); }
.ghiera-righe { fill: none; stroke: var(--ferrule-deep); stroke-linecap: round; }
.ghiera-luce { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.75; }
.manico { fill: var(--handle); stroke: var(--line); stroke-linejoin: round; }
.manico-luce { fill: none; stroke: var(--handle-light); stroke-linecap: round; opacity: 0.8; }
.manico-riflesso { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.55; }
.manico-anello { fill: var(--handle-end); stroke: var(--line); stroke-linejoin: round; }
.goccia-pennello { fill: var(--paint); stroke: var(--paint); stroke-linecap: round; }
.goccia-pennello.col-2 { fill: var(--paint-2); stroke: var(--paint-2); }

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