/* =============================================================
   Parea Sons — «Il lino, da vicino»

   La sola sezione del sito in cui si tocca la materia. Il marchio
   vende lino italiano e fino a ieri non lo faceva vedere mai da
   vicino: le fotografie della trama c'erano già — ruolo «tessuto»
   dello shooting, una per filato, tutte dello stesso capo e quindi
   sotto la stessa luce — e stavano in fondo alla galleria di una
   scheda, dove nessuno le cerca.

   Due cose: si sceglie il filato e la lastra cambia, e sopra la
   lastra c'è lo STESSO gesto di zoom del catalogo — il cerchio che
   prende il posto del cursore e il visore a schermo intero. Non è
   ricopiato: è `css/lente.css` + `js/lente.js`, che questa sezione e
   la scheda prodotto si dividono (SISTEMA.md §4ter). Qui c'è solo il
   bottone trasparente su cui quel gesto si appoggia.
   ============================================================= */

.materia {
  position: relative;
  z-index: 1;
  padding-block: var(--s-64);
  /* Una superficie sollevata dal fondo pagina: serve a staccare la
     materia dalle quattro fotografie a piena finestra che la
     precedono, che se no le si appiccicano addosso. */
  background: var(--bianco-lino);
  border-block: 1px solid var(--filetto);
}

/* Questa è l'unica sezione della home che NON si distende fino a
   `--larghezza-max`, ed è voluto. La fascia col suo filetto resta larga
   quanto la pagina — è lei che stacca la materia da quello che le sta
   sopra — ma dentro c'è un ravvicinato, e un ravvicinato non ha bisogno
   di essere grande: ha bisogno di essere vicino. A 1176 la colonna del
   testo restava larga 744px per una prosa che si ferma a 40 caratteri,
   cioè mezzo blocco di aria in mezzo alla riga. A 920 il testo viene
   448 e la lastra 320: i due blocchi si guardano invece di allontanarsi. */
.materia__inner {
  max-width: 920px;
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--materia-lastra));
  gap: var(--s-48);
  align-items: center;
}

/* ------------------------------------------------------- la parola */

.materia__parola {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: var(--s-24);
}

.materia__titolo {
  font-family: var(--font-testo);
  font-weight: 300;
  /* Non arriva più a `--t-48`: quello è il corpo dei titoli che aprono
     una pagina, e questa è una sezione in mezzo alla home che sta
     accanto a una lastra da 320. */
  font-size: clamp(1.5rem, 3vw, var(--t-32));
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.materia__testo {
  font-size: var(--t-16);
  line-height: 1.55;
  color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
  max-width: 40ch;
}

/* --------------------------------------------------------- la scena */

.materia__scena {
  display: grid;
  gap: var(--s-16);
  justify-items: stretch;
}

/* La larghezza della lastra sta in UNA variabile, e la usano anche la
   colonna della griglia e il campionario: i due blocchi si allineano a
   sinistra e devono cominciare e finire sullo stesso filo, se no la
   fila dei quadretti non legge più come la didascalia di quella
   fotografia.

   320 e non 480: la lastra è quadrata, quindi a 320 è alta 320 e con il
   campionario sotto sta in 470px — prima era 480x640 e con la fila
   arrivava a 864, cioè quasi tutta una finestra da 900 per una sezione
   che sta in mezzo alla home. */
:root { --materia-lastra: 320px; }

.materia__lastra,
.materia[data-vive="sì"] .materia__scelta { max-width: var(--materia-lastra); }

/* **La lastra è QUADRATA, e in tutto il sito è l'unica.** Le altre sono
   3:4 perché mostrano un capo, che è alto; qui si mostra il logo
   ricamato, che sta dentro un quadrato — e il quadrato è anche la
   ragione per cui i quattro filati sono la stessa inquadratura: il
   ritaglio esce 900x900 da `tools/prepara-materia.py`, centrato sul
   logo e in scala normalizzata sulla macchia di rosso, quindi al cambio
   di filato si vede cambiare il colore e nient'altro. Se un giorno
   questa proporzione torna 3:4, va rifatto anche `LATO` e il rapporto
   là dentro. */
.materia__lastra {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--fondo-scatto);
  border: 1px solid var(--filetto);
  overflow: hidden;
}

/* Il cambio di filato è una DISSOLVENZA E BASTA, e questa è la riga da
   non riscrivere. Fino al 17 agosto 2026 la fotografia se ne andava
   allargandosi di un filo (`scale(1.03)`), come respirano le lastre del
   listino — ma là il respiro racconta lo scorrimento, e qui racconterebbe
   un movimento che non c'è: i quattro ritagli sono ormai la stessa
   inquadratura, e quello che deve cambiare è il colore del lino. Un
   ingrandimento in mezzo lo fa sembrare un'altra fotografia. */
.materia__scatto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-lento) var(--ease);
}

.materia__lastra[data-scambio="sì"] .materia__scatto { opacity: 0; }

/* Il vetro: un bottone trasparente grande quanto la fotografia, la
   stessa cosa che la scheda chiama `.palco__vetro`. Nasce `hidden` e
   lo scopre lo script — un bottone che senza JavaScript non fa niente
   è un bottone che tradisce. Il segno e il visore che ci si
   appoggiano sopra stanno in css/lente.css. */
.materia__vetro {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

/* Mentre il segno è acceso PRENDE IL POSTO del cursore. */
.materia__vetro[data-segno="sì"] { cursor: none; }

.materia__vetro:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: -3px;
}

/* --------------------------------------------- il campionario, sotto
   Sotto la lastra e non di fianco al titolo. È il posto in cui i
   colori si cercano — è lì che li tiene la scheda prodotto — e quattro
   quadretti di stoffa larghi 88px, in fila, con il nome sotto ognuno,
   si leggono come un campionario senza che nessuno lo spieghi.

   Il campionario esiste solo se lo script c'è (`data-vive`): senza
   JavaScript la sezione mostra il titolo, il testo e una lastra sola,
   che è vera. Bottoni che non fanno niente sarebbero peggio del non
   averli — è la regola 1 di §4 di SISTEMA.md. */

.materia__scelta { display: none; }
.materia[data-vive="sì"] .materia__scelta {
  display: grid;
  gap: var(--s-8);
  justify-items: start;
  width: 100%;
}

/* «Filato — Bianco Ottico»: l'occhiello dice che cos'è la fila di
   quadretti, il nome dice quale si sta guardando. Il nome è il NOME
   PER ESTESO del filato, quello delle palette di collezione; sotto i
   quadretti ci sta il nome a catalogo, che è più corto. */
.materia__quale {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  flex-wrap: wrap;
}

.materia__voce {
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--greige);
}

/* Il nome sale da sotto la riga dentro una maschera, come i titoli del
   listino e dei mondi: al cambio di filato è il testo che si rifà, non
   una scritta che si sostituisce da sola. La maschera è il `overflow`
   di questo blocco, e il padding serve alla discendente della «g» di
   «Beige» — senza, l'`overflow: hidden` la taglia. */
.materia__nome {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  font-family: var(--font-testo);
  font-size: var(--t-16);
  font-weight: 400;
  line-height: 1.1;
  color: var(--inchiostro);
}

.materia__nome > span {
  display: block;
  animation: filato-sale 700ms var(--ease) both;
}

@keyframes filato-sale {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Quattro colonne dentro `--materia-lastra`, e non un tetto suo: con
   320px e tre spazi da 8 ogni quadretto viene 74px. Prima erano 88 in un
   blocco largo 424 — la fila finiva più corta della lastra, e i due
   blocchi non si chiudevano sullo stesso filo a destra. */
.materia__filati {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8);
  width: 100%;
}

.filato {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: var(--s-8);
}

/* Il quadretto è STOFFA, non una pastiglia di colore: 160x160 tagliati
   dalla stessa fotografia della lastra, dove non c'è né ricamo né
   collo. A 88px la trama si vede, ed è quello che deve far venire
   voglia di premere. */
.filato__lastra {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--filetto);
  transition: transform var(--t-medio) var(--ease);
}

/* La cornice del filato scelto: un filetto d'oro staccato di 5px, che
   si chiude sul quadretto invece di apparire. L'oro sta qui e non
   altrove perché il fondo di questa sezione è chiaro — sopra una
   fotografia sarebbe fuori regola (§2). */
.filato { position: relative; }

.filato::after {
  content: "";
  position: absolute;
  inset: -5px;
  bottom: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--oro);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity var(--t-medio) var(--ease),
              transform var(--t-medio) var(--ease);
  pointer-events: none;
}

.filato[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }

/* Al passaggio la cornice si fa intravedere: dice che si può premere
   prima che qualcuno provi. */
.filato:hover::after,
.filato:focus-visible::after { opacity: 0.45; transform: scale(1); }

.filato:hover .filato__lastra { transform: scale(1.03); }

.filato:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 6px;
}

/* Il nome si sottolinea col filetto che si apre dal centro: il gesto
   unico del sito, e qui dice anche quale filato è scelto. */
.filato__nome {
  position: relative;
  padding-bottom: 4px;
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  color: var(--greige);
  transition: color var(--t-medio) var(--ease);
}

.filato__nome::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--t-lento) var(--ease);
}

.filato[aria-pressed="true"] .filato__nome { color: var(--inchiostro); }

.filato[aria-pressed="true"] .filato__nome::after,
.filato:hover .filato__nome::after,
.filato:focus-visible .filato__nome::after { transform: scaleX(1); }

.materia__firma {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

/* ---------------------------------------------------- schermi minori */

/* ------------------------------------------ tavoletta e telefono
   In colonna sola la lastra prenderebbe tutta la larghezza — a 820px
   misurati veniva 772x772 — e un ravvicinato non ha bisogno di essere
   grande, ha bisogno di essere vicino. 340 è la misura di una pezza
   tenuta in mano, e sta dentro un telefono da 375 (343 di riga utile)
   senza toccare i bordi. Cambia la variabile e si muovono insieme la
   lastra e il campionario: se la lastra è centrata e i quadretti no, la
   fila non legge più come la didascalia di quella fotografia. */
@media (max-width: 900px) {
  :root { --materia-lastra: 340px; }

  .materia__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-32);
    justify-items: center;
  }
  /* Prima la lastra col suo campionario, poi il racconto: su una
     colonna sola si guarda la stoffa e si scegli, e si legge dopo. E il
     testo si centra con lei, se no la colonna resta appesa a sinistra
     sotto una fotografia che sta in mezzo. */
  .materia__parola {
    order: 2;
    justify-items: center;
    text-align: center;
    max-width: 46ch;
  }
  .materia__scena { order: 1; }

  .materia__scena { width: 100%; max-width: var(--materia-lastra); }
  .materia__lastra { margin-inline: auto; }
  .materia[data-vive="sì"] .materia__scelta {
    width: 100%;
    justify-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filato__lastra,
  .filato__nome,
  .filato__nome::after,
  .filato::after,
  .materia__scatto { transition: none; }
  .materia__nome > span { animation: none; }
}