/* The pop-up book logo: a stage as big as the window, an SVG the script fills with the book and its paper pieces.
   Every colour is a variable here: the table, the cover, the pages, the logo, the sun, the clouds, the hills. */
:root {
  --table: #e8dac5;         /* the background: the table */
  --table-deep: #d4c0a3;    /* the table towards the corners */
  --table-shade: #5b3f24;   /* the shadow of the book on the table */
  --cover: #2c4b9c;         /* the cloth of the cover */
  --cover-line: #16295c;    /* the outline of the boards */
  --foil: #f1c45c;          /* the gold label on the cover */
  --foil-line: #b5852a;     /* its pressed frame */
  --page: #fbf5e7;          /* the pages */
  --page-edge: #e2d4b8;     /* the edges of the pages, seen on the front of the book */
  --page-lines: #c4b18b;    /* the lines between the pages */
  --print: #c9b690;         /* the thin frame printed on the pages */
  --grain: #8a7250;         /* the specks and fibres in the paper */
  --gutter: #6a5133;        /* the shade in the fold of the spine */
  --letter: #e14f32;        /* the logo's card */
  --letter-edge: #fff7e8;   /* the white cut edge of every paper piece */
  --stalk: #ecdfc2;         /* the paper tabs the pieces stand on */
  --sun: #f5b52d;           /* the paper sun */
  --sun-deep: #eb8a24;      /* its rays */
  --cloud: #ffffff;         /* the clouds */
  --cloud-edge: #d9cfbd;    /* their cut edge */
  --hill: #3c9b87;          /* the hills behind */
  --hill-deep: #22705f;     /* the hills in front */
  --hill-edge: #a3dccb;     /* their cut edge */
  --ribbon: #c9323b;        /* the bookmark ribbon */
  --tab: #fff2d3;           /* the pull tab */
  --tab-ink: #8c6a37;       /* the word on the tab and the line under the logo */
  --ink: #7a6545;           /* the line printed on the front page */
  --shade: #3d2b1a;         /* the shade on a piece still lying down, and the shadows of the pieces */
  --dust: #f4ecdd;          /* the puffs of dust */
  --stroke: #4a3520;        /* the little strokes of a thud */
  --hint: #8a7a62;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: radial-gradient(120% 90% at 50% 45%, var(--table) 55%, var(--table-deep));
  background-color: var(--table);
  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 cut in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Young Serif', Georgia, serif;
  font-weight: 400;
}

/* the book */
.ombra-tavolo { fill: var(--table-shade); }
.tela {
  fill: var(--cover);
  stroke: var(--cover-line);
  stroke-linejoin: round;
}
.pagina {
  fill: var(--page);
  stroke: var(--page-edge);
  stroke-linejoin: round;
}
.pagina-grana { opacity: 0.5; }
.taglio {
  fill: var(--page-edge);
  stroke: var(--page-lines);
  stroke-linejoin: round;
}
.taglio-righe { fill: none; stroke: var(--page-lines); }
.cornice { fill: none; stroke: var(--print); }
.piega-stop { stop-color: var(--gutter); stop-opacity: 0.32; }
.piega-stop--via { stop-opacity: 0; }
.etichetta { fill: var(--foil); stroke: var(--foil-line); }
.etichetta-scritta { fill: var(--cover-line); }
.motto { fill: var(--ink); }
.nastro { fill: var(--ribbon); }
.nastro-ombra { fill: var(--table-shade); opacity: 0.18; }
.linguetta {
  fill: var(--tab);
  stroke: var(--page-lines);
  stroke-linejoin: round;
}
.linguetta-scritta { fill: var(--tab-ink); }

/* the pop-up pieces */
.bordo-carta { fill: var(--letter-edge); }
.lettera { fill: var(--letter); }
.stelo { fill: var(--stalk); }
.raggi { fill: var(--sun-deep); }
.sole { fill: var(--sun); }
.sole-anello { fill: none; stroke: var(--sun-deep); }
.nuvola { fill: var(--cloud); }
.nuvola-bordo { fill: var(--cloud-edge); }
.collina { fill: var(--hill); }
.collina-davanti { fill: var(--hill-deep); }
.collina-bordo { fill: var(--hill-edge); }
.velo { fill: var(--shade); }
.ombra { fill: var(--shade); }

/* the effects */
.colpo {
  fill: none;
  stroke: var(--stroke);
  stroke-linecap: round;
}
.polvere { fill: var(--dust); }
.coriandolo--a { fill: var(--letter); }
.coriandolo--b { fill: var(--sun); }
.coriandolo--c { fill: var(--hill); }
.coriandolo--d { fill: var(--cover); }
.coriandolo--e { fill: var(--ribbon); }

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