/* =============================================================
   Parea Sons — i bottoni

   IL CARTELLINO.
   Un bottone di Parea Sons è un cartellino sartoriale: la tela di
   lino, e due filetti d'oro cuciti dentro il bordo, sopra e sotto la
   scritta. È l'etichetta che si trova nel collo di un capo fatto
   bene — non un rettangolo colorato con dentro una parola.

   Tre cose lo compongono, e nessuna è decorativa:

   · la TRAMA — lo stesso --trama-lino delle lastre dei mondi e di
     Inside, quasi invisibile (5% di bianco): il bottone è di lino
     come tutto il resto;
   · i DUE FILETTI in --oro, che è l'ombra della corona nello stemma;
     a riposo sono corti e centrati, al passaggio si aprono fino al
     bordo. È il gesto unico del sito — il filetto che si apre dal
     centro — applicato all'unica cosa che si preme;
   · la LETTERA in Cinzel maiuscoletto, la stessa romana del payoff
     nel logo.

   Perché non un bottone pieno di colore come fa il riferimento:
   l'oro come fondo con testo chiaro sopra dà 3,8:1, sotto la soglia
   di leggibilità. L'oro qui vive dove è nato, come filo.
   ============================================================= */

.bottone {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--s-16) var(--s-24);
  overflow: hidden;
  cursor: pointer;

  /* La tela: il rosso dello stemma, più la trama del lino tessuta
     con un filo chiaro appena percettibile. Stesso passo delle
     lastre — ordito e trama a 6px, fiammatura a 17px, che essendo
     primo rispetto a 6 non torna mai in fase — ma scritta qui per
     esteso: il token --trama-lino nasce da --filo, e un bottone che
     dichiara il proprio filo lo farebbe dipendere dall'ordine dei
     fogli. */
  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);

  color: var(--bianco-lino);
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: 400;
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;

  transition:
    background-color var(--t-medio) var(--ease),
    color var(--t-medio) var(--ease);
}

/* I due filetti del cartellino. A riposo sono un accenno al centro;
   al passaggio si aprono fino al bordo interno. */
.bottone::before,
.bottone::after {
  content: "";
  position: absolute;
  left: var(--s-16);
  right: var(--s-16);
  height: 1px;
  /* Argento su rosso: è l'araldica dello scudo, ed è anche l'unica
     che si vede. L'oro sul rosso dà 2,0:1 e sparisce — il filo
     d'oro vive sul chiaro, dove la corona sta bene. */
  background: color-mix(in srgb, var(--bianco-lino) 76%, transparent);
  transform: scaleX(var(--apertura, .16));
  transform-origin: center;
  transition:
    transform var(--t-ampio) var(--ease),
    background-color var(--t-medio) var(--ease);
}

.bottone::before { top: 9px; }
.bottone::after  { bottom: 9px; }

/* Al passaggio la tela si fa più cupa e i filetti si aprono fino al
   bordo, a piena luce. Il rosso non cambia famiglia: si approfondisce
   soltanto, come una stoffa che prende ombra. */
.bottone:hover,
.bottone:focus-visible {
  --apertura: 1;
  background-color: var(--rosso-cupo);
}

.bottone:hover::before,
.bottone:hover::after,
.bottone:focus-visible::before,
.bottone:focus-visible::after {
  background: var(--bianco-lino);
}

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

.bottone:active { background-color: var(--inchiostro); }

.bottone[disabled],
.bottone[aria-disabled="true"] {
  opacity: .35;
  cursor: not-allowed;
}
.bottone[disabled]:hover,
.bottone[aria-disabled="true"]:hover {
  --apertura: .16;
  background-color: var(--rosso);
}

/* --- Cartellino vuoto ------------------------------------------
   Stesso oggetto, senza tela: qui il filo d'oro può fare da bordo
   intero, perché sotto c'è il chiaro. Per le azioni che accompagnano,
   non per quella principale — e al passaggio si riempie di rosso,
   così anche la seconda scelta parla la stessa lingua.             */

.bottone--vuoto {
  background-color: transparent;
  background-image: none;
  color: var(--inchiostro);
  border: 1px solid var(--oro);
}

.bottone--vuoto::before,
.bottone--vuoto::after { display: none; }

.bottone--vuoto:hover,
.bottone--vuoto:focus-visible {
  background-color: var(--rosso);
  border-color: var(--rosso);
  color: var(--bianco-lino);
}

/* Il cartellino di un gesto che non si torna indietro: cancellare il
   profilo, e per ora è l'unico. È il vuoto col filo rosso al posto di
   quello d'oro — un bottone pieno lo confonderebbe con «Aggiungi alla
   borsa», che è la cosa che uno preme volentieri.

   Il rosso è quello DI LAVORO e non l'araldico. L'araldico è dei segni
   minuti — il contatore della borsa, il cuore dei preferiti, gli
   errori dei moduli — e come testo dà 4,29:1, sotto la soglia di §2.
   Qui è testo, e si legge. Al passaggio si riempie come gli altri:
   allora il rosso è fondo, e sul fondo l'araldico andrebbe bene, ma
   due rossi diversi nello stesso bottone sono due rossi diversi. */
.bottone--guasto {
  border-color: var(--rosso);
  color: var(--rosso);
}

.bottone--vuoto:active {
  background-color: var(--rosso-cupo);
  border-color: var(--rosso-cupo);
}

/* --- La freccia ------------------------------------------------
   Non è un cartellino: un cartellino porta da qualche parte, una
   freccia sposta quello che si sta già guardando. Serve in tre posti
   — il colore sulla lastra del listino, la vista nella scheda
   prodotto, la fila di «Lasciati ispirare» — e sta qui perché
   bottoni.css è l'unico foglio che tutte e tre le pagine caricano.

   Nel riferimento è un chevron dentro un cerchio bianco. Il cerchio
   qui non c'è: il sito non ha un angolo arrotondato. Resta però la
   sola cosa che il cerchio faceva davvero, cioè tenere leggibile un
   tratto d'inchiostro sopra un capo blu — un velo quadrato del
   colore del fondo delle fotografie.

   Dove sta (posizione, quando compare) lo dicono i file di chi la
   usa: qui c'è solo com'è fatta.                                    */

.freccia {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--inchiostro);
  background: color-mix(in srgb, var(--fondo-scatto) 78%, transparent);
  transition:
    background-color var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease),
    opacity var(--t-medio) var(--ease);
}

.freccia svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.freccia:hover {
  background: var(--fondo-scatto);
  color: var(--rosso);
}

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

/* --- Misure ----------------------------------------------------
   Di suo il cartellino occupa tutta la riga: è così che serve nei
   pannelli. Dove sta dentro un testo o accanto a un altro, si
   stringe.                                                         */

.bottone--stretto {
  width: auto;
  display: inline-block;
  padding-inline: var(--s-48);
}

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

@media (prefers-reduced-motion: reduce) {
  .bottone::before,
  .bottone::after { transition: background-color var(--t-medio) var(--ease); }
  /* Senza animazione i filetti restano aperti: lo stato si vede
     lo stesso, semplicemente non scorre. */
  .bottone { --apertura: 1; }
}