/* The wrecking-ball logo: a stage as big as the window, an SVG the script fills with the logo, and a crane with its
   operator drawn once in the page. Every colour is a variable here: the logo, the crane, the ball, the dust. */
:root {
  --paper: #efe9dd;        /* the background, and the colour of the cracks */
  --ink: #1d1b21;          /* the logo */
  --ground: #cbc0ac;       /* the line of the ground */
  --crane: #f4b223;        /* the crane */
  --crane-deep: #cf8612;   /* its shadows, its mast and the bars of its boom */
  --crane-line: #2b2116;   /* its outline */
  --steel: #3a3b43;        /* the tracks */
  --steel-light: #777985;  /* the wheels and the treads */
  --ball: #4a4e5a;         /* the wrecking ball */
  --ball-deep: #24262d;    /* the shadow on the ball */
  --ball-line: #141519;    /* the outline of the ball and the chain */
  --chain: #8e919c;        /* the chain */
  --cabin: #34444c;        /* inside the cabin */
  --glass: #c4e6f0;        /* the cabin glass */
  --skin: #f3b48f;         /* the operator's face and hands */
  --skin-deep: #d9875f;    /* his nose */
  --blush: #ef8578;        /* his cheeks */
  --helmet: #ffd93a;       /* his helmet */
  --helmet-deep: #e2a514;  /* the brim of the helmet */
  --moustache: #6a3b20;    /* his moustache and brows */
  --iris: #4b87c6;         /* his eyes */
  --vest: #ff7a1e;         /* his vest */
  --shirt: #3b6cb3;        /* his shirt and sleeves */
  --seat: #5c3b2d;         /* his seat */
  --knob: #e03a2f;         /* the knob of the lever */
  --dust: #d5c7ad;         /* the dust */
  --smoke: #9a958e;        /* the exhaust smoke */
  --hint: #8c8273;         /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--paper);
  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 written in this face, as heavy and as wide as it goes: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Archivo Variable', 'Arial Black', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
}

.lettera,
.briciola { fill: var(--ink); }
.crepa {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.terra {
  stroke: var(--ground);
  stroke-linecap: round;
}
.ombra-palla { fill: var(--ink); }
.nube { fill: var(--dust); }
.velo { fill: var(--dust); }
.fumo { fill: var(--smoke); }
.colpo,
.cigolio,
.scia {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
}

/* the crane: flat colours with an outline, so that every piece reads even over another piece of the same yellow */
.gru,
.gru-scuro,
.contrappeso,
.cingolo,
.cingolo-piastra,
.ruota,
.mozzo,
.scuro,
.tubo,
.perno,
.rivetto,
.maniglia {
  stroke: var(--crane-line);
  stroke-width: 4;
  stroke-linejoin: round;
}
.gru { fill: var(--crane); stroke: none; }
.gru-scuro { fill: var(--crane-deep); }
.gru-linea,
.contrappeso-bordo {
  fill: none;
  stroke: var(--crane-line);
  stroke-width: 4;
  stroke-linejoin: round;
}
.gru-lucido {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.35;
}
.gru-righe {
  fill: none;
  stroke: var(--crane-deep);
  stroke-width: 4;
  stroke-linecap: round;
}
.gru-ombra { fill: var(--ink); opacity: 0.13; }
.gru-cavo {
  stroke: var(--crane-line);
  stroke-width: 3;
}
.asta-bordo,
.asta {
  fill: none;
  stroke-linecap: round;
}
.asta-bordo { stroke: var(--crane-line); stroke-width: 15; }
.asta { stroke: var(--crane-deep); stroke-width: 8; }
.perno { fill: var(--crane-deep); stroke-width: 3; }
.rivetto { fill: var(--crane-deep); stroke-width: 1.6; }
.maniglia { fill: var(--steel); stroke-width: 2; }
.scuro,
.tubo { fill: var(--steel); stroke-width: 3; }
.contrappeso { fill: var(--steel); stroke: none; }
.strisce { fill: var(--crane); }
.cingolo { fill: var(--steel); }
.battistrada {
  fill: none;
  stroke: var(--steel-light);
  stroke-width: 7;
  stroke-dasharray: 9 7;
}
.cingolo-piastra { fill: #4c4d57; stroke-width: 3; }
.ruota { fill: var(--steel-light); stroke-width: 3; }
.raggi {
  fill: none;
  stroke: var(--steel);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.mozzo { fill: var(--steel); stroke-width: 2; }

/* the boom: two chords and the bars between them, each with its outline */
.braccio-corda-bordo,
.braccio-corda,
.braccio-barre-bordo,
.braccio-barre {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.braccio-corda-bordo { stroke: var(--crane-line); stroke-width: 11; }
.braccio-corda { stroke: var(--crane); stroke-width: 5; }
.braccio-barre-bordo { stroke: var(--crane-line); stroke-width: 6.5; }
.braccio-barre { stroke: var(--crane-deep); stroke-width: 2.6; }
.puleggia { fill: var(--steel-light); stroke: var(--crane-line); stroke-width: 3.5; }
.puleggia-mozzo { fill: var(--steel); stroke: var(--crane-line); stroke-width: 2; }
.testa-braccio { fill: var(--crane); stroke: var(--crane-line); stroke-width: 3.5; stroke-linejoin: round; }

/* the cabin and the operator */
.cabina-dentro { fill: var(--cabin); }
.sedile { fill: var(--seat); stroke: var(--crane-line); stroke-width: 2.4; }
.sedile-cuscino { fill: #74503f; }
.vetro { fill: var(--glass); opacity: 0.16; }
.vetro-riflesso { fill: #fff; opacity: 0.22; }
.pelle,
.occhio,
.palpebra,
.naso,
.baffi,
.casco,
.casco-cresta,
.casco-falda,
.camicia,
.gilet,
.striscia,
.mano {
  stroke: var(--crane-line);
  stroke-width: 2;
  stroke-linejoin: round;
}
.pelle { fill: var(--skin); }
.guance { fill: var(--blush); opacity: 0.7; }
.occhio { fill: #fff; stroke-width: 1.6; }
.iride { fill: var(--iris); }
.pupilla { fill: var(--ball-line); }
.riflesso { fill: #fff; }
.palpebra { fill: var(--skin); stroke-width: 1.6; }
.ciglio {
  fill: none;
  stroke: var(--moustache);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.naso { fill: var(--skin-deep); stroke-width: 1.6; }
.bocca { fill: #7a1d1d; }
.baffi { fill: var(--moustache); stroke-width: 1.8; }
.baffi-righe {
  fill: none;
  stroke: #8f5634;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.casco { fill: var(--helmet); }
.casco-cresta { fill: #ffe983; stroke-width: 1.4; }
.casco-falda { fill: var(--helmet-deep); }
.casco-lucido {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0.7;
}
.camicia { fill: var(--shirt); }
.gilet { fill: var(--vest); }
.striscia { fill: #e8edf1; stroke-width: 1.4; }
.mano { fill: var(--skin); stroke-width: 1.8; }
/* the arms are two strokes: a dark wide one for the outline and the sleeve on top */
.braccio-bordo,
.manica {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.braccio-bordo { stroke: var(--crane-line); stroke-width: 12; }
.manica { stroke: var(--shirt); stroke-width: 8; }
.leva {
  stroke: var(--crane-line);
  stroke-width: 4.5;
  stroke-linecap: round;
}
.pomello { fill: var(--knob); stroke: var(--crane-line); stroke-width: 1.8; }
.pomello-lucido { fill: #fff; opacity: 0.7; }

/* the ball and its chain */
.palla-scura { fill: var(--ball-deep); }
.palla { fill: var(--ball); }
.palla-bordo {
  fill: none;
  stroke: var(--ball-line);
  stroke-width: 7;
}
.palla-riflesso { fill: #fff; opacity: 0.4; }
.ammaccatura {
  fill: none;
  stroke: var(--ball-deep);
  stroke-width: 5;
  stroke-linecap: round;
}
.grillo-bordo,
.grillo {
  fill: none;
  stroke-linecap: round;
}
.grillo-bordo { stroke: var(--ball-line); stroke-width: 22; }
.grillo { stroke: var(--chain); stroke-width: 11; }
.grillo-piastra { fill: var(--ball); stroke: var(--ball-line); stroke-width: 6; }
.anello-bordo,
.anello {
  fill: none;
}
.anello-bordo { stroke: var(--ball-line); }
.anello { stroke: var(--chain); }
.maglia { fill: var(--chain); stroke: var(--ball-line); }

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