/* The caterpillar-nibbled logo: a stage as big as the window, an SVG the script fills with the logo and the bites,
   and a caterpillar, a leaf, a cocoon and a butterfly drawn once in the page. Every colour is a variable here. */
:root {
  --paper: #fbf6e8;        /* the background */
  --ink: #24432e;          /* the logo, a deep leaf green */
  --sprout: #86c64a;       /* the new growth that fills the bites when the logo heals */
  --leaf: #74c04b;         /* the little leaf */
  --leaf-deep: #4f9c33;    /* its folded half */
  --leaf-line: #2c5521;    /* its outline, stem and veins */
  --bug: #b9dd4c;          /* the caterpillar */
  --bug-deep: #86b43a;     /* its spots and feet */
  --bug-line: #33501b;     /* its outline */
  --belly: #effac7;        /* its belly */
  --tip: #ff8a57;          /* the balls at the end of its antennae */
  --eye-white: #fffdf6;    /* the whites of the eyes */
  --eye: #4a2e1c;          /* its irises */
  --pupil: #17110c;        /* the pupils */
  --blush: #ff9a88;        /* its cheeks */
  --mouth: #7d2b2b;        /* inside its mouth */
  --silk: #f1e7cf;         /* the silk and the cocoon */
  --silk-deep: #d9c79f;    /* the folds of the cocoon */
  --silk-line: #9a845c;    /* its outline and the thread that wraps it */
  --wing: #ffa23d;         /* the butterfly's fore wings */
  --wing-back: #ff7f3f;    /* its hind wings */
  --wing-deep: #d9432a;    /* the tips of the wings */
  --wing-spot: #fff1c4;    /* the spots on the wings */
  --wing-line: #45231a;    /* the butterfly's outline and body */
  --hint: #8f8a76;         /* 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: 'Fredoka Variable', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  font-weight: 700;
}

.lettera { fill: var(--ink); }
.ricrescita { fill: var(--sprout); }
.briciola { fill: var(--ink); }
.briciola-foglia { fill: var(--leaf); }
.germoglio { fill: var(--sprout); stroke: var(--leaf-line); stroke-width: 1.2; stroke-linejoin: round; }

/* every piece of the caterpillar has an outline, so that pieces of the same green read one over the other */
.bruco,
.zampa,
.antenna,
.pallina,
.occhio,
.palpebra {
  stroke: var(--bug-line);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bruco { fill: var(--bug); }
.bruco-pancia { fill: var(--belly); opacity: 0.85; }
.bruco-macchia { fill: var(--bug-deep); opacity: 0.7; }
.bruco-lucido {
  fill: none;
  stroke: #fff;
  stroke-width: 3.6;
  stroke-linecap: round;
  opacity: 0.45;
}
.zampa { fill: var(--bug-deep); stroke-width: 2.2; }
.zampa--lontana { fill: var(--bug-line); }
.antenna { fill: none; stroke-width: 3; }
.antenna--lontana { opacity: 0.75; }
.pallina { fill: var(--tip); stroke-width: 2.2; }
.pallina--lontana { opacity: 0.85; }
.occhio { fill: var(--eye-white); stroke-width: 2; }
.iride { fill: var(--eye); }
.pupilla { fill: var(--pupil); }
.riflesso { fill: #fff; }
.palpebra { fill: var(--bug); stroke-width: 2; }
.guancia { fill: var(--blush); }
.bocca { fill: var(--mouth); stroke: var(--bug-line); stroke-width: 1.6; }
.sorriso {
  fill: none;
  stroke: var(--bug-line);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.seta-filo {
  stroke: var(--silk-line);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* the little leaf */
.foglia,
.foglia-gambo,
.foglia-vena {
  stroke: var(--leaf-line);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.foglia { fill: var(--leaf); stroke-width: 3; }
.foglia--scura { fill: var(--leaf-deep); }
.foglia-gambo { fill: none; stroke-width: 5; }
.foglia-vena { fill: none; stroke-width: 2; opacity: 0.6; }

/* the cocoon */
.bozzolo { fill: var(--silk); stroke: var(--silk-line); stroke-width: 2.4; stroke-linejoin: round; }
.bozzolo-ombra { fill: var(--silk-deep); opacity: 0.7; }
.bozzolo-righe,
.bozzolo-lucido,
.filo,
.seta-gambo {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bozzolo-righe { stroke: var(--silk-deep); stroke-width: 2.2; }
.bozzolo-lucido { stroke: #fff; stroke-width: 3.4; opacity: 0.7; }
.bozzolo-buco { fill: var(--wing-line); opacity: 0.85; }
.filo { stroke: var(--silk-line); stroke-width: 1.5; opacity: 0.8; }
.seta-gambo { stroke: var(--silk-line); stroke-width: 2.4; }
.fiocco { fill: var(--silk); stroke: var(--silk-line); stroke-width: 1; }

/* the butterfly */
.ala,
.ala-bordo,
.farfalla-corpo,
.farfalla-pallina {
  stroke: var(--wing-line);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ala { fill: var(--wing); }
.ala--dietro { fill: var(--wing-back); }
.ala-bordo { fill: none; }
.ala-punta { fill: var(--wing-deep); }
.ala-macchia { fill: var(--wing-spot); }
.ala-vena {
  fill: none;
  stroke: var(--wing-line);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.35;
}
.farfalla-corpo { fill: var(--wing-line); stroke-width: 2; }
.farfalla-righe {
  fill: none;
  stroke: var(--wing-back);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.8;
}
.farfalla-antenna {
  fill: none;
  stroke: var(--wing-line);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.farfalla-pallina { fill: var(--wing-deep); stroke-width: 2; }
.occhio--farfalla { stroke: var(--wing-line); stroke-width: 1.2; }

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