/* SFOGLIA — il visore nostro delle riviste (VG-431/436): la pelle. Vedi sfoglia.js per il come. */
.sfoglia {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #1a1a1a;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.sfoglia:fullscreen, .sfoglia:-webkit-full-screen { background: #1a1a1a; }
.sfoglia-stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transform-origin: 0 0; will-change: transform;
}
/* Il libro e' piatto (niente preserve-3d): i fogli si ordinano con z-index, la prospettiva arriva lo stesso dal padre.
   Chiuso ai lati (VG-438): con la prospettiva il foglio che gira, a meno di 20 gradi dal piano, e' fino all'1,6% piu'
   largo della pagina ferma sotto e sporge oltre il bordo esterno del libro; vicino all'atterraggio la sporgenza e' una
   riga sottile, chiara se la pagina in arrivo ha il margine chiaro (Luca la vedeva lampeggiare a sinistra). Sopra e
   sotto resta libero: a meta' giro il bordo vicino all'occhio e' piu' alto del libro, ed e' il 3D.
   Il taglio rientra di 1px (VG-439): col taglio sul bordo esatto, sull'iPhone restava una riga di un pixel (il bordo
   della pagina in movimento, disegnato un pixel oltre quello della pagina ferma); rientrando, il bordo visibile e'
   sempre il taglio, a pagina ferma e in movimento. */
.sfoglia-book { position: relative; flex: none; clip-path: inset(-100% 1px); }
.sfoglia-sheet {
  position: absolute; top: 0; left: 50%; width: var(--sfoglia-pw); height: var(--sfoglia-ph);
  transform-origin: left center; transform-style: preserve-3d; will-change: transform;
}
.sfoglia-sheet.sfoglia-hidden { display: none; }
/* Niente ombra di contorno sulle pagine (VG-432): a fine sfogliata cambia l'ordine dei fogli e l'ombra della pagina
   destra si posava sulla sinistra lungo il dorso, un istante dopo il voltapagina. Luca: via del tutto. */
.sfoglia-face {
  position: absolute; inset: 0; overflow: hidden; background: #262626;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.sfoglia-back { transform: rotateY(180deg); }
.sfoglia-face.sfoglia-blank { background: transparent; }
.sfoglia-face.sfoglia-blank::before { display: none; }
.sfoglia-face img {
  display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none; -webkit-user-drag: none;
}
.sfoglia-face.sfoglia-loaded img { opacity: 1; }
/* A immagine caricata la faccia non ha piu' fondo (VG-439): sulle pagine nere, in movimento, il grigio del fondo
   spuntava per un pixel lungo il bordo, piu' chiaro dello sfondo. */
.sfoglia-face.sfoglia-loaded { background: transparent; }
.sfoglia-face.sfoglia-loaded::before { display: none; }
/* attesa dell'immagine: un anello che gira */
.sfoglia-face::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px;
  border: 3px solid rgba(255, 255, 255, 0.16); border-top-color: rgba(255, 255, 255, 0.65);
  border-radius: 50%; animation: sfoglia-spin 0.9s linear infinite;
}
@keyframes sfoglia-spin { to { transform: rotate(360deg); } }
/* ombre: sul foglio che gira (sfoglia-shade, scura verso il dorso) e sulle pagine ferme sotto di lui (sfoglia-cast) */
.sfoglia-shade, .sfoglia-cast { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sfoglia-front .sfoglia-shade, .sfoglia-front .sfoglia-cast { background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%); }
.sfoglia-back .sfoglia-shade, .sfoglia-back .sfoglia-cast { background: linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%); }
/* frecce: come quelle del plugin (VG-253), centrate con translate e dentro la zona sicura */
.sfoglia-arrow {
  position: absolute; top: 50%; translate: 0 -50%; width: 60px; height: 60px; padding: 0; border: 0;
  background: none; color: #fff; cursor: pointer; opacity: 0.9; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); -webkit-tap-highlight-color: transparent;
}
.sfoglia-arrow svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sfoglia-prev { left: max(0px, env(safe-area-inset-left)); }
.sfoglia-next { right: max(0px, env(safe-area-inset-right)); }
.sfoglia-arrow[hidden] { display: none; }
/* bottone fullscreen / «apri a pagina intera»: la stessa faccia di oggi (VG-100) */
.sfoglia-expand {
  position: absolute; right: 14px; bottom: 14px; z-index: 5; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 24px; background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.95);
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sfoglia-expand svg { width: 20px; height: 20px; fill: currentColor; }
.sfoglia-expand[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sfoglia-face img { transition: none; } }