/* Home — apertura «Stampato per la pista», assaggio del catalogo, su misura, chi siamo. */

/* Apertura: il titolo si "stampa" dal basso, una volta sola */
.apertura { position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; }
.apertura > :not(.sfondo) { position: relative; }
.apertura h1 {
  margin: 0; font: 900 clamp(5rem, min(27vw, 22vh), 15rem)/.8 var(--display); letter-spacing: -.01em;
  text-transform: uppercase;
  animation: stampa 1.6s steps(28, end) .2s both;
}
.apertura h1 span { display: block; }
@keyframes stampa { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Sfondo: lo stemma enorme, fatto di strati, e la testina della stampante che ci
   passa sopra avanti e indietro. Movimento lento, mai invadente. */
.sfondo { position: absolute; inset: 0; pointer-events: none; }
.stemma-grande {
  position: absolute; right: -18%; top: 50%; width: min(130vw, 1100px); aspect-ratio: 129 / 84.4;
  transform: translateY(-50%);
  background: repeating-linear-gradient(to bottom, #1f1d1b 0 3px, transparent 3px 5px);
  -webkit-mask: url(img/stemma.svg) center / contain no-repeat;
          mask: url(img/stemma.svg) center / contain no-repeat;
  animation: deriva 24s ease-in-out infinite alternate;
}
.testina {
  position: absolute; left: 0; right: 0; height: 2px; top: 0; opacity: .55;
  background: linear-gradient(to right, transparent, var(--arancio) 30%, var(--rosso) 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 122, 0, .45);
  animation: passa 7s ease-in-out infinite alternate;
}
@keyframes passa { from { top: 6%; } to { top: 94%; } }
@keyframes deriva { from { transform: translate(0, -50%); } to { transform: translate(-4%, -47%); } }
@media (prefers-reduced-motion: reduce) {
  .apertura h1, .stemma-grande { animation: none; }
  .testina { display: none; }
}

.sotto { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 760px) { .sotto { grid-template-columns: 1fr auto; align-items: end; } }
.sotto p { margin: 0; max-width: 38ch; font-size: 1.1875rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; }

/* Prodotti: griglia a due, la foto comanda */
.griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 760px) { .griglia { grid-template-columns: repeat(4, 1fr); } }
.pezzo { text-decoration: none; display: block; }
.pezzo .foto { aspect-ratio: 1; background: var(--carbone); border-radius: 4px; overflow: hidden; position: relative; }
.pezzo .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pezzo:hover .foto { filter: brightness(1.12); }
.pezzo .foto i {
  position: absolute; inset: 22% 22% 0; border-radius: 6px 6px 0 0;
  background: var(--strati), linear-gradient(#2b2825, #1b1a18);
}
.pezzo h3 { margin: 10px 0 0; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.pezzo p { margin: 2px 0 0; color: var(--arancio); font-weight: 600; }

/* Categorie: quattro blocchi, portano allo shop già filtrato */
.categorie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .categorie { grid-template-columns: repeat(4, 1fr); } }
.categorie a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 140px;
  padding: 16px; border-radius: 4px; background: var(--carbone); text-decoration: none;
  border-bottom: 3px solid var(--rosso);
}
.categorie a:hover { background: var(--carbone-2); }
.categorie .nome { font: 800 1.625rem/1 var(--display); text-transform: uppercase; }
.categorie .quanti { color: var(--fango); font-size: .875rem; }

.misura-azione { margin-top: 24px; }

.chi { border-top: 1px solid var(--riga); }
.chi p { max-width: 52ch; margin: 0 0 18px; color: #cfcac2; font-size: 1.1875rem; }


/* Cosa dicono i clienti — recensioni copiate da Google (index.html). */
.recensioni { border-top: 1px solid var(--riga); }
.recensioni .voto { margin: -6px 0 22px; color: var(--fango); font-size: 1.0625rem; }
.recensioni .voto b { color: var(--gesso); font: 900 2rem/1 var(--display); margin-right: 6px; }
.recensioni .stelle { color: var(--arancio); letter-spacing: 2px; }
.lista-rec { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .lista-rec { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.lista-rec li { background: var(--carbone); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.lista-rec blockquote { margin: 0; color: #cfcac2; flex: 1; }
.firma-rec { margin: 0; color: var(--fango); font-size: .875rem; }
.nota-rec { margin: 0 0 18px; color: var(--fango); font-size: .8125rem; }

/* Etichetta del voto in apertura: porta alle recensioni. */
.etichetta-voto { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 18px; padding: 7px 14px; border: 1px solid var(--riga); border-radius: 999px; background: rgba(18,17,16,.85); color: var(--gesso); font-size: .9375rem; text-decoration: none; }
.etichetta-voto .stelle { color: var(--arancio); letter-spacing: 1px; }
.etichetta-voto:hover, .etichetta-voto:focus-visible { border-color: var(--arancio); }
.recensioni { scroll-margin-top: 16px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }