/* La materia della pagina dei libri.
   Il JavaScript scrive solo numeri fra 0 e 1; qui si decide quanto conta ognuno e come si combinano.
   Ingressi globali (Jev): --modo-sfoglia --modo-legge --modo-confronta --modo-perso --modo-decide
     (distribuzione di `modo`), --coinvolgimento, --esitazione, --pronto.
   Ingressi per sezione: --interesse --alternativa (Jev), --evidenza (osservata),
     --aperto (1 se chi visita ha chiesto l'approfondimento).
   Ingressi degli elementi di bordo: --coppia (luce del secondo libro in gara). */

@property --modo-sfoglia { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --modo-legge { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --modo-confronta { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --modo-perso { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --modo-decide { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --esitazione { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pronto { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --alternativa { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --aperto { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --secondo { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --coppia { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  /* Il dubbio è il più forte fra esitare e confrontare. */
  --dubbio: max(var(--esitazione), var(--modo-confronta));
}

body {
  font-family: var(--serif);
  /* Il coinvolgimento scalda la carta. */
  background: color-mix(in oklch, var(--carta), var(--caldo) calc(var(--coinvolgimento) * 45%));
  line-height: 1.6;
  transition: background-color 1.2s ease;
}

.testata {
  position: sticky; top: 0; z-index: 5;
  padding: .7rem 1rem; font-family: var(--sans); font-size: .85rem; letter-spacing: .04em;
  background: color-mix(in oklch, var(--carta) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filo);
}
.testata a { color: var(--tenue); }

main { max-width: 42rem; margin: 0 auto; padding: 2.5rem 1rem 40vh; }
h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 500; line-height: 1.1; margin: 0 0 .5rem; }
.occhiello { font-family: var(--sans); color: var(--tenue); margin: 0 0 3rem; }

/* ——— La sezione ——— */
.libro {
  --secondo: calc(var(--alternativa) * var(--evidenza));

  position: relative;
  margin: 0 -1rem 2.5rem;
  padding: 1.25rem 1rem 1.25rem 1.5rem;
  /* Il filo della luce è un'ombra interna: cresce senza spostare il testo. */
  box-shadow: inset calc(var(--luce) * 5px) 0 0 var(--accento);
  border-radius: 4px;
  transition: opacity var(--morbida), background-color var(--morbida), box-shadow var(--morbida), outline-color var(--morbida);
  background: color-mix(in oklch, transparent, var(--superficie) calc(var(--luce) * 100%));
  outline: 2px dashed color-mix(in oklch, var(--accento) calc(var(--secondo) * var(--dubbio) * 100%), transparent);
  outline-offset: 4px;
  /* Chi legge con attenzione vede sfumare il resto. */
  opacity: calc(1 - var(--modo-legge) * (1 - var(--luce)) * .55);
}
.libro h2 {
  font-weight: 500;
  font-size: 1.75rem;
  color: color-mix(in oklch, var(--inchiostro), var(--accento) calc(var(--luce) * 60%));
  transition: color var(--morbida);
  line-height: 1.15;
  margin: 0 0 .25rem;
}
.autore { font-family: var(--sans); font-size: .85rem; color: var(--tenue); margin: 0 0 .9rem; }
.sintesi { font-size: 1.1rem; margin: 0 0 .8rem; }

/* Il gancio è per chi sfoglia: una riga che si legge al volo. */
.gancio {
  --presenza: clamp(0, (var(--modo-sfoglia) - .3) * 2.5, 1);
  font-family: var(--sans); font-weight: 650; text-transform: uppercase; letter-spacing: .06em;
  font-size: .78rem; color: var(--accento);
}
.gancio p { margin: 0 0 .4rem; }

/* Il corpo si ritira quando si sfoglia e si sfoca appena mentre si scorre veloce. */
.corpo {
  --presenza: calc(1 - var(--modo-sfoglia) * .85);
}
.corpo p { margin: 0 0 .8rem; }

/* L'approfondimento arriva da solo a chi è assorto nella sezione che lo interessa,
   oppure a chi lo chiede. */
.approfondimento {
  --presenza: max(var(--aperto), clamp(0, (var(--luce) * max(var(--modo-legge), var(--coinvolgimento)) - .35) * 3, 1));
  font-style: italic; color: var(--tenue);
  border-left: 1px solid var(--filo); padding-left: .9rem;
}

/* «Fa per te se…» per chi esita, solo sulle due sezioni in gara. */
.per-chi {
  --presenza: clamp(0, (var(--dubbio) * max(var(--luce), var(--secondo)) - .2) * 3.5, 1);
  font-family: var(--sans); font-size: .92rem;
}
.per-chi p {
  margin: .4rem 0 .8rem; padding: .7rem .9rem; border-radius: 6px;
  background: color-mix(in oklch, var(--caldo) 55%, transparent);
}

/* «Da dove cominciare» quando chi visita è pronto, solo dove c'è luce. */
.cominciare {
  --presenza: clamp(0, (var(--pronto) * var(--luce) - .35) * 4, 1);
  font-family: var(--sans); font-size: .92rem;
}
.cominciare p { margin: .4rem 0 .8rem; padding-left: .9rem; border-left: 3px solid var(--accento); }

.azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; font-family: var(--sans); font-size: .85rem; }
.azioni button {
  font: inherit; cursor: pointer; border-radius: 999px; padding: .35rem .85rem;
  border: 1px solid var(--filo); background: var(--superficie); color: var(--inchiostro);
}
.azioni button[aria-pressed="true"] { border-color: var(--accento); color: var(--accento); }
/* «Scegli» si accende con la decisione, dove c'è luce. */
.azioni .scegli {
  background: color-mix(in oklch, var(--superficie), var(--accento) calc(var(--modo-decide) * var(--luce) * 100%));
  color: color-mix(in oklch, var(--inchiostro), white calc(clamp(0, (var(--modo-decide) * var(--luce) - .4) * 3, 1) * 100%));
  transition: background-color var(--morbida), color var(--morbida);
}

/* ——— Elementi che entrano dal bordo ———
   --k è la loro presenza: fuori schermo a 0, al loro posto a 1. */
#indice, #confronto, #invito {
  position: fixed; z-index: 4;
  font-family: var(--sans); font-size: .88rem;
  background: var(--superficie); color: var(--inchiostro);
  border: 1px solid var(--filo); border-radius: 10px;
  box-shadow: 0 8px 30px oklch(0% 0 0 / .12);
  padding: .8rem 1rem;
  opacity: var(--k);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .25, 1);
}
#indice {
  --k: clamp(0, (var(--modo-perso) - .3) * 3, 1);
  top: 4rem; left: 1rem; max-width: 15rem;
  transform: translateX(calc((1 - var(--k)) * -120%));
}
#indice p { margin: 0 0 .4rem; color: var(--tenue); }
#indice ol { margin: 0; padding-left: 1.2rem; }
#indice a { color: var(--accento); }
/* Senza un secondo libro davvero in gara (--coppia), niente barra. */
#confronto {
  --k: clamp(0, (var(--dubbio) * var(--coppia) - .3) * 4, 1);
  left: 50%; top: 3.6rem; width: min(34rem, calc(100vw - 2rem));
  transform: translate(-50%, calc((1 - var(--k)) * -180%));
}
#confronto a { color: var(--accento); font-weight: 600; }
#invito {
  --k: clamp(0, (var(--pronto) - .55) * 4, 1);
  left: 50%; bottom: 1rem; width: min(30rem, calc(100vw - 2rem));
  display: flex; gap: .8rem; align-items: center; justify-content: space-between;
  transform: translate(-50%, calc((1 - var(--k)) * 180%));
}
#invito button {
  font: inherit; cursor: pointer; border: 0; border-radius: 999px; padding: .45rem 1rem;
  background: var(--accento); color: white; white-space: nowrap;
}
/* Finché non c'è un libro con abbastanza luce, l'invito resta fuori. */
#invito:not([data-libro]) { display: none; }

@media (min-width: 1000px) {
  /* Gli elementi centrati seguono la colonna, non lo schermo, quando la sidebar è aperta. */
  body:has(#sidebar:not([hidden])) :is(#confronto, #invito) { left: calc(50% - var(--larghezza-sidebar) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .libro, .libro h2, .azioni .scegli, #indice, #confronto, #invito { transition: none; }
}