/* =============================================================
   Parea Sons — Inside

   Fascia in fondo alla homepage: cinque storie su un binario che
   esce dal bordo destro. Non esistono foto di campagna, quindi al
   posto della fotografia ogni scheda ha una lastra tessuta in
   codice — la trama del lino e un emblema a tratto unico.
   ============================================================= */

.inside {
  /* Sopra c'è .vetrina sul fondo pagina, sotto il footer in
     --tortora-chiaro: serve un terzo tono, o la fascia si fonde
     con uno dei due vicini. Al 12% il mix cadeva esattamente su
     --tortora-chiaro; al 18% è la nota più profonda della pagina,
     e --greige ci resta sopra a 4,7:1. Oltre il 20% si scende
     sotto la soglia. */
  --inside-fondo: color-mix(in srgb, var(--beige) 18%, var(--bianco-lino));

  --scheda-l: clamp(280px, 26vw, 380px);
  --passo: var(--s-32);

  /* Il binario è a tutta larghezza, ma la prima scheda si allinea
     al titolo: oltre la larghezza massima di pagina il margine
     cresce da solo. */
  --margine-binario: max(
    var(--bordo-pagina),
    calc((100% - var(--larghezza-max)) / 2 + var(--bordo-pagina))
  );

  position: relative;
  z-index: 1;
  padding-block: var(--s-96);
  background: var(--inside-fondo);
  border-top: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
}

/* --- Testata ------------------------------------------------- */

.inside__testata {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
  margin-bottom: var(--s-48);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-32);
  opacity: 0;
  transform: translateY(20px);
}

.inside__titolo {
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-32), 4vw, var(--t-48));
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.inside__comandi {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  flex: 0 0 auto;
}

/* Chevron a tratto 1px: il sito non ha un solo angolo arrotondato,
   quindi niente pastiglia e niente cerchio attorno alla freccia. */
.inside__freccia {
  position: relative;
  display: block;
  padding: var(--s-8);
  cursor: pointer;
  color: var(--inchiostro);
  transition: opacity var(--t-medio) var(--ease);
}

.inside__freccia svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

/* Il filetto che si apre dal centro: lo stesso gesto delle voci di
   menu e delle icone di servizio, non uno nuovo. */
.inside__freccia::after {
  content: "";
  position: absolute;
  left: var(--s-8);
  right: var(--s-8);
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

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

.inside__freccia:disabled {
  opacity: .28;
  cursor: default;
}

.inside__freccia:disabled::after { transform: scaleX(0); }

/* Il contatore è un dato, non un ornamento: stessa lettera e stesso
   tracking dei prezzi. */
.inside__conta {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  font-weight: 400;
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  display: flex;
  align-items: baseline;
  gap: 1px;
  min-width: 4ch;
  justify-content: center;
}

/* Il numeratore sale di una riga quando cambia. Il rullo è alto una
   riga e taglia quello che entra e quello che esce. */
.inside__rullo {
  display: block;
  overflow: hidden;
  height: 1.1em;
  line-height: 1.1;
}

.inside__rullo > span {
  display: block;
  color: var(--inchiostro);
  animation: inside-rullo var(--t-medio) var(--ease);
}

@keyframes inside-rullo {
  from { transform: translateY(1.1em); opacity: 0; }
  to   { transform: none;              opacity: 1; }
}

/* --- Binario ------------------------------------------------- */

.inside__binario {
  display: flex;
  gap: var(--passo);
  padding-inline: var(--margine-binario);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--margine-binario);
  /* La barra si nasconde: il binario si legge dalle schede tagliate
     dal bordo, dalle frecce e dal contatore. */
  scrollbar-width: none;
}

.inside__binario::-webkit-scrollbar { display: none; }

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

/* --- Scheda -------------------------------------------------- */

.scheda {
  flex: 0 0 var(--scheda-l);
  scroll-snap-align: start;
  display: grid;
  gap: var(--s-16);
  align-content: start;
}

/* La fascia è leggibile di suo: è js/inside.js a metterla in posa
   di partenza con data-anima, e solo dopo aver verificato di poter
   contare sull'IntersectionObserver. Senza JS, o se l'osservatore
   non risponde, resta tutto visibile invece di sparire. */
.inside[data-anima="sì"] .scheda,
.inside[data-anima="sì"] .inside__testata {
  opacity: 0;
  transform: translateY(20px);
}

/* La comparsa parte quando la fascia entra in vista, sfalsata di
   70ms per scheda: le lastre arrivano da sinistra a destra. */
.inside[data-anima="sì"][data-visibile="sì"] .scheda,
.inside[data-anima="sì"][data-visibile="sì"] .inside__testata {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--t-lento) var(--ease) calc(var(--i, 0) * 70ms),
    transform var(--t-lento) var(--ease) calc(var(--i, 0) * 70ms);
}

/* --- La lastra ----------------------------------------------- */

.scheda__lastra {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--s-8);
  background: var(--tinta);
}

/* Le quattro tinte sono i colori a listino, da tokens.css: la fascia
   parla di materia con i colori della materia. --filo è il filato
   della trama, --tratto l'emblema. */
.scheda__lastra[data-tinta="blu"] {
  --tinta:  var(--capo-blu);
  --filo:   rgba(250, 249, 247, .30);
  --tratto: rgba(250, 249, 247, .66);
}
.scheda__lastra[data-tinta="beige"] {
  --tinta:  var(--capo-beige);
  --filo:   rgba(26, 29, 36, .15);
  --tratto: rgba(26, 29, 36, .52);
}
.scheda__lastra[data-tinta="bianco"] {
  --tinta:  var(--capo-bianco);
  --filo:   rgba(26, 29, 36, .11);
  --tratto: rgba(26, 29, 36, .44);
}
.scheda__lastra[data-tinta="tortora"] {
  --tinta:  var(--capo-tortora);
  --filo:   rgba(26, 29, 36, .14);
  --tratto: rgba(26, 29, 36, .50);
}

/* La trama del lino sta in tokens.css: qui si dichiara solo il
   filato. Deborda dell'8% per avere margine di parallasse. */
.scheda__trama {
  position: absolute;
  inset: 0 -8%;
  background-image: var(--trama-lino);
}

/* Le lastre fotografiche: la foto copre la trama e non serve
   toccare nient'altro. Restano fotografie di lino e di lavorazione,
   non di capi indossati — quello è il linguaggio della vetrina. */
.scheda__lastra img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scheda__emblema {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44%;
  height: auto;
  fill: none;
  stroke: var(--tratto);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Ogni tracciato ha pathLength="1", quindi il disegno si racconta
   con un solo numero: la linea parte scoperta e si chiude su sé
   stessa. Nessuna misura di lunghezza calcolata in JS. */
.inside[data-anima="sì"] .scheda__emblema > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.inside[data-anima="sì"][data-visibile="sì"] .scheda__emblema > * {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease)
              calc(var(--i, 0) * 70ms + 240ms + var(--d, 0ms));
}

/* --- Testo della scheda -------------------------------------- */

.scheda__titolo {
  font-family: var(--font-testo);
  font-weight: 400;
  font-size: calc(var(--t-20) * 1.2);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.scheda__testo {
  font-size: var(--t-20);
  line-height: 1.45;
  color: var(--greige);
}

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

@media (max-width: 1024px) {
  .inside { padding-block: var(--s-64); }
  .inside__testata { margin-bottom: var(--s-32); }
}

@media (max-width: 768px) {
  .inside {
    --scheda-l: min(78vw, 340px);
    --passo: var(--s-24);
  }

  /* Titolo sopra, frecce e contatore sotto a destra: a questa
     larghezza affiancarli spezzerebbe il titolo su tre righe. */
  .inside__testata {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-16);
  }

  .inside__comandi { justify-content: flex-end; }
}

/* --- Movimento ridotto ---------------------------------------
   Nessuno scaglionamento, nessuna traslazione, nessuna parallasse
   (js/inside.js non la aggancia nemmeno) e gli emblemi già
   disegnati: resta solo la dissolvenza.                          */
@media (prefers-reduced-motion: reduce) {
  .inside[data-anima="sì"] .scheda,
  .inside[data-anima="sì"] .inside__testata { transform: none; }

  .inside[data-anima="sì"][data-visibile="sì"] .scheda,
  .inside[data-anima="sì"][data-visibile="sì"] .inside__testata {
    transition: opacity var(--t-medio) var(--ease);
  }

  .inside[data-anima="sì"] .scheda__emblema > * { stroke-dashoffset: 0; }
  .inside[data-anima="sì"][data-visibile="sì"] .scheda__emblema > * {
    transition: none;
  }
  .inside__rullo > span { animation: none; }
}