/* lo sfogliatore di un catalogo (prima su Holm & Nesti, 27/10/2026): il libro su un piano di pietra, le pagine che girano davvero
   (ogni foglio ha fronte e retro e ruota sul dorso). Sotto i 700 px niente doppie: le pagine una per volta, si scorrono col dito.
   Le pagine le monta src/sfoglia.js da data-pagine e data-base. */
.sfoglia{display:flex;flex-direction:column;gap:clamp(14px,1.2vw,20px)}
.sfoglia__testa{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px;border-top:1px solid var(--nero)}
.sfoglia__testa .tit{color:var(--nero)}
.sfoglia__intero{background:none;border:0;padding:0;color:var(--grigio);cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit;transition:color .4s cubic-bezier(.16,1,.3,1)}
.sfoglia__intero:hover,.sfoglia__intero:focus-visible{color:var(--arancio)}
.sfoglia__intero[hidden]{display:none}

/* il piano: la doppia aperta prende l'84% della larghezza, e il piano resta 3:2 */
.sfoglia__palco{position:relative;aspect-ratio:3/2;background:var(--pietra);overflow:clip;display:grid;place-items:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sfoglia__libro{position:relative;width:84%;aspect-ratio:460/287.5;perspective:2600px;transition:transform .9s cubic-bezier(.65,.05,.25,1)}
/* chiuso si vede solo la copertina: il libro scivola a centrarla (e alla fine, la quarta) */
.sfoglia__libro.chiuso{transform:translateX(-25%)}
.sfoglia__libro.finito{transform:translateX(25%)}
.sfoglia__foglio{position:absolute;top:0;left:50%;width:50%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-origin:0 50%;transition:transform .9s cubic-bezier(.65,.05,.25,1)}
.sfoglia__foglio.girato{transform:rotateY(-180deg)}
.sfoglia__faccia{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#EBE6DE;overflow:hidden}
.sfoglia__faccia--retro{transform:rotateY(180deg)}
.sfoglia__faccia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* la piega: un'ombra morbida verso il dorso, su tutte e due le facce */
.sfoglia__faccia::after{content:"";position:absolute;inset:0;pointer-events:none}
.sfoglia__faccia--fronte::after{background:linear-gradient(90deg,rgba(30,20,15,.22),rgba(30,20,15,.06) 4%,rgba(30,20,15,0) 12%)}
.sfoglia__faccia--retro::after{background:linear-gradient(270deg,rgba(30,20,15,.22),rgba(30,20,15,.06) 4%,rgba(30,20,15,0) 12%)}
/* l'ombra del libro sul piano: segue la parte che c'è (solo destra da chiuso, solo sinistra alla fine) */
.sfoglia__ombra{position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:0 30px 60px -20px rgba(53,30,28,.35),0 8px 18px -6px rgba(53,30,28,.18);pointer-events:none;transition:left .9s cubic-bezier(.65,.05,.25,1),right .9s cubic-bezier(.65,.05,.25,1)}
.chiuso .sfoglia__ombra{left:50%}
.finito .sfoglia__ombra{right:50%}

/* le due metà del piano sono i due tasti: il cursore dice «Indietro» e «Avanti» */
.sfoglia__zona{position:absolute;top:0;bottom:0;width:50%;background:none;border:0;padding:0;cursor:pointer;z-index:300}
.sfoglia__zona--prima{left:0}
.sfoglia__zona--dopo{right:0}
.sfoglia__zona:disabled{pointer-events:none}
.sfoglia__zona:focus-visible{outline:2px solid var(--arancio);outline-offset:-6px}

/* il piede: i capitoli a sinistra, le frecce e il conto a destra, sotto una linea che si riempie */
.sfoglia__piede{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
.sfoglia__capitoli{display:flex;flex-wrap:wrap;gap:4px 18px}
.sfoglia__capitoli button{background:none;border:0;padding:6px 0;color:var(--grigio);cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit;transition:color .4s cubic-bezier(.16,1,.3,1)}
.sfoglia__capitoli button[aria-current="true"]{color:var(--nero)}
.sfoglia__capitoli button:hover,.sfoglia__capitoli button:focus-visible{color:var(--arancio)}
.sfoglia__comandi{display:flex;align-items:center;gap:10px}
.sfoglia__conto{min-width:11ch;text-align:center;font-variant-numeric:tabular-nums}
.sfoglia__freccia{display:grid;place-items:center;width:44px;height:44px;background:none;border:1px solid var(--nero);color:var(--nero);cursor:pointer;transition:background .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.sfoglia__freccia--prima svg{transform:scaleX(-1)}
.sfoglia__freccia:disabled{opacity:.28;cursor:default}
.sfoglia__freccia:focus-visible{background:var(--arancio);border-color:var(--arancio)}
@media (hover:hover){.sfoglia__freccia:not(:disabled):hover{background:var(--arancio);border-color:var(--arancio)}}
.sfoglia__linea{position:relative;height:1px;background:var(--linea)}
.sfoglia__pieno{position:absolute;inset:0;background:var(--nero);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.65,.05,.25,1)}

/* a schermo intero: il piano prende tutto, il libro il massimo che ci sta */
.sfoglia:fullscreen{background:var(--pietra);padding:24px var(--gronda);justify-content:center}
.sfoglia:-webkit-full-screen{background:var(--pietra);padding:24px var(--gronda);justify-content:center}
.sfoglia:fullscreen .sfoglia__palco{flex:1;aspect-ratio:auto}
.sfoglia:-webkit-full-screen .sfoglia__palco{flex:1;aspect-ratio:auto}
.sfoglia:fullscreen .sfoglia__libro{width:min(94%,(100vh - 190px) * 1.6)}
.sfoglia:-webkit-full-screen .sfoglia__libro{width:min(94%,(100vh - 190px) * 1.6)}
.sfoglia:fullscreen .sfoglia__testa{border-top:0}

/* sul telefono: una pagina per volta, in fila, col dito (lo scorrimento è del browser, a scatto sulla pagina) */
.sfoglia.una .sfoglia__palco{aspect-ratio:auto;display:block;place-items:normal;padding:28px 0;touch-action:auto}
.sfoglia.una .sfoglia__libro{width:auto;aspect-ratio:auto;perspective:none;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 15%;scrollbar-width:none;transform:none}
.sfoglia.una .sfoglia__libro::-webkit-scrollbar{display:none}
.sfoglia.una .sfoglia__pagina{flex:0 0 70%;aspect-ratio:230/287.5;scroll-snap-align:center;position:relative;background:#EBE6DE;box-shadow:0 18px 30px -14px rgba(53,30,28,.35)}
.sfoglia.una .sfoglia__pagina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sfoglia.una .sfoglia__zona{display:none}
@media (prefers-reduced-motion:reduce){
  .sfoglia__foglio,.sfoglia__libro,.sfoglia__ombra,.sfoglia__pieno{transition:none}
}