/* The origami-unfolding logo: a stage as big as the window, an SVG the script fills with the logo, the strips and
   the folding paper, and a paper crane drawn once in the page. Every colour is a variable here. */
:root {
  --bg: #e3dac8;            /* the background */
  --paper: #e4572e;         /* the coloured side of the origami paper: the crane and the back of the strips */
  --paper-light: #f58a5c;   /* that side in the light */
  --paper-shade: #b83d1d;   /* that side in the shade */
  --paper-deep: #8f2b13;    /* that side in deep shade */
  --paper-back: #f5eddd;    /* the white side of the paper: the logo is printed here */
  --paper-back-shade: #d9cfbd; /* the white side in the shade */
  --crane-line: #4a1708;    /* the outline of the crane */
  --crease: #a8391b;        /* the creases of the unfolded sheet */
  --seam: #c9bda6;          /* the creases between the strips, on the white side */
  --ink: #1f2b33;           /* the logo */
  --eye: #f2b33a;           /* the crane's eyes */
  --blush: #f7a08a;         /* its cheeks */
  --shadow: #3a2f22;        /* the shadows on the floor */
  --dust: #d3c8b3;          /* the dust and the air it moves */
  --shine: #ffffff;         /* the light running over the paper */
  --hint: #8a8070;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--bg);
  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: 'Manrope Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}

.logo-tinta { fill: var(--ink); }

/* the crane: flat faces, each with its own light, and a dark outline on every fold */
.faccia {
  stroke: var(--crane-line);
  stroke-width: 2;
  stroke-linejoin: round;
}
.faccia--chiara { fill: var(--paper-light); }
.faccia--media { fill: var(--paper); }
.faccia--ombra { fill: var(--paper-shade); }
.faccia--scura { fill: var(--paper-deep); }
.faccia--lontana-chiara { fill: var(--paper-shade); }
.faccia--lontana { fill: var(--paper-deep); }
.faccia--lontana-scura { fill: var(--crane-line); }
.ala-sotto {
  fill: var(--crane-line);
  stroke: var(--crane-line);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0;
}
.occhio {
  fill: var(--paper-back);
  stroke: var(--crane-line);
  stroke-width: 1.2;
}
.iride { fill: var(--eye); }
.pupilla { fill: var(--ink); }
.riflesso { fill: #fff; }
.palpebra {
  fill: var(--paper-light);
  stroke: var(--crane-line);
  stroke-width: 1.2;
}
.guancia { fill: var(--blush); opacity: 0.8; }

/* the unfolding paper: the script gives every face its colour, frame by frame */
.pieghetta { stroke-linejoin: round; }
.piega {
  fill: none;
  stroke: var(--crease);
  stroke-linecap: round;
}

/* the strips: the coloured back, the white front with its slice of logo, and the shade of the fold */
.tessera-retro,
.tessera {
  stroke-linejoin: round;
}
.tessera-retro { fill: var(--paper); stroke: var(--crease); }
.tessera { fill: var(--paper-back); stroke: var(--seam); }
.tessera-ombra { fill: var(--shadow); }

.foglio { fill: var(--paper-back); }
.foglio-ombra { fill: var(--shadow); opacity: 0.1; }
.angolo-ombra { fill: var(--shadow); }
.lampo { stop-color: var(--shine); stop-opacity: 0.9; }
.lampo--via { stop-opacity: 0; }

.ombra { fill: var(--shadow); }
.polvere { fill: var(--dust); }
.aria {
  fill: none;
  stroke: var(--dust);
  stroke-linecap: round;
}
.coriandolo--colore { fill: var(--paper); }
.coriandolo--bianco { fill: var(--paper-back); stroke: var(--seam); stroke-width: 1; }

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