/* =============================================================
   Parea Sons — la vetrina

   La fascia sotto l'apertura: si sceglie Donna o Uomo e cambiano
   quattro capi. Le tre lastre larghe che portavano alle collezioni
   non ci sono più: adesso sotto c'è il film dei quattro mondi, con
   le fotografie vere (css/orizzonti.css).

   Dentro .pezzo__posto stanno due scatti, come nel listino: a riposo
   il capo sul MANICHINO INVISIBILE, al passaggio del cursore il capo
   INDOSSATO. Niente lino tessuto, qui — quello è il linguaggio di
   Inside. Un capo che ha un solo scatto ci mette un <img> senza
   classe e non scambia niente.
   ============================================================= */

.vetrina {
  position: relative;
  z-index: 1;
  padding-block: var(--s-96);
  /* Nessun fondo proprio: la vetrina sta sul fondo pagina, così le
     lastre bianche si staccano. A separarla dall'apertura basta il
     filetto, come fa il resto del sito. */
  border-top: 1px solid var(--filetto);
}

.vetrina__inner {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

/* --- La testa della fascia -----------------------------------
   Stessa forma dei pregi: occhiello e titolo centrati. Prima qui il
   titolo c'era solo per i lettori di schermo, e la fascia cominciava
   nel vuoto — il selettore galleggiava senza che niente dicesse di
   cosa fosse la scelta.                                            */

.vetrina__testa {
  display: grid;
  justify-items: center;
  gap: var(--s-8);
  text-align: center;
  margin-bottom: var(--s-48);
}

.vetrina__titolo {
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-32), 3.4vw, var(--t-48));
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 20ch;
}

/* --- La scelta: Donna o Uomo --------------------------------
   È il CARTELLINO del sito, in due caselle. Il telaio è il bordo
   d'oro del cartellino vuoto — l'oro sta sul chiaro, dove la corona
   dello stemma sta bene; dentro, la casella scelta è la tela rossa
   del cartellino pieno, con la sua trama di lino e i due filetti
   d'argento sopra e sotto la scritta.

   Non è un bottone nuovo: è .bottone e .bottone--vuoto messi uno
   accanto all'altro, con in più la sola cosa che qui serve — la
   tela che scivola da una casella all'altra invece di accendersi e
   spegnersi. Lo scivolamento è la deroga già prevista in SISTEMA.md
   per gli stati persistenti (mondi, vetrina).

   Fra il telaio d'oro e la tela rossa resta un incastro di 3px di
   lino: se si toccassero, l'oro sul rosso darebbe 2,0:1 e il bordo
   sparirebbe proprio dove la casella è accesa.                    */

.vetrina__scelta {
  --incastro: 3px;
  position: relative;
  width: max-content;
  margin-inline: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* due caselle uguali, non due parole di larghezza diversa */
  padding: var(--incastro);
  background: var(--bianco-lino);
  border: 1px solid var(--oro);
}

.vetrina__voce {
  position: relative;
  z-index: 1;               /* sopra la tela che scivola */
  min-width: 128px;
  padding: var(--s-16) var(--s-24);
  font-family: var(--font-display);
  font-size: var(--t-12);
  /* La riga vale quanto la lettera: l'interlinea del corpo qui non
     serve — c'è una parola sola — e gonfiava il cartellino di 7px
     per lato senza che si vedesse. */
  line-height: 1;
  font-weight: 400;
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  color: var(--greige);
  transition: color var(--t-medio) var(--ease);
}

/* Sulla tela il testo è di lino: 7,1:1. La parola cambia anche
   colore, non solo fondo, così chi non distingue i colori resta
   informato lo stesso. */
.vetrina__voce[aria-selected="true"] { color: var(--bianco-lino); }

/* Il filetto che si apre dal centro, sotto la parola non scelta.
   In oro, come il telaio: sul lino dà 3,5:1, sopra la soglia dei
   segni. Sulla casella accesa non compare — lì il segno è la tela. */
.vetrina__voce::after {
  content: "";
  position: absolute;
  left: var(--s-24); right: var(--s-24);
  bottom: 10px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.vetrina__voce:hover { color: var(--inchiostro); }
.vetrina__voce:hover::after,
.vetrina__voce:focus-visible::after { transform: scaleX(1); }

.vetrina__voce[aria-selected="true"]::after { transform: scaleX(0); }
.vetrina__voce[aria-selected="true"]:hover { color: var(--bianco-lino); }

/* La messa a fuoco va dentro la casella: un anello fuori uscirebbe
   dal telaio d'oro. Sull'accesa è d'argento, perché l'oro sul rosso
   sparisce. */
.vetrina__voce:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: -6px;
}
.vetrina__voce[aria-selected="true"]:focus-visible {
  outline-color: var(--bianco-lino);
}

/* La tela che dice dove si è: stesso rosso e stessa trama del
   cartellino, misurata e mossa da js/vetrina.js. */
.vetrina__segno {
  position: absolute;
  left: 0;
  top: var(--incastro);
  bottom: var(--incastro);
  width: var(--w, 0px);
  background-color: var(--rosso);
  background-image:
    repeating-linear-gradient(90deg, rgba(250,249,247,.038) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg,  rgba(250,249,247,.038) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(45deg, rgba(250,249,247,.022) 0 1px, transparent 1px 17px);
  transform: translateX(var(--x, 0px));
  pointer-events: none;
}

/* Lo scivolamento si accende solo dopo che la tela è stata messa al
   suo posto: la prima posa è una constatazione, non un movimento.
   Serve davvero — se la pagina si apre in una scheda di sfondo il
   browser congela le transizioni, e una prima posa animata resta
   bloccata al punto di partenza finché non si torna a guardarla.
   La larghezza poi non si anima mai: le due caselle sono uguali per
   costruzione, quindi cambia solo al ridimensionamento. */
.vetrina[data-mosso="sì"] .vetrina__segno {
  transition: transform var(--t-ampio) var(--ease);
}

/* I due filetti d'argento cuciti dentro il bordo: sono ciò che fa
   di un rettangolo rosso un cartellino. Qui restano aperti — la
   casella non è un'azione da premere, è uno stato già raggiunto. */
.vetrina__segno::before,
.vetrina__segno::after {
  content: "";
  position: absolute;
  left: var(--s-16);
  right: var(--s-16);
  height: 1px;
  background: color-mix(in srgb, var(--bianco-lino) 76%, transparent);
}

.vetrina__segno::before { top: 8px; }
.vetrina__segno::after  { bottom: 8px; }

/* --- I quattro capi -----------------------------------------
   Di suo è un elenco: Donna e Uomo uno sotto l'altro, tutti
   leggibili. È js/vetrina.js a impilarli nella stessa cella, così
   il cambio di genere non fa saltare la pagina. Se lo script non
   parte, nessun capo resta nascosto.                              */

.vetrina__palco {
  display: grid;
  gap: var(--s-96);
  margin-top: var(--s-64);
}

.vetrina[data-schede="sì"] .vetrina__palco { gap: 0; }

.vetrina[data-schede="sì"] .vetrina__fila {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-medio) var(--ease),
    visibility 0s linear var(--t-medio);
}

/* visibility toglie i capi spenti anche dal giro del tabulatore. */
.vetrina[data-schede="sì"] .vetrina__fila[data-attivo="sì"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.vetrina__fila {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-32);
  align-items: start;
}

/* --- Il singolo capo ----------------------------------------- */

.pezzo {
  display: grid;
  gap: var(--s-16);
  text-decoration: none;
  color: inherit;
}

/* Il posto della fotografia: il fondo degli scatti, col filetto a
   chiuderlo. Senza bordo, su fondo pagina, una lastra chiara non ha
   contorno. */
.pezzo__posto {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--fondo-scatto);
  border: 1px solid var(--filetto);
  overflow: hidden;
}

.pezzo__posto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Il passaggio dal manichino all'indossato, lo stesso del listino
   (css/listino.css, .articolo__scatto): si scambia l'opacità e non
   il display, così i due scatti restano tutti e due caricati e il
   ritorno è morbido quanto l'andata. Qui non serve nessun
   data-indossato: dove il secondo scatto non c'è, non c'è nemmeno
   l'immagine con la classe, e non si scambia niente. */
.pezzo__scatto { transition: opacity var(--t-lento) var(--ease); }

.pezzo__scatto--indossato { opacity: 0; }

.pezzo:hover .pezzo__scatto--fermo,
.pezzo:focus-visible .pezzo__scatto--fermo { opacity: 0; }

.pezzo:hover .pezzo__scatto--indossato,
.pezzo:focus-visible .pezzo__scatto--indossato { opacity: 1; }

.pezzo__nome {
  position: relative;
  justify-self: center;
  font-size: var(--t-20);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* Il filetto dal centro, come ovunque: è il collegamento a farsi
   sentire, non un cambio di colore. */
.pezzo__nome::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.pezzo:hover .pezzo__nome::after,
.pezzo:focus-visible .pezzo__nome::after { transform: scaleX(1); }

/* Il prezzo si scopre al passaggio, come nel listino: a riposo la
   vetrina dice il capo, il prezzo arriva quando ci si avvicina.
   Si nasconde con l'opacità e non con display, così resta nell'albero
   di accessibilità e chi legge a voce lo sente sempre; lo spazio
   resta occupato, così la fila non sobbalza; e dove il passaggio del
   cursore non esiste si vede sempre. Le tre regole sono le stesse
   spiegate per esteso in css/listino.css. */

.pezzo__prezzo {
  justify-self: center;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  opacity: 0;
  transition: opacity var(--t-medio) var(--ease);
}

/* :focus-within e non :focus-visible come il filetto del nome qui
   sopra: il filetto è un ornamento e può accendersi solo per chi usa
   la tastiera, il prezzo è un'informazione e deve comparire ogni volta
   che il capo prende il fuoco, comunque ci sia arrivato. */
.pezzo:hover .pezzo__prezzo,
.pezzo:focus-within .pezzo__prezzo { opacity: 1; }

@media (hover: none) {
  .pezzo__prezzo { opacity: 1; }
}

/* --- Il quarto capo: la targa sopra la lastra ----------------
   Nome e prezzo non stanno sotto la fotografia ma su un cartellino
   posato sopra, in basso. Finché la lastra è vuota il cartellino si
   legge come un rettangolo profilato; quando arriva lo scatto
   diventa l'etichetta bianca che sta sopra l'immagine.            */

.pezzo--targa { position: relative; }

.pezzo--targa .pezzo__targa {
  position: absolute;
  left: var(--s-24);
  right: var(--s-24);
  bottom: var(--s-24);
  display: grid;
  gap: var(--s-8);
  padding: var(--s-16);
  background: var(--bianco-lino);
  border: 1px solid var(--filetto);
}

/* --- Comparsa ------------------------------------------------
   Come nei mondi: la posa di partenza si accende solo se c'è un
   osservatore che potrà rimetterla in piedi.                      */

.vetrina[data-anima="sì"] .vetrina__testa,
.vetrina[data-anima="sì"] .vetrina__scelta,
.vetrina[data-anima="sì"] .pezzo {
  opacity: 0;
  transform: translateY(12px);
}

/* La testa apre, il selettore la segue di un passo. */
.vetrina__scelta { --i: 1; }

.vetrina[data-anima="sì"][data-visibile="sì"] .vetrina__testa,
.vetrina[data-anima="sì"][data-visibile="sì"] .vetrina__scelta,
.vetrina[data-anima="sì"][data-visibile="sì"] .vetrina__fila[data-attivo="sì"] .pezzo {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--t-lento) var(--ease) calc(var(--i, 0) * 60ms + 80ms),
    transform var(--t-lento) var(--ease) calc(var(--i, 0) * 60ms + 80ms);
}

/* Lo scaglionamento arriva dall'ordine, non da un attributo scritto
   a mano in ogni riga di HTML. */
.vetrina__fila > *:nth-child(1) { --i: 1; }
.vetrina__fila > *:nth-child(2) { --i: 2; }
.vetrina__fila > *:nth-child(3) { --i: 3; }
.vetrina__fila > *:nth-child(4) { --i: 4; }

/* --- Larghezze minori ---------------------------------------- */

@media (max-width: 1024px) {
  .vetrina { padding-block: var(--s-64); }
  .vetrina__palco { margin-top: var(--s-48); }
  .vetrina__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .vetrina__fila { grid-template-columns: minmax(0, 1fr); }
  /* A colonna sola il telaio si stringe, ma le due caselle restano
     uguali fra loro: è il grid a pareggiarle. */
  .vetrina__voce {
    min-width: 0;
    padding-inline: var(--s-16);
  }
  /* A colonna sola la lastra è alta: il cartellino resta dentro il
     bordo, ma senza rientri esagerati. */
  .pezzo--targa .pezzo__targa {
    left: var(--s-16);
    right: var(--s-16);
    bottom: var(--s-16);
  }
}

/* --- Movimento ridotto --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pezzo__prezzo { transition: none; }

  .vetrina[data-anima="sì"] .vetrina__testa,
  .vetrina[data-anima="sì"] .vetrina__scelta,
  .vetrina[data-anima="sì"] .pezzo { transform: none; }

  .vetrina[data-anima="sì"][data-visibile="sì"] .vetrina__testa,
  .vetrina[data-anima="sì"][data-visibile="sì"] .vetrina__scelta,
  .vetrina[data-anima="sì"][data-visibile="sì"] .vetrina__fila[data-attivo="sì"] .pezzo {
    transition: opacity var(--t-medio) var(--ease);
  }

  .vetrina[data-mosso="sì"] .vetrina__segno { transition: none; }
}