/* The laser-cut logo: a stage as big as the window, an SVG the script fills with the bed of the machine, the plate,
   the gantry and the pieces it cuts out. Every colour is a variable here: the workshop, the steel, the heat, the
   machine. */
:root {
  --floor: #15181c;          /* the background: the workshop in the dark */
  --floor-deep: #0b0d10;     /* towards the corners */
  --bed: #1d2126;            /* the bed of the machine, under the plate */
  --slat: #353b43;           /* its slats */
  --slat-top: #4f5761;       /* the lit edge of the slats */
  --steel-light: #f1f4f7;    /* brushed steel, where the light hits it */
  --steel: #c3c9d0;          /* brushed steel */
  --steel-dark: #9aa2ab;     /* brushed steel, in the shade */
  --steel-back: #8b939c;     /* the underside of a piece */
  --steel-back-dark: #5f666e;
  --streak-light: #ffffff;   /* the light streaks of the brushing */
  --streak-dark: #4d555f;    /* the dark streaks of the brushing */
  --wall: #4a5058;           /* the cut walls inside the holes */
  --wall-top: #707882;
  --edge-light: #ffffff;     /* the polished edge of a piece, catching the light */
  --edge-dark: #59616a;      /* the polished edge, away from the light */
  --line: #2a2f35;           /* outlines */
  --tint: #a8642c;           /* the heat tint left round the cut */
  --white-hot: #fff6dc;      /* the beam and the cut while it is being made */
  --hot: #ffb347;
  --orange: #ff6d1f;         /* the cut, just made */
  --red: #b3260f;            /* the cut, cooling */
  --kerf: #2a0f0a;           /* the cut, cold */
  --spark-hot: #fff3c4;      /* the sparks, as they fly out */
  --spark: #ff9a3c;
  --spark-cold: #c8381a;     /* the sparks, as they die */
  --smoke: #a7adb4;          /* the smoke */
  --machine: #f2b31b;        /* the yellow bridge */
  --machine-light: #ffd768;
  --machine-deep: #b07d06;
  --carriage: #2b3036;       /* the head */
  --carriage-light: #4a525b;
  --rail: #4b525a;           /* the rails */
  --rail-light: #8d959e;
  --copper: #d98b4c;         /* the nozzle */
  --copper-deep: #8a4a1f;
  --hint: #7b828a;           /* 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(--floor) 50%, var(--floor-deep));
  background-color: var(--floor);
  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 cut in this face: the script draws it on a canvas and traces its outline */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Archivo Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}

/* steel */
.acciaio { stop-color: var(--steel); }
.acciaio--chiaro { stop-color: var(--steel-light); }
.acciaio--scuro { stop-color: var(--steel-dark); }
.acciaio--retro { stop-color: var(--steel-back); }
.acciaio--retro-scuro { stop-color: var(--steel-back-dark); }
.spazzolato { opacity: 0.85; }
.bordo-lastra { fill: none; stroke: var(--line); stroke-opacity: 0.55; stroke-linejoin: round; }
.parete { fill: url(#wall); stroke: var(--line); stroke-linejoin: round; }
.parete-stop { stop-color: var(--wall); }
.parete-stop--alta { stop-color: var(--wall-top); }
.alone path { fill: none; stroke: var(--tint); stroke-linejoin: round; opacity: 0.3; }
.ombre path { fill: #000; }
.lampo { stop-color: #fff; stop-opacity: 0.55; }
.lampo--via { stop-opacity: 0; }

/* the bed */
.letto { fill: var(--bed); }
.stecca { stroke: var(--slat); stroke-linecap: square; }
.stecca-luce { stroke: var(--slat-top); stroke-linecap: square; opacity: 0.6; }

/* the pieces */
.pezzo-faccia,
.pezzo-tono { stroke-linejoin: round; }
.pezzo-tono { fill: #000; stroke: var(--line); stroke-opacity: 0.6; }

/* the cut */
.taglio-alone path,
.taglio-freddo path,
.taglio-tiepido path,
.taglio-caldo path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.taglio-alone path { stroke: var(--orange); opacity: 0.75; }
.taglio-caldo path { stroke: var(--hot); }
.taglio-tiepido path { stroke: var(--red); }
.taglio-freddo path { stroke: var(--kerf); }
.caldo { stop-color: var(--orange); stop-opacity: 0.5; }
.caldo--bianco { stop-color: var(--white-hot); stop-opacity: 1; }
.caldo--giallo { stop-color: var(--hot); stop-opacity: 0.9; }
.caldo--via { stop-opacity: 0; }
.raggio { stroke: var(--white-hot); stroke-linecap: round; }
.raggio-alone { stroke: var(--orange); stroke-linecap: round; opacity: 0.5; }

/* sparks and smoke */
.scintille line { stroke-linecap: round; }
.fumo-stop { stop-color: var(--smoke); stop-opacity: 0.55; }
.fumo-stop--meta { stop-opacity: 0.25; }
.fumo-stop--via { stop-opacity: 0; }

/* the machine */
.binario { fill: var(--rail); stroke: var(--line); stroke-linejoin: round; }
.binario-luce { fill: var(--rail-light); opacity: 0.55; }
.vite { fill: var(--line); }
.ponte { fill: var(--machine); stroke: var(--line); stroke-linejoin: round; }
.ponte-luce { fill: var(--machine-light); }
.ponte-ombra { fill: var(--machine-deep); }
.carrello { fill: var(--carriage); stroke: var(--line); stroke-linejoin: round; }
.carrello-luce { fill: var(--carriage-light); }
.carrello-giallo { fill: var(--machine); }
.ugello { fill: var(--steel-dark); stroke: var(--line); stroke-linejoin: round; }
.ugello-luce { fill: var(--steel-light); opacity: 0.7; }
.rame { fill: var(--copper); stroke: var(--copper-deep); }
.ombra-macchina { fill: #000; opacity: 0.35; }

.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;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}