/* The logo cut along the line: a page as big as the window, covered by two pieces of navy wool. An SVG on top holds
   the cloth, the chalk line and the shears; the page underneath is plain HTML. Every colour is a variable here. */
:root {
  --cloth: #22304f;          /* the navy wool of the two pieces */
  --cloth-rib: #2c3c62;      /* the ribs of the twill */
  --chalk: #f3ecdf;          /* tailor's chalk: the logo, the notes, the line */
  --edge: #8c9bc0;           /* the cut edge of the wool */
  --steel: #d5d9e2;          /* the blades of the shears */
  --steel-light: #ffffff;    /* the light on the blades */
  --steel-line: #121a2e;     /* the outline of the shears */
  --handle: #c63b2e;         /* the handles of the shears */
  --button: #ece0c7;         /* the buttons */
  --button-rim: #b9a37b;     /* the rim and the holes of the buttons */
  --paper: #f4ecdd;          /* the page of the shop */
  --ink: #1d2540;            /* the text of the page */
  --thread: #c63b2e;         /* the logo on the page and its seam */
  --needle: #8d93a3;         /* the needle */
  --hint: #8a8170;           /* the small text */
  --shade: #0b1020;          /* the shade under the lifting cloth */
  --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);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ------------------------------------------------------------------ the cloth */
/* the logo is written in this face: the script reads it to measure the letters */
.palco {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: 'Archivo Variable', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
}
.stoffa { fill: var(--cloth); }
.trama-fondo { fill: var(--cloth); }
.trama { fill: none; stroke: var(--cloth-rib); stroke-width: 1.3; }
.cimosa { fill: none; stroke: var(--edge); stroke-width: 1.2; stroke-linejoin: miter; opacity: 0; }
.ombra { stop-color: var(--shade); }
.lettera { fill: var(--chalk); }
.etichetta {
  fill: var(--chalk);
  font-family: 'Geist Mono Variable', ui-monospace, Menlo, Consolas, monospace;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.etichetta--tenue { opacity: 0.62; }
.cifra {
  fill: var(--chalk);
  font-family: 'Geist Mono Variable', ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
}
.freccina { fill: none; stroke: var(--chalk); stroke-linecap: round; stroke-linejoin: round; }
.drittofilo { fill: none; stroke: var(--chalk); stroke-linecap: round; opacity: 0.75; }
.drittofilo-punta { fill: var(--chalk); opacity: 0.75; }
.linea-tratteggio { fill: none; stroke: var(--chalk); stroke-linecap: butt; opacity: 0.85; }
.linea-taglio { fill: none; stroke: var(--chalk); stroke-linecap: round; }

/* the buttons: a face, a rim, the holes for the thread */
.bottone-faccia { fill: var(--button); stroke: var(--steel-line); stroke-linejoin: round; }
.bottone-orlo { fill: none; stroke: var(--button-rim); stroke-linejoin: round; }
.bottone-foro { fill: var(--cloth); }

/* the shears */
.lama { fill: var(--steel); stroke: var(--steel-line); stroke-width: 1.6; stroke-linejoin: round; }
.lama-filo { fill: none; stroke: var(--steel-line); stroke-width: 0.8; opacity: 0.45; }
.lama-lume { fill: none; stroke: var(--steel-light); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.anello-bordo { fill: none; stroke: var(--steel-line); stroke-width: 7.6; stroke-linecap: round; }
.anello { fill: none; stroke: var(--handle); stroke-width: 4.4; stroke-linecap: round; }
.vite { fill: var(--steel); stroke: var(--steel-line); stroke-width: 1.4; }
.vite-lume { fill: var(--steel-light); }

/* ------------------------------------------------------------------ the page under the cloth */
.pagina {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist Mono Variable', ui-monospace, Menlo, Consolas, monospace;
  visibility: hidden;
}
.pagina.pronta { visibility: visible; }

.testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 3vmin, 34px) clamp(16px, 4vmin, 44px);
  font-size: clamp(10px, 1.3vmin, 13px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.testa nav { display: flex; gap: clamp(12px, 2.6vmin, 30px); }
.testa a { color: inherit; text-decoration: none; }

.eroe {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vmin, 14px);
  padding: 0 16px clamp(48px, 9vmin, 90px);
  text-align: center;
}
.marchio {
  margin: 0;
  color: var(--thread);
  font-family: 'Archivo Variable', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: var(--logo, 120px);
  line-height: 1;
  letter-spacing: var(--track, 0.02em);
  white-space: nowrap;
}
.marchio img { display: block; height: var(--logo-img, 120px); width: auto; }
.cucitura { display: block; overflow: visible; }
.cucitura-punti { fill: none; stroke: var(--thread); stroke-linecap: round; }
.ago { fill: var(--needle); stroke: var(--ink); stroke-width: 0.6; }
.ago-cruna { fill: var(--paper); }
.motto {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 4.2vmin, 46px);
  line-height: 1.04;
}
.motto em { font-style: italic; }
.orari {
  margin: clamp(8px, 1.6vmin, 16px) 0 0;
  font-size: clamp(10px, 1.3vmin, 13px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* the button of the page: the thread colour rises inside it, the arrow steps forward */
.bottone {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(4px, 1vmin, 10px);
  padding: 12px 20px 12px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(11px, 1.4vmin, 14px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  isolation: isolate;
}
.bottone__fondo {
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: var(--thread);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottone__testo { transition: color 0.25s ease; }
.bottone__freccia {
  width: 18px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
@media (hover: hover) {
  .bottone:hover { color: var(--paper); border-color: var(--thread); }
  .bottone:hover .bottone__fondo { transform: scaleY(1); }
  .bottone:hover .bottone__freccia { transform: translateX(4px); }
}
.bottone:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bottone__fondo,
  .bottone__freccia { transition-duration: 0.01s; }
}