/* The neon-bent logo: a stage as big as the window, an SVG the script fills with the brick wall, the glass tubes,
   the torch flame and the transformer. Every colour is a variable here: the wall, the glass, the hot glass, the
   flame, the gas and its glow, the transformer. */
:root {
  --night: #100a0b;         /* the background: the wall at night */
  --brick: #45241f;         /* the bricks */
  --brick-dark: #321b18;    /* the darker bricks */
  --brick-light: #553029;   /* the lighter bricks */
  --mortar: #1a1213;        /* the mortar between them */
  --gas: #ff2e7e;           /* the neon gas, lit */
  --gas-core: #ffe2ee;      /* the white heart of the lit tube */
  --glow: #ff3d8b;          /* the glow around the tubes and on the wall */
  --glass: #d8e5ea;         /* the clear glass of the tube, unlit */
  --glass-shine: #ffffff;   /* its highlight */
  --hot: #ff7b22;           /* the glass softened in the flame */
  --hot-core: #ffe39a;      /* the hottest point, right in the flame */
  --flame: #2f6bff;         /* the torch flame */
  --flame-core: #bfe4ff;    /* its inner cone */
  --torch: #ff9a4a;         /* the light of the flame on the wall */
  --electrode: #121011;     /* the dark ends of the tubes, where they go into the wall */
  --electrode-ring: #57504f;/* their metal collar */
  --box: #2c3034;           /* the transformer */
  --box-light: #5a6168;     /* its lit top */
  --box-line: #0b0c0d;      /* its outline */
  --cable: #0d0b0b;         /* the cable */
  --hum: #ffc2d8;           /* the lines of the hum */
  --hint: #9a7f7d;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: 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 traced from this face: the script draws it on a canvas and follows its outline */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Quicksand Variable', 'Arial Rounded MT Bold', 'Arial', sans-serif;
  font-weight: 700;
}

/* the light on the wall */
.portata { stop-color: #fff; stop-opacity: 1; }
.portata--mezza { stop-opacity: 0.45; }
.portata--via { stop-opacity: 0; }
.aria { stop-color: var(--glow); stop-opacity: 0.55; }
.aria--via { stop-opacity: 0; }
.aria-colore { mix-blend-mode: screen; }
.luce-cannello { stop-color: var(--torch); stop-opacity: 0.5; }
.luce-cannello--via { stop-opacity: 0; }
.vignetta { stop-color: #000; stop-opacity: 0.72; }
.vignetta--via { stop-opacity: 0; }

/* the tubes: every layer is the same outline, stroked */
[data-sign] path:not(.fiamma),
[data-tail] line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ombra-tubo { stroke: #000; opacity: 0.55; }
.vetro path,
.vetro-coda { stroke: var(--glass); opacity: 0.42; }
.vetro-lucido path,
line.vetro-lucido { stroke: var(--glass-shine); opacity: 0.7; }
.gas-alone path { stroke: var(--glow); }
.gas-vicino path { stroke: var(--glow); }
.gas-tubo path { stroke: var(--gas); }
.gas-cuore path { stroke: var(--gas-core); }
[data-hot] path,
.caldo { stroke: var(--hot); }
.caldo-cuore path { stroke: var(--hot-core); }

/* the electrodes */
.elettrodo { stroke: var(--electrode); stroke-linecap: round; }
.elettrodo-anello { stroke: var(--electrode-ring); stroke-linecap: butt; }

/* the flame */
.fiamma-stop { stop-color: var(--flame); stop-opacity: 0.75; }
.fiamma-stop--base { stop-opacity: 0.95; }
.fiamma-stop--via { stop-opacity: 0; }
.fiamma-cuore-stop { stop-color: var(--flame-core); stop-opacity: 0.95; }
.fiamma-cuore-stop--punta { stop-opacity: 0.6; }

/* the transformer */
.scatola-stop { stop-color: var(--box); }
.scatola-stop--luce { stop-color: var(--box-light); }
.scatola { stroke: var(--box-line); stroke-linejoin: round; }
.scatola-targa { fill: var(--box); stroke: var(--box-line); }
.scatola-riga { fill: none; stroke: var(--box-light); stroke-linecap: round; opacity: 0.8; }
.scatola-feritoia { fill: none; stroke: var(--box-line); stroke-linecap: round; }
.leva { fill: var(--electrode-ring); stroke: var(--box-line); stroke-linejoin: round; }
.leva-perno { fill: var(--box-line); }
.ronzio { fill: none; stroke: var(--hum); stroke-linecap: round; }
.cavo { fill: none; stroke: var(--cable); stroke-linecap: round; }

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