/* The mischievous cat logo: a stage as big as the window, an SVG the script fills with the logo, and a cat drawn
   once in the page. Every colour is a variable here: the logo, the fur, the stripes, the eyes. */
:root {
  --paper: #f4efe6;        /* the background */
  --ink: #24203d;          /* the logo */
  --fur: #f29a42;          /* the cat's fur */
  --fur-deep: #d97a2c;     /* its far legs, a little in shadow */
  --stripes: #b8561b;      /* its tabby stripes */
  --fur-line: #4a230e;     /* its outline */
  --cream: #fde8c8;        /* its muzzle, belly, bib and paws */
  --nose: #f07b8c;         /* its nose and the inside of its ears */
  --eye: #9cc93b;          /* its eyes */
  --pupil: #1b1724;        /* its pupils */
  --mouth: #7a1f2d;        /* inside its mouth */
  --tongue: #f28a98;       /* its tongue */
  --blush: #f7a08c;        /* its cheeks when it is pleased */
  --claw: #fffaf0;         /* its claws and teeth */
  --tail-tip: #8a3a12;     /* the dark tuft at the tip of its tail */
  --pad: #f39aa6;          /* the pads under its paws */
  --iris-light: #e4f27a;   /* its irises around the pupil */
  --iris-dark: #4f8a1c;    /* its irises at the rim */
  --collar: #2f6fd0;       /* its collar */
  --tag: #f2c14e;          /* the tag on the collar */
  --dust: #ddd2c1;         /* the dust and the fur it leaves about */
  --hint: #8c8273;         /* 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: 'Bricolage Grotesque Variable', 'Arial Black', sans-serif;
  font-weight: 800;
  font-stretch: 100%;
}

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

/* the cat: flat colours with an outline, so that every piece reads even over another piece of the same fur */
.gatto,
.zampa,
.naso,
.occhio,
.unghia {
  stroke: var(--fur-line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gatto { fill: var(--fur); }
.gatto--pieno { stroke: none; }
.gatto-linea {
  fill: none;
  stroke: var(--fur-line);
  stroke-width: 3;
  stroke-linejoin: round;
}
.crema { fill: var(--cream); }
.righe,
.lucido,
.dita,
.baffi,
.bocca-linea,
.occhio-chiuso {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.righe { stroke: var(--stripes); stroke-width: 6; }
.lucido { stroke: #fff; stroke-width: 6; opacity: 0.28; }
.dita { stroke: var(--fur-line); stroke-width: 1.8; opacity: 0.6; }
.baffi { stroke: var(--fur-line); stroke-width: 1.15; opacity: 0.7; }
.baffi--sopra { stroke-width: 1; opacity: 0.6; }
.bocca-linea,
.occhio-chiuso { stroke: var(--fur-line); stroke-width: 2.6; }
.occhio-chiuso { stroke-width: 3.2; }
.zampa { fill: var(--cream); stroke-width: 2.6; }
.cuscinetti { fill: var(--pad); opacity: 0; }
.crema--bordo {
  stroke: var(--fur-line);
  stroke-width: 3;
  stroke-linejoin: round;
}
.crema--mento { opacity: 0.9; }
.ciuffi { stroke: var(--fur-line); stroke-width: 2.2; stroke-linejoin: round; }
.righe-piene { fill: var(--stripes); }
.righe--fini { stroke-width: 3.4; }
.righe-gamba { fill: var(--stripes); opacity: 0.9; }
.ombra-pelo { fill: var(--fur-deep); opacity: 0.55; }
.ombra-via { stop-color: var(--fur-deep); stop-opacity: 0; }
.ombra-piena { stop-color: var(--fur-deep); stop-opacity: 0.8; }
.lucido--fine { stroke-width: 4; opacity: 0.22; }
.pelo-segno,
.coscia,
.ciuffetti,
.radici,
.lingua-riga {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pelo-segno { stroke: var(--stripes); stroke-width: 2; opacity: 0.7; }
.coscia { stroke: var(--fur-line); stroke-width: 2.6; opacity: 0.75; }
.ciuffetti { stroke: var(--cream); stroke-width: 1.7; }
.radici { stroke: var(--fur-line); stroke-width: 2.1; opacity: 0.5; }
.lingua-riga { stroke: var(--mouth); stroke-width: 1.4; opacity: 0.5; }
.dente { fill: var(--claw); }
.naso-luce { fill: #fff; opacity: 0.7; }
.collare-bordo,
.collare {
  fill: none;
  stroke-linecap: round;
}
.collare-bordo { stroke: var(--fur-line); stroke-width: 10; }
.collare { stroke: var(--collar); stroke-width: 5; }
.anello { fill: none; stroke: var(--fur-line); stroke-width: 1.6; }
.medaglia { fill: var(--tag); stroke: var(--fur-line); stroke-width: 2; }
.medaglia-luce { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.ciuffo { fill: var(--tail-tip); }
.ciuffo-bordo { fill: var(--fur-line); stroke: var(--fur-line); stroke-width: 6; stroke-linejoin: round; }
.zampa--lontana { fill: #ead3b0; }
.orecchio { fill: var(--nose); opacity: 0.85; }
.naso { fill: var(--nose); stroke-width: 2; }
.occhio { fill: #fffdf6; stroke-width: 2.4; }
.occhio-bordo { fill: none; stroke: var(--fur-line); stroke-width: 2.4; }
.iride { fill: url(#cat-iris); stroke: var(--iris-dark); stroke-width: 1; }
.iride-chiara { stop-color: var(--iris-light); }
.iride-media { stop-color: var(--eye); }
.iride-scura { stop-color: var(--iris-dark); }
.pupilla { fill: var(--pupil); }
.riflesso { fill: #fff; }
.riflesso--piccolo { opacity: 0.85; }
.palpebra { fill: var(--fur); stroke: none; }
.ciglio { fill: none; stroke: var(--fur-line); stroke-width: 2.8; stroke-linecap: round; }
.guancia { fill: var(--blush); }
.bocca { fill: var(--mouth); }
.lingua { fill: var(--tongue); }
.unghia { fill: var(--claw); stroke-width: 1.2; }
/* legs and tail are strokes: a dark wide one for the outline and the fur on top */
.gamba-bordo,
.gamba,
.coda-bordo,
.coda,
.coda-righe {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gamba-bordo { stroke: var(--fur-line); stroke-width: 25; }
.gamba { stroke: var(--fur); stroke-width: 19; }
.gamba--lontana { stroke: var(--fur-deep); }
.coda-bordo { stroke: var(--fur-line); stroke-width: 22; }
.coda { stroke: var(--fur); stroke-width: 16; }
.coda-righe { stroke: var(--stripes); stroke-width: 16; stroke-linecap: butt; stroke-dasharray: 9 12; stroke-dashoffset: -4; }
.gatto-ombra { fill: var(--ink); }

.polvere { fill: var(--dust); }
.pelo {
  fill: none;
  stroke: var(--fur);
  stroke-linecap: round;
}
.zeta {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.colpo {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
}

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