/* The quicksilver logo: a stage as big as the window, an SVG the script fills with drops of liquid metal.
   Every colour is a variable here: the room and the three metals (COLOR in script.js picks one). */
:root {
  --room: #000000;           /* the deep black around everything */
  --room-centre: #0b0c0f;    /* a breath of light behind the logo */
  --chrome-deep: #0d1014;    /* chrome: the dark it reflects */
  --chrome-mid: #6f7884;     /* chrome: the grey of the horizon */
  --chrome-light: #e9eef4;   /* chrome: the sky it reflects */
  --gold-deep: #241503;      /* gold */
  --gold-mid: #a86d14;
  --gold-light: #ffe3a1;
  --copper-deep: #220905;    /* copper */
  --copper-mid: #a2482a;
  --copper-light: #ffc9a6;
  --hint: #5d636c;           /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--room);
  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: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Unbounded Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}

.sala { stop-color: var(--room); }
.sala-centro { stop-color: var(--room-centre); }
.gocce { fill: url(#drop); }
.specchio { fill: url(#mirror); }
.metallo-bianco { stop-color: var(--metal-white, #fff); }
.metallo-scuro { stop-color: var(--metal-deep, var(--chrome-deep)); }
.metallo-medio { stop-color: var(--metal-mid, var(--chrome-mid)); }
.metallo-chiaro { stop-color: var(--metal-light, var(--chrome-light)); }

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