/* The lightning-struck logo: a stage as big as the window, an SVG the script fills with the logo, the rain and the
   bolts, and a cloud and a sun drawn once in the page. Every colour is a variable here. */
:root {
  --paper: #f2eee3;        /* the background */
  --ink: #2142cf;          /* the logo */
  --storm: #34415a;        /* the sky going dark under the storm */
  --flash: #fffbe8;        /* the whole sky in a flash of lightning */
  --sunlight: #ffd27a;     /* the warm light of the sun */
  --bolt: #ffe03a;         /* the lightning bolt */
  --bolt-core: #ffffff;    /* the white heart of the bolt */
  --wind: #b4bfcf;         /* the wind lines */
  --cloud: #d6dde7;        /* the cloud */
  --cloud-shade: #b2bed0;  /* its belly and its curls */
  --cloud-dark: #6b778c;   /* the cloud when it is angry */
  --cloud-deep: #4b5568;   /* its belly when it is angry */
  --cloud-line: #252d3d;   /* every outline */
  --cheek: #e79fb0;        /* its cheeks */
  --iris: #f3c22e;         /* its eyes */
  --mouth: #3b1e2a;        /* inside its mouth */
  --rain: #4c84d8;         /* the rain */
  --drop: #b3d0f5;         /* the drops running down the letters */
  --puddle: #8db0e2;       /* the puddle */
  --puddle-shine: #e2edfc; /* the light on the puddle */
  --char: #16100d;         /* the burnt letter */
  --char-brown: #4d2715;   /* the edge of the burn */
  --ember: #ff6914;        /* the embers in the burn */
  --ember-hot: #ffd45c;    /* the hottest embers */
  --smoke: #6f6a72;        /* the smoke */
  --steam: #ffffff;        /* the steam when the sun dries everything */
  --sun: #ffc632;          /* the sun */
  --sun-ray: #ffa21c;      /* its rays */
  --sun-line: #a8590c;     /* its outline */
  --sun-cheek: #ff8a6a;    /* its cheeks */
  --sun-iris: #7a4313;     /* its eyes */
  --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: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Big Shoulders Display Variable', 'Arial Narrow', sans-serif;
  font-weight: 900;
}

/* the sky */
.cielo-buio { fill: var(--storm); }
.lampo { fill: var(--flash); }
.luce-sole { fill: var(--sunlight); }
.vento {
  fill: none;
  stroke: var(--wind);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the logo, the burn and the embers */
.lettera { fill: var(--ink); }
.brucia-a { stop-color: var(--char); }
.brucia-b { stop-color: var(--char-brown); }
.brucia--via { stop-opacity: 0; }
.bordo-nero {
  fill: none;
  stroke: var(--char);
  stroke-linejoin: round;
  opacity: 0.85;
}
.brace,
.brace-viva {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brace { stroke: var(--ember); }
.brace-viva { stroke: var(--ember-hot); }
.bianco { fill: var(--flash); }

/* water */
.pioggia {
  stroke: var(--rain);
  stroke-linecap: round;
}
.schizzo { fill: var(--rain); }
.goccia { fill: var(--drop); stroke: var(--rain); }
.pozza { fill: var(--puddle); stroke: var(--rain); }
.pozza-lucido { fill: var(--puddle-shine); opacity: 0.8; }
.onda {
  fill: none;
  stroke: var(--puddle-shine);
}
.ombra-nuvola { fill: var(--cloud-line); }

/* smoke and steam: thick round strokes that curl */
.fumo,
.vapore {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fumo { stroke: var(--smoke); }
.vapore { stroke: var(--steam); }

/* the bolts, the sparks and the flash on the letter */
.fulmine-alone,
.fulmine-bordo,
.fulmine,
.fulmine-cuore,
.scintilla,
.scintilla-bordo,
.rombo {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fulmine-alone { stroke: var(--bolt); opacity: 0.35; }
.fulmine-bordo { stroke: var(--cloud-line); }
.fulmine { stroke: var(--bolt); }
.fulmine-cuore { stroke: var(--bolt-core); }
.scintilla { stroke: var(--bolt); }
.scintilla-bordo { stroke: var(--cloud-line); }
.rombo { stroke: var(--cloud-line); }
.botto { fill: var(--bolt); stroke: var(--cloud-line); stroke-linejoin: round; }

/* the cloud: flat colours with an outline, drawn only around the outside of the heap of puffs */
.nuvola-bordo { fill: var(--cloud-line); stroke: var(--cloud-line); stroke-width: 7; }
.nuvola { fill: var(--cloud); }
.nuvola-scura { fill: var(--cloud-dark); }
.nuvola-pancia { fill: var(--cloud-shade); }
.nuvola-pancia-scura { fill: var(--cloud-deep); }
.nuvola-ricciolo,
.nuvola-ricciolo-scuro,
.nuvola-lucido {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nuvola-ricciolo { stroke: var(--cloud-shade); stroke-width: 4.5; }
.nuvola-ricciolo-scuro { stroke: var(--cloud-deep); stroke-width: 4.5; }
.nuvola-lucido { stroke: #fff; stroke-width: 7; opacity: 0.6; }
.guancia { fill: var(--cheek); opacity: 0.8; }
.occhio {
  fill: #fff;
  stroke: var(--cloud-line);
  stroke-width: 3;
}
.iride { fill: var(--iris); }
.pupilla { fill: var(--cloud-line); }
.riflesso { fill: #fff; }
.palpebra { fill: var(--cloud); stroke: var(--cloud-line); stroke-width: 3; }
.palpebra-scura { fill: var(--cloud-dark); stroke: var(--cloud-line); stroke-width: 3; }
.sopracciglio,
.bocca-linea {
  fill: none;
  stroke: var(--cloud-line);
  stroke-linecap: round;
}
.sopracciglio { stroke-width: 7; }
.bocca-linea { stroke-width: 5; }
.bocca { fill: var(--mouth); stroke: var(--cloud-line); stroke-width: 3; stroke-linejoin: round; }

/* the sun */
.sole-raggio { fill: var(--sun-ray); stroke: var(--sun-line); stroke-width: 3; stroke-linejoin: round; }
.sole { fill: var(--sun); stroke: var(--sun-line); stroke-width: 3.5; }
.sole-lucido {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.55;
}
.sole-guancia { fill: var(--sun-cheek); opacity: 0.75; }
.occhio--sole { stroke: var(--sun-line); stroke-width: 2.4; }
.iride--sole { fill: var(--sun-iris); }
.sole-palpebra { fill: var(--sun); stroke: var(--sun-line); stroke-width: 2.4; }
.sole-bocca { fill: var(--mouth); stroke: var(--sun-line); stroke-width: 2.4; stroke-linejoin: round; }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Big Shoulders Display Variable', 'Arial Narrow', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}
.sbuffo { fill: var(--cloud); stroke: var(--cloud-line); stroke-width: 3; }
.fumo-nube { fill: var(--smoke); }