/* The flock-of-birds logo: a sunset sky as big as the window, a canvas for the clouds, the SVG logo, a canvas for
   the flock and, on top, an SVG with the latecomer swallows. Every colour is a variable here. */
:root {
  --sky-top: #2f2b63;      /* the sky, high up */
  --sky-mid: #8f4a86;      /* the sky, in the middle */
  --sky-low: #ec7f5c;      /* the sky, low down */
  --sky-glow: #ffc98f;     /* the sky, at the horizon */
  --cloud: #c86e8c;        /* the clouds, in their shade */
  --cloud-lit: #ffbfa0;    /* the clouds, where the sun still lights them */
  --ink: #1d1d3d;          /* the logo */
  --bird: #20213f;         /* the birds of the flock */
  --bird-line: #0e0e24;    /* the outline of every bird */
  --back: #2d3d86;         /* the latecomers: back and head */
  --back-deep: #1f2a63;    /* their wings and tail */
  --belly: #f7e6cc;        /* their belly */
  --throat: #d6532f;       /* their throat and forehead */
  --beak: #f2a93b;         /* their beak and legs */
  --eye: #8a5a2b;          /* their eyes */
  --blush: #ff9a8a;        /* their cheeks */
  --note: #fff3df;         /* the notes they sing, and the feathers */
  --hint: #4a2340;         /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--sky-low);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 76%, var(--sky-glow) 100%);
}

.nuvole,
.stormo,
.palco {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* the logo is written in this face: the script reads it to measure the letters */
.palco {
  overflow: visible;
  font-family: 'Outfit Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}
.palco--sopra { pointer-events: none; }

.lettera { fill: var(--ink); }

/* the latecomers: flat colours with an outline, so that every piece reads even over another piece of the same blue */
.uccello,
.uccello-ala,
.uccello-lontano,
.occhio {
  stroke: var(--bird-line);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.uccello { fill: var(--back); }
.uccello-ala { fill: var(--back-deep); }
.uccello-lontano { fill: var(--bird-line); }
.uccello-pancia { fill: var(--belly); }
.uccello-gola { fill: var(--throat); }
.uccello-macchia { fill: var(--throat); opacity: 0.35; }
.uccello-piuma,
.uccello-lucido {
  fill: none;
  stroke-linecap: round;
}
.uccello-piuma { stroke: var(--back); stroke-width: 1.6; opacity: 0.9; }
.uccello-lucido { stroke: #fff; stroke-width: 2.6; opacity: 0.3; }
.becco {
  fill: var(--beak);
  stroke: var(--bird-line);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.becco--sotto { fill: #d98a24; }
.zampa {
  fill: none;
  stroke: var(--bird-line);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.zampa--dita { stroke-width: 2; }
.guancia { fill: var(--blush); opacity: 0.8; }
.occhio { fill: #fff; stroke-width: 1.5; }
.iride { fill: var(--eye); }
.pupilla { fill: var(--bird-line); }
.riflesso { fill: #fff; }
.palpebra { fill: var(--back); }

.nota-musica {
  fill: var(--note);
  stroke: var(--bird-line);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.piuma {
  fill: var(--note);
  stroke: var(--bird-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.piuma-asse {
  fill: none;
  stroke: var(--bird-line);
  stroke-width: 1;
  stroke-linecap: round;
}

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