/* The blown-glass logo: a stage as big as the window, an SVG the script fills with the blowpipe, the gather of
   molten glass and the letters. Every colour is a variable here: the room, the table, the steel, the four colours of
   the hot glass and the colours of the cold glass. */
:root {
  --night: #10171b;         /* the background: the workshop in the dark */
  --night-deep: #070b0d;    /* towards the corners */
  --furnace: #ff7a2a;       /* the light of the furnace, while the glass is hot */
  --room: #5f8fa3;          /* the cold light of the room, once the glass has cooled */
  --table: #1c262c;         /* the steel table */
  --table-deep: #0b1114;    /* the table, further down */
  --table-edge: #6f8794;    /* the lit edge of the table */
  --steel: #8d9aa2;         /* the blowpipe */
  --steel-light: #e4ecf0;   /* its lit side */
  --steel-deep: #2c363c;    /* its dark side */
  --hot-white: #fff6d8;     /* the heart of the molten glass */
  --hot-yellow: #ffc94a;    /* hot glass */
  --hot-orange: #ff7417;    /* hot glass, a little cooler */
  --hot-red: #c8270e;       /* the thin edges, cooling first */
  --ember: #5a0d06;         /* the last dull red before the glass goes clear */
  --glass: #cfeef2;         /* the body of the cold glass */
  --glass-edge: #6fd0c4;    /* the green-blue of its thick edges */
  --glass-light: #ffffff;   /* the highlights */
  --glass-dark: #02070a;    /* the dark side of the refraction */
  --haze: #ffb070;          /* the shimmer of hot air */
  --hint: #6c8088;          /* 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% 95% at 50% 40%, var(--night) 50%, var(--night-deep));
  background-color: var(--night);
  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 blown in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Rubik Variable', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  font-weight: 800;
}

/* the room */
.luce-forno { stop-color: var(--furnace); stop-opacity: 0.5; }
.luce-forno--via { stop-opacity: 0; }
.luce-fredda { stop-color: var(--room); stop-opacity: 0.34; }
.luce-fredda--via { stop-opacity: 0; }
.banco-stop { stop-color: var(--table-deep); }
.banco-stop--su { stop-color: var(--table); }
.banco-stop--velo { stop-color: var(--table); stop-opacity: 0.5; }
.banco { fill: var(--table); }
.banco-bordo { fill: var(--table-edge); }
.riflesso-caldo { fill: var(--hot-orange); }
.riverbero { stop-color: var(--furnace); stop-opacity: 0.6; }
.riverbero--via { stop-opacity: 0; }
.aria-calda path {
  fill: none;
  stroke: var(--haze);
  stroke-linecap: round;
}

/* the blowpipe */
.canna-stop { stop-color: var(--steel); }
.canna-stop--luce { stop-color: var(--steel-light); }
.canna-stop--buio { stop-color: var(--steel-deep); }
.canna-calda { stop-color: var(--hot-red); stop-opacity: 0.95; }
.canna-calda--via { stop-opacity: 0; }
.canna-giro { fill: none; stroke: var(--steel-deep); stroke-width: 3; opacity: 0.32; }
.canna-bordo { fill: none; stroke: var(--steel-deep); stroke-linejoin: round; }
.canna-lucido { fill: none; stroke: var(--steel-light); stroke-linecap: round; opacity: 0.7; }
.canna-anello { fill: var(--steel-deep); }

/* the hot glass: the filter paints it, everything in it is a shade of grey (its heat) */
.filo { fill: #fff; }
.bolla-stop { stop-color: var(--hot-orange); stop-opacity: 0.85; }
.bolla-stop--mezzo { stop-opacity: 0.6; }
.bolla-stop--via { stop-opacity: 0; }
.bolla-luce { fill: none; stroke: var(--hot-white); stroke-linecap: round; opacity: 0.6; }

/* the cold glass */
.vetro-corpo { fill: var(--glass); fill-opacity: 0.13; }
.vetro-bordo { fill: none; stroke: var(--glass-edge); stroke-linejoin: round; opacity: 0.5; }
.vetro-filo { fill: none; stroke: var(--glass); stroke-linejoin: round; opacity: 0.55; }
.vetro-luce { fill: var(--glass-light); opacity: 0.9; }
.vetro-ombra { fill: var(--glass-dark); opacity: 0.55; }
.vetro-luce-bordo { fill: none; stroke: var(--glass-light); stroke-linejoin: round; opacity: 0.9; }
.vetro-ombra-bordo { fill: none; stroke: var(--glass-dark); stroke-linejoin: round; opacity: 0.55; }
.vetro-riflesso { fill: var(--glass-light); opacity: 0.16; }
.vetro-lampo { fill: var(--glass-light); }
.vetro-tinta { flood-color: var(--glass-edge); }

/* the glint and the ring */
.lampo { fill: var(--glass-light); }
.squillo { fill: none; stroke: var(--glass-light); stroke-linecap: round; }

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