/* The gift-box logo: a stage as big as the window, an SVG the script fills with the gift and everything in it.
   Every colour is a variable here: the room, the paper, the ribbon, the box, the spring, the logo, the tissue. */
:root {
  --room: #f7dccd;           /* the wall, towards the edges */
  --room-light: #fff1e8;     /* the wall in the middle */
  --floor: #f0cbb8;          /* the floor the gift lands on */
  --shadow: #6b3a33;         /* the shadows */
  --line: #3a2340;           /* every outline */
  --paper: #2f6f73;          /* the wrapping paper */
  --paper-band: #3f8f8f;     /* its wide stripes */
  --paper-line: #f4e7cf;     /* its thin pale line */
  --paper-back: #f7efe2;     /* the inside of the paper */
  --paper-fold: #e4d6bf;     /* the shade on the inside */
  --ribbon: #f3b72f;         /* the ribbon and the bow */
  --ribbon-dark: #c98a12;    /* the shade in the loops */
  --ribbon-light: #ffe28f;   /* the sheen on the ribbon */
  --box: #ef6a5a;            /* the box and its lid */
  --box-dark: #c94c40;       /* the sides in shade */
  --box-light: #ff9d88;      /* the top of the lid, the light edges */
  --box-inside: #7d2a2b;     /* the inside of the box */
  --box-inside-light: #a3403b; /* the inner wall on the left, catching some light */
  --spring: #fbf3e6;         /* the folds of the spring, in the light */
  --spring-dark: #e3cfb3;    /* the folds of the spring, in shade */
  --ink: #3a2340;            /* the logo */
  --tissue-a: #f6a6c2;       /* the tissue paper */
  --tissue-b: #93d6c3;
  --tissue-c: #c2b0f3;
  --tissue-d: #ffd567;
  --tissue-e: #ffffff;
  --hint: #a77866;           /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--room);
  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%;
  font-family: 'Baloo 2 Variable', 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  font-weight: 800;
}

.stanza { stop-color: var(--room); }
.stanza-luce { stop-color: var(--room-light); }
.pavimento { fill: var(--floor); }
.ombra { stop-color: var(--shadow); }

/* the paper */
.carta { fill: var(--paper); }
.carta-riga { fill: var(--paper-band); }
.carta-filo { fill: var(--paper-line); opacity: 0.85; }
.carta-retro { fill: var(--paper-back); }
.carta-piega { fill: var(--paper-fold); }
.carta-piega-riga { fill: none; stroke: var(--paper-fold); stroke-linecap: round; }
.carta-strappo { fill: none; stroke: var(--paper-back); stroke-linejoin: round; stroke-linecap: round; }
.carta-luce { fill: #fff; opacity: 0.14; }
.carta-buio { fill: var(--shadow); opacity: 0.22; }
.bordo { fill: none; stroke: var(--line); stroke-linejoin: round; stroke-linecap: round; }

/* the ribbon */
.nastro-bordo { fill: none; stroke: var(--line); stroke-linejoin: round; stroke-linecap: butt; }
.nastro { fill: none; stroke: var(--ribbon); stroke-linejoin: round; stroke-linecap: butt; }
.nastro-lucido { fill: none; stroke: var(--ribbon-light); stroke-linejoin: round; stroke-linecap: butt; opacity: 0.9; }
.fiocco { fill: var(--ribbon); stroke: var(--line); stroke-linejoin: round; }
.fiocco-dentro { fill: var(--ribbon-dark); }
.fiocco-piega { fill: none; stroke: var(--ribbon-dark); stroke-linecap: round; }

/* the box */
.scatola { fill: var(--box); stroke: var(--line); stroke-linejoin: round; }
.scatola-buio { fill: var(--box-dark); }
.scatola-luce { fill: var(--box-light); }
.scatola-lume { fill: none; stroke: var(--box-light); stroke-linecap: round; }
.scatola-piede { fill: var(--box-dark); opacity: 0.7; }
.parete-dietro { fill: var(--box-dark); }
.parete-fianco { fill: var(--box-inside-light); }
.scatola-dentro { fill: var(--box-inside); stroke: var(--line); stroke-linejoin: round; }
.scatola-fondo { fill: var(--line); opacity: 0.35; }
.ombra-coperchio { fill: var(--shadow); opacity: 0.25; }

/* the spring and the logo */
.molla-luce { fill: var(--spring); stroke: var(--line); stroke-linejoin: round; }
.molla-buio { fill: var(--spring-dark); stroke: var(--line); stroke-linejoin: round; }
.tappo-lume { fill: none; stroke: var(--ribbon-light); stroke-linecap: round; }
.coda { fill: var(--ribbon); }
.tappo { fill: var(--ribbon); stroke: var(--line); stroke-linejoin: round; }
.lettera { fill: var(--ink); }

/* the tissue paper */
.velina { fill: none; stroke-linecap: butt; opacity: 0.95; }
.velina-a { stroke: var(--tissue-a); }
.velina-b { stroke: var(--tissue-b); }
.velina-c { stroke: var(--tissue-c); }
.velina-d { stroke: var(--tissue-d); }
.velina-e { stroke: var(--tissue-e); }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Baloo 2 Variable', 'Baloo 2', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}