/* Intelligenza artificiale, fioritura umana: il sito del libro.
   Impaginazione: un libro che si sfoglia scorrendo. Fasce alternate carta e notte (i due colori della
   copertina: la parete e la giacca), la virgola del titolo come segno ricorrente. */

@font-face { font-family: "Cormorant"; font-weight: 500; font-style: normal; font-display: swap; src: url("/font/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 500; font-style: italic; font-display: swap; src: url("/font/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 600; font-style: normal; font-display: swap; src: url("/font/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 600; font-style: italic; font-display: swap; src: url("/font/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/font/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/font/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/font/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
	--carta: #f3eee7;        /* pagina */
	--parete: #aca394;       /* lo sfondo della foto di copertina */
	--parete-chiara: #ddd5ca;
	--notte: #1c2230;        /* la giacca */
	--notte-2: #262d3d;
	--inchiostro: #23262d;
	--tenue: #5f6068;
	--blu: #3f74ad;          /* il nome dell'autore in copertina */
	--blu-chiaro: #8fb3dc;
	--linea: rgba(35, 38, 45, 0.14);
	--f-titolo: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
	--f-testo: "Source Sans", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--larghezza: 1120px;
	--lato: max(20px, env(safe-area-inset-left, 0px));
	--lato-d: max(20px, env(safe-area-inset-right, 0px));
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--carta); color: var(--inchiostro);
	font: 400 1.075rem/1.65 var(--f-testo);
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titolo); font-weight: 500; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

.salta { position: absolute; left: -9999px; top: 8px; background: var(--notte); color: #fff; padding: 8px 14px; z-index: 50; }
.salta:focus { left: 12px; }

/* Testata */
.testata {
	position: fixed; z-index: 20; top: 0; left: 0; right: 0;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: calc(14px + env(safe-area-inset-top, 0px)) var(--lato-d) 14px var(--lato);
	transition: background-color .4s ease, box-shadow .4s ease;
}
.testata.piena { background: rgba(243, 238, 231, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linea); }
.testata-nome { font: 600 1.05rem/1 var(--f-titolo); letter-spacing: .02em; color: var(--blu); text-decoration: none; font-size: 1.25rem; }

.bottone {
	display: inline-flex; align-items: center; gap: .6em;
	background: var(--notte); color: #fff; text-decoration: none;
	font: 600 .95rem/1 var(--f-testo); letter-spacing: .04em;
	padding: 1em 1.6em; border-radius: 999px;
	transition: transform .3s ease, background-color .3s ease;
}
.bottone:hover { background: var(--blu); transform: translateY(-2px); }
.bottone--piccolo { padding: .7em 1.2em; font-size: .85rem; }

.occhiello { font: 600 .78rem/1.2 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; color: var(--blu); }
.occhiello--chiaro { color: var(--blu-chiaro); }
.grande { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.grande em { color: var(--blu); }
.testo { max-width: 60ch; display: grid; gap: 1em; color: var(--tenue); }
.testo--chiaro { color: rgba(255, 255, 255, .78); }

.larghezza { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding-left: var(--lato); padding-right: var(--lato-d); }
.fascia { position: relative; padding-block: clamp(88px, 14vw, 170px); overflow: hidden; overflow: clip; }
.fascia--chiara { background: var(--carta); }
.fascia--scura { background: var(--notte); color: #f2efe9; }
.fascia--scura .grande em { color: var(--blu-chiaro); }
.due-colonne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.due-colonne > div { display: grid; gap: 18px; min-width: 0; }

/* Apertura */
.apertura {
	position: relative; min-height: 100svh; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px;
	padding: calc(110px + env(safe-area-inset-top, 0px)) var(--lato-d) 90px var(--lato);
	max-width: calc(var(--larghezza) + 120px); margin: 0 auto;
}
.apertura::before { /* la parete della foto, che entra dal lato del libro */
	content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; right: -50vw; width: calc(50vw + 38%);
	background: linear-gradient(180deg, var(--parete-chiara), var(--parete));
}
.apertura-virgola {
	position: absolute; z-index: -1; right: 18%; top: -14%;
	font: italic 500 min(80vw, 62rem)/1 var(--f-titolo); color: rgba(255, 255, 255, .28);
	pointer-events: none; user-select: none;
}
.apertura-testo { display: grid; gap: 26px; }
.titolo { font-size: clamp(3rem, 8.2vw, 7rem); line-height: .95; letter-spacing: -.01em; color: var(--notte); }
.titolo-riga { display: block; }
.titolo-riga--corsivo { font-style: italic; color: var(--blu); padding-left: .6em; }
.virgola { color: var(--blu); display: inline-block; animation: respira 4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes respira { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.04em) scale(1.12); } }
.apertura-sotto { font-size: 1.2rem; max-width: 42ch; color: var(--tenue); }
.apertura-azioni { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.apertura-data { font: italic 500 1.25rem/1.2 var(--f-titolo); color: var(--notte); }
.apertura-libro { display: grid; place-items: center; perspective: 1400px; }
.apertura-giu {
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea);
	display: grid; place-items: center; text-decoration: none; color: var(--notte);
	animation: giu 2.4s ease-in-out infinite;
}
@keyframes giu { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* Il libro in tre dimensioni */
.libro3d {
	position: relative; width: min(340px, 72vw); aspect-ratio: 536 / 761;
	transform-style: preserve-3d; transform: rotateY(-22deg) rotateX(4deg);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	filter: drop-shadow(30px 40px 40px rgba(28, 34, 48, .35));
}
.libro3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px 5px 5px 2px; backface-visibility: hidden; }
.libro3d::after { /* luce sulla copertina */
	content: ""; position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; pointer-events: none;
	background: linear-gradient(105deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 60%);
	background-size: 250% 100%; background-position: var(--luce, 100%) 0;
}
.libro3d-dorso {
	position: absolute; top: 0; left: 0; width: 26px; height: 100%;
	background: linear-gradient(90deg, #d9d2c7, #f7f3ee 60%, #cfc7bb);
	transform-origin: left; transform: rotateY(90deg);
}
.libro3d--piccolo { width: min(270px, 62vw); }

/* La tesi */
.citazione { font: italic 500 clamp(1.7rem, 3vw, 2.4rem)/1.25 var(--f-titolo); color: var(--notte); }
.citazione em { color: var(--blu); }

/* Connessioni e legami */
.fili { min-height: 92vh; display: grid; align-items: center; }
.fili-tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.fili-testo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 8vw, 140px); }
.fili-colonna { display: grid; gap: 18px; align-content: start; max-width: 30rem; }
.fili-colonna p:last-child { color: rgba(255, 255, 255, .74); }
.fili-colonna--destra { margin-top: clamp(60px, 14vw, 200px); justify-self: end; }
.fili-colonna, .fili-colonna--destra { background: radial-gradient(closest-side, rgba(28,34,48,.85), rgba(28,34,48,0)); padding: 18px; margin-inline: -18px; }

/* La posta */
.posta .larghezza { display: grid; gap: 28px; }
.posta-titolo { max-width: 18ch; }
.posta-tre { list-style: none; margin: 24px 0 8px; padding: 0; display: grid; gap: 0; }
.posta-tre li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: baseline; gap: 12px 40px; padding: 22px 0; border-top: 1px solid var(--linea); }
.posta-tre li:last-child { border-bottom: 1px solid var(--linea); }
.posta-parola { font: italic 500 clamp(2.6rem, 7.5vw, 6.4rem)/1 var(--f-titolo); color: var(--notte); }
.posta-tre li span:last-child { color: var(--tenue); font-size: 1.1rem; }
.posta-tre li:nth-child(2) { padding-left: 6vw; }
.posta-tre li:nth-child(3) { padding-left: 12vw; }

/* Sette domande */
.domande { background: linear-gradient(180deg, var(--carta), var(--parete-chiara)); }
.domande-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 90px); }
.domande-intro { display: grid; }
.domande-fisso { display: grid; gap: 22px; align-content: start; }
.domande-contatore { position: sticky; top: 110px; margin-top: 20px; font: italic 500 clamp(6rem, 13vw, 11rem)/.8 var(--f-titolo); color: var(--blu); font-variant-numeric: tabular-nums; }
.domande-contatore small { font-size: .3em; color: var(--tenue); font-style: normal; }
.domande-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.domanda {
	background: rgba(255, 255, 255, .62); border: 1px solid rgba(255,255,255,.8);
	border-radius: 6px; padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 14px; justify-items: start;
	box-shadow: 0 24px 50px -36px rgba(28, 34, 48, .45);
	transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}
.domanda h3 { font-size: clamp(2.1rem, 4vw, 3rem); color: var(--notte); }
.domanda-numero { font: 600 .74rem/1 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.domanda > p:not([class]) { color: var(--tenue); }
.domanda-legame { font: italic 500 1.35rem/1.2 var(--f-titolo); color: var(--notte); padding-top: 12px; border-top: 1px solid var(--linea); justify-self: stretch; }
.domanda-legame strong { font-weight: 600; color: var(--blu); }
.risposta { font: 600 .8rem/1 var(--f-testo); letter-spacing: .06em; padding: .55em .9em; border-radius: 999px; }
.risposta--no { background: var(--notte); color: #fff; }
.risposta--si { background: var(--blu); color: #fff; }
.risposta--mal { background: transparent; color: var(--notte); box-shadow: inset 0 0 0 1.5px var(--notte); }
.risposta--ma { background: var(--parete); color: var(--notte); }

/* Euarmostia */
.accordo { min-height: 100vh; display: grid; align-items: center; text-align: center; }
.accordo-corde { position: absolute; inset: 0; width: 100%; height: 100%; }
.accordo-testo { position: relative; display: grid; justify-items: center; gap: 18px; }
.accordo-parola { font: italic 500 clamp(4rem, 15vw, 12rem)/1 var(--f-titolo); color: #fff; letter-spacing: .01em; }
.accordo-traduzione { font: italic 500 1.6rem/1 var(--f-titolo); color: var(--blu-chiaro); margin-bottom: 18px; }
.accordo .testo { margin-inline: auto; text-align: left; background: rgba(28,34,48,.7); padding: 6px 10px; }

/* Voci */
.voci { background: var(--carta); padding-block: clamp(80px, 12vw, 150px); display: grid; gap: 40px; }
.voci-occhiello { text-align: center; }
.voci-righe { display: grid; gap: 4px; overflow: hidden; }
.voci-riga { font: 500 clamp(2.6rem, 7vw, 6rem)/1.1 var(--f-titolo); white-space: nowrap; color: var(--notte); will-change: transform; }
.voci-riga--corsivo { font-style: italic; color: var(--blu); }
.voci-testo { text-align: left; }

/* Quarta di copertina */
.quarta { background: var(--parete-chiara); }
.quarta-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.quarta-foto { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(28,34,48,.6); }
.quarta-foto img { width: 100%; transform: scale(1.08); }
.quarta-testo { display: grid; gap: 22px; }
.quarta-apertura { font: 500 clamp(1.5rem, 2.6vw, 2.1rem)/1.3 var(--f-titolo); color: var(--notte); }
.quarta-svolta { font: italic 600 clamp(1.7rem, 3vw, 2.5rem)/1.2 var(--f-titolo); color: var(--blu); }
.quarta-chiusa { font: italic 500 1.5rem/1.3 var(--f-titolo); color: var(--notte); border-left: 2px solid var(--blu); padding-left: 18px; }

/* Strumenti */
.strumenti .larghezza { display: grid; gap: 32px; }
.strumenti .grande { max-width: 22ch; }
.strumenti-domande { display: grid; gap: 10px; }
.strumenti-domande p { font: italic 500 clamp(1.9rem, 4.4vw, 3.4rem)/1.15 var(--f-titolo); color: var(--blu); }
.strumenti-domande p:nth-child(2) { padding-left: 8vw; color: var(--notte); }

/* Autore */
.autore { background: var(--carta); border-top: 1px solid var(--linea); }

/* Preordina */
.preordina-griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 100px); align-items: center; }
.preordina-griglia > div:last-child { display: grid; gap: 26px; min-width: 0; }
.preordina-libro { display: grid; place-items: center; perspective: 1400px; }
.negozi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.negozi a {
	display: grid; gap: 4px; padding: 18px 20px; border-radius: 6px; text-decoration: none;
	background: var(--notte-2); border: 1px solid rgba(255,255,255,.08);
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}
.negozi a:hover { transform: translateY(-3px); background: var(--blu); border-color: var(--blu); }
.negozi span { font: 600 1.5rem/1.1 var(--f-titolo); color: #fff; }
.negozi small { font-size: .85rem; color: rgba(255,255,255,.7); letter-spacing: .03em; }
.preordina-libreria { color: rgba(255,255,255,.78); }
.isbn { font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.scheda { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.scheda div { display: grid; gap: 2px; }
.scheda dt { font: 600 .72rem/1.2 var(--f-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--blu-chiaro); }
.scheda dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; }

.piede {
	background: var(--notte); color: rgba(255,255,255,.6); font-size: .9rem; text-align: center;
	display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,.08);
	padding: 34px var(--lato-d) calc(34px + env(safe-area-inset-bottom, 0px)) var(--lato);
}

/* Comparse allo scorrimento: solo se il JavaScript c'e' (senza, tutto e' visibile). */
.js .rivela, .js .domanda, .js .posta-tre li { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .visto { opacity: 1 !important; transform: none !important; }
.js .posta-tre li.visto { transform: none; }

/* Telefoni e tavolette */
@media (max-width: 900px) {
	.apertura { grid-template-columns: 1fr; padding-top: calc(96px + env(safe-area-inset-top, 0px)); gap: 50px; min-height: auto; }
	.apertura::before { right: 0; left: 0; width: auto; top: 58%; }
	.apertura-virgola { right: -8%; top: 30%; }
	.apertura-libro { order: 2; }
	.apertura-giu { display: none; }
	.due-colonne, .domande-griglia, .quarta-griglia, .preordina-griglia { grid-template-columns: 1fr; }
	.domande-fisso { position: static; }
	.domande-contatore { display: none; }
	.fili-testo { grid-template-columns: 1fr; }
	.fili-tela, .accordo-corde { opacity: .45; }
	.fili-colonna--destra { margin-top: 0; justify-self: start; }
	.posta-tre li { grid-template-columns: 1fr; padding-left: 0 !important; }
}

/* Chi preferisce meno movimento: niente parallasse, niente animazioni. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	[data-p], [data-o] { transform: none !important; }
	.js .rivela, .js .domanda, .js .posta-tre li { opacity: 1; transform: none; }
}