/* The sewn logo: a stage as big as the window, a linen cloth woven with an SVG pattern, a wooden hoop, and an SVG
   the script fills with the stitches. Every colour is a variable here: the cloth, the threads, the wood, the steel. */
:root {
  --cloth: #ece2cc;        /* the linen */
  --cloth-warp: #d6c8aa;   /* its darker threads */
  --cloth-weft: #f6efde;   /* its lighter threads */
  --cloth-knot: #c9b893;   /* the thicker knots in the weave */
  --thread: #d8452f;       /* the satin thread that fills the letters */
  --edge: #22305a;         /* the running stitch along the edges */
  --wood: #d9a35f;         /* the hoop */
  --wood-deep: #b17434;    /* its grain and its inner side */
  --wood-line: #5b3416;    /* its outline */
  --brass: #e6b941;        /* the screw */
  --brass-light: #fff1b8;  /* the light on the screw */
  --brass-deep: #9c6c12;   /* the screw's threads and shade */
  --steel: #cfd6de;        /* the needle and the blades */
  --steel-light: #ffffff;  /* the light on the steel */
  --steel-deep: #7d8794;   /* the dark side of the steel */
  --steel-line: #323a46;   /* the outline of the needle and the scissors */
  --handle: #2f7a8c;       /* the scissors' handles */
  --handle-line: #163e48;  /* their outline */
  --ink: #2a2118;          /* the shadows */
  --fluff: #fffaf0;        /* the fluff that flies from the cloth */
  --hint: #8a7c64;         /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--cloth);
  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 measured in this face: the script draws it on a canvas to find its edges */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Gabarito Variable', 'Arial Black', sans-serif;
  font-weight: 900;
}

/* the linen */
.lino { fill: var(--cloth); }
.lino-ordito { fill: none; stroke: var(--cloth-warp); stroke-width: 1.3; opacity: 0.55; }
.lino-trama { fill: none; stroke: var(--cloth-weft); stroke-width: 1.5; opacity: 0.8; }
.lino-nodo { fill: var(--cloth-knot); opacity: 0.45; }
.velo { stop-color: var(--ink); }
.fuori { fill: var(--ink); opacity: 0.07; }
.piega-scura,
.piega-chiara {
  fill: none;
  stroke-linecap: round;
}
.piega-scura { stroke: var(--ink); opacity: 0.045; }
.piega-chiara { stroke: #fff; opacity: 0.12; }

/* the stitches: one thread colour, with lighter and darker strands so that the satin looks real */
.punto-ombra,
.punto,
.punto-chiaro,
.punto-scuro,
.punto-luce,
.orlo,
.orlo-ombra,
.luce {
  fill: none;
  stroke-linecap: round;
}
.punto-ombra { stroke: color-mix(in srgb, var(--thread) 45%, #000); opacity: 0.85; }
.punto { stroke: var(--thread); }
.punto-chiaro { stroke: color-mix(in srgb, var(--thread) 86%, #fff); }
.punto-scuro { stroke: color-mix(in srgb, var(--thread) 86%, #000); }
.punto-luce { stroke: color-mix(in srgb, var(--thread) 40%, #fff); opacity: 0.8; }
.ombra-punto,
.punto-colore {
  fill: none;
  stroke-linecap: round;
}
.ombra-punto { opacity: 0.85; }
.orlo { stroke: var(--edge); }
.orlo-ombra { stroke: var(--ink); opacity: 0.35; }
.luce { stroke: #fff; opacity: 0.9; }
.nodo { fill: var(--thread); stroke: color-mix(in srgb, var(--thread) 45%, #000); }
.nodo-luce { fill: color-mix(in srgb, var(--thread) 40%, #fff); }
.coda {
  fill: none;
  stroke: var(--thread);
  stroke-linecap: round;
}

/* the hoop: flat colours with an outline, like everything else on the stage */
.anello-ombra,
.anello-bordo,
.anello,
.anello-dentro,
.anello-venatura,
.anello-luce,
.anello-orlo,
.anello-rilievo {
  fill: none;
}
.anello-ombra { stroke: var(--ink); opacity: 0.2; }
.anello-bordo { stroke: var(--wood-line); }
.anello { stroke: var(--wood); }
.anello-dentro { stroke: var(--wood-deep); opacity: 0.75; }
.anello-venatura { stroke: var(--wood-deep); opacity: 0.6; stroke-linecap: round; }
.anello-luce { stroke: #fff; opacity: 0.4; stroke-linecap: round; }
.anello-orlo { stroke: var(--ink); opacity: 0.13; }
.anello-rilievo { stroke: #fff; opacity: 0.3; }
.legno {
  fill: var(--wood);
  stroke: var(--wood-line);
  stroke-width: 3;
  stroke-linejoin: round;
}
.legno-ombra { fill: none; stroke: var(--wood-deep); stroke-width: 5; opacity: 0.6; }
.venatura { fill: none; stroke: var(--wood-deep); stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.ottone {
  fill: url(#brass);
  stroke: var(--wood-line);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.ottone-riga { fill: none; stroke: var(--brass-deep); stroke-width: 1.6; }
.filetto,
.zigrino {
  fill: none;
  stroke: var(--brass-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ottone-lucido { fill: none; stroke: var(--brass-light); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.ottone-luce { stop-color: var(--brass-light); }
.ottone-scuro { stop-color: var(--brass-deep); }
.ottone-medio { stop-color: var(--brass); }

/* the needle */
.acciaio { stop-color: var(--steel); }
.acciaio-luce { stop-color: var(--steel-light); }
.acciaio-scuro { stop-color: var(--steel-deep); }
.ago {
  fill: url(#steel);
  stroke: var(--steel-line);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.ago-scuro { fill: none; stroke: var(--steel-deep); stroke-width: 1.4; stroke-linecap: round; opacity: 0.7; }
.ago-lucido { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; }
.ago-luccichio { fill: #fff; }
.cruna { fill: var(--cloth); stroke: var(--steel-line); stroke-width: 1.2; }
.ombra-colore { flood-color: var(--ink); }
[data-needle-shadow],
[data-scissors-shadow] { opacity: 0.2; }
.piega-segno,
.piega-luce {
  fill: none;
  stroke-linecap: round;
}
.piega-segno { stroke: var(--ink); stroke-width: 3; opacity: 0.22; }
.piega-luce { stroke: #fff; stroke-width: 3; opacity: 0.45; }

/* the thread: a dark edge, the colour, and a light twist along it */
.filo-bordo,
.filo,
.filo-giro {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.filo-bordo { stroke: color-mix(in srgb, var(--thread) 40%, #000); }
.filo { stroke: var(--thread); }
.filo--orlo { stroke: var(--edge); }
.filo-giro { stroke: #fff; opacity: 0.35; }

/* the scissors */
.lama {
  fill: url(#steel);
  stroke: var(--steel-line);
  stroke-width: 2;
  stroke-linejoin: round;
}
.lama-filo { fill: none; stroke: var(--steel-deep); stroke-width: 1.3; opacity: 0.8; }
.lama-lucido { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; }
.manico-bordo,
.manico,
.manico-lucido {
  fill: none;
  stroke-linecap: round;
}
.manico-bordo { stroke: var(--handle-line); stroke-width: 12; }
.manico { stroke: var(--handle); stroke-width: 7; }
.manico-lucido { stroke: #fff; stroke-width: 2.2; opacity: 0.5; }
.perno { fill: url(#brass); stroke: var(--wood-line); stroke-width: 2; }
.perno-taglio { fill: none; stroke: var(--wood-line); stroke-width: 1.6; stroke-linecap: round; }

/* little effects */
.peluria { fill: none; stroke: var(--fluff); stroke-linecap: round; }
.pelo { fill: none; stroke: var(--thread); stroke-linecap: round; }
.polvere { fill: var(--fluff); }
.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: 'Gabarito Variable', 'Arial Black', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}