/* La collana: copertine fatte della materia dell’opera, una sopra l’altra. Titolo inciso (WebGL), tavola applicata. */

/* Foto con segnaposto sfocato e dissolvenza (comune a tutte le scene) */
.foto {
  position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar);
  background-color: var(--medio, #8a7a66);
}
.foto::before {
  content: ""; position: absolute; inset: -12px; background: var(--lqip) center / cover no-repeat;
  filter: blur(14px); transform: scale(1.04);
}
.foto img {
  position: relative; width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco, 50% 50%);
  opacity: 0; transition: opacity .8s var(--morbido);
}
.foto.pronta img { opacity: 1; }
.foto-dettaglio { width: min(100%, var(--w)); }
.foto-dettaglio img { position: absolute; left: var(--ix); top: var(--iy); width: var(--iw); height: auto; max-width: none; }

/* Tavola applicata: carta da stampa incollata in alto, l’ombra segue la luce */
.tavola-carta {
  display: block; padding: clamp(7px, .75vw, 11px); background: var(--carta-tavola);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 .5px 1px rgba(28, 27, 34, .3),
    0 1px 3px rgba(28, 27, 34, .14),
    var(--ox, 3px) var(--oy, 8px) 20px -6px rgba(28, 27, 34, .44);
}

/* L’ombra del piede che sale sull’ultima copertina: la porta la collana, non il piede, così cambiando scena
   il piede non «compare» nello schermo (niente spostamento di layout) */
#scena-collana:not(:empty)::after {
  content: ""; display: block; position: relative; z-index: 11; height: 40px; margin-bottom: -40px; pointer-events: none;
  box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, .34);
}

/* ---------- Copertina ---------- */
.copertina {
  position: sticky; top: 0; z-index: var(--z, 1);
  height: 100svh; min-height: 600px; overflow: hidden;
  background-color: var(--tela);
  color: var(--inchiostro);
  box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, .34);
}
.copertina:first-of-type { box-shadow: none; }
.copertina[data-tono="chiaro"] { color: var(--chiaro); }
/* la materia compare quando è disegnata: prima si vede il colore pieno della calce, mai un fotogramma nero */
.copertina .tela {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; transition: opacity .9s var(--morbido);
}
.copertina .tela.disegnata { opacity: 1; }
.copertina .alone { display: none; }

.copertina-gabbia {
  position: relative; height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "numero tavola" "testo tavola" "marchio apri";
  column-gap: 6vw;
  padding: calc(var(--testata-h) + 4.5vh) 6.5vw max(5vh, 2rem) max(6.5vw, env(safe-area-inset-left));
}
.copertina-numero {
  grid-area: numero; font-family: var(--f-lap); font-size: .84rem; letter-spacing: .42em; text-transform: uppercase;
  font-variant-numeric: lining-nums;
}
.copertina-testo { grid-area: testo; align-self: center; padding-bottom: 2vh; }
.copertina-titolo-box { container-type: inline-size; }
.copertina-titolo {
  font-family: var(--f-lap); text-transform: uppercase; letter-spacing: .1em; line-height: 1.06;
  font-size: min(calc(100cqi / var(--em)), 9.4rem);
  color: transparent; margin: 0 0 .5em -.05em;
}
.copertina-titolo .riga { margin-right: -.1em; }
.copertina-titolo::selection, .copertina-titolo .riga::selection { color: var(--inchiostro); }
.copertina-riga p { font-style: italic; font-size: clamp(1.15rem, 1.45vw, 1.45rem); line-height: 1.42; max-width: 31ch; }
.copertina-riga footer { margin-top: .8rem; line-height: 1.5; }
.copertina-riga .autore { display: block; font-family: var(--f-lap); font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; }
.copertina-riga cite { display: block; font-size: .98rem; margin-top: .15rem; }
.copertina-tavola { grid-area: tavola; align-self: center; justify-self: end; display: block; margin-top: 2vh; cursor: pointer; text-decoration: none; }
/* la tavola ha sempre lo stesso peso: verticale alta quanto la pagina consente, orizzontale larga un terzo */
.copertina-tavola .foto { width: min(34vw, var(--max-w), calc(min(64svh, 620px, var(--max-h)) * var(--rapporto))); }
/* il credito della foto, sulla carta della tavola: largo quanto la foto, mai di più */
.copertina-credito {
  display: block; width: 0; min-width: 100%; margin-top: .45rem;
  font-family: var(--f-testo); font-size: .8rem; line-height: 1.3; color: var(--inchiostro); text-align: left;
}
.copertina-marchio {
  grid-area: marchio; align-self: end; display: flex; align-items: center; gap: .9rem;
  font-family: var(--f-lap); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase;
}
.copertina-marchio .marca { font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.copertina-apri {
  grid-area: apri; align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--f-lap); font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none;
  padding: .4rem 0; min-height: 44px;
}
.copertina-apri::after {
  content: ""; width: 3.2rem; height: 1px; background: currentColor; transform-origin: left;
  transition: transform .5s var(--morbido);
}
.copertina-apri:hover::after, .copertina-apri:focus-visible::after, .copertina-apri:active::after { transform: scaleX(1.45); }
.copertina-tavola:hover + .copertina-marchio + .copertina-apri::after { transform: scaleX(1.45); }
.copertina-tavola:active .tavola-carta { transform: translateY(1px); }

/* Entrata: il testo stampato appare con la materia */
.copertina-numero, .copertina-riga, .copertina-marchio, .copertina-apri { transition: opacity .9s var(--morbido) .15s; }
html:not(.titoli-pronti) .copertina-numero, html:not(.titoli-pronti) .copertina-riga,
html:not(.titoli-pronti) .copertina-marchio, html:not(.titoli-pronti) .copertina-apri { opacity: 0; }

/* Senza WebGL: materia disegnata una volta, titolo in rilievo con le ombre del testo, alone che segue il puntatore */
.copertina.senza-gl { background-image: var(--tessuto), var(--grana); background-size: var(--tessuto-lato), 240px 240px; }
.copertina.senza-gl .tela { display: none; }
.copertina.senza-gl .copertina-titolo {
  color: color-mix(in srgb, var(--tela) 84%, #1C1B22);
  text-shadow: 0 -1px 0 rgba(28, 27, 34, .3), 0 1px 0 rgba(255, 252, 244, .32);
}
.copertina.senza-gl .alone {
  display: block; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--lx, 30%) var(--ly, 30%), rgba(255, 246, 226, calc(.55 * var(--lf, .5))), transparent 38%);
}

@media (max-width: 899px) {
  .copertina { min-height: 560px; }
  .copertina-gabbia {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "numero numero" "tavola tavola" "testo testo" "marchio apri";
    column-gap: 1rem;
    padding: calc(var(--testata-h) + 2.2svh) 1.5rem max(1rem, env(safe-area-inset-bottom)) 1.5rem;
    text-align: center;
  }
  .copertina-numero { justify-self: center; font-size: .75rem; }
  .copertina-tavola { justify-self: center; margin: 2.2svh 0 2.6svh; }
  .copertina-tavola .foto { width: min(calc(100vw - 3rem - 22px), var(--max-w), calc(min(31svh, 330px, var(--max-h)) * var(--rapporto))); }
  .copertina-credito { font-size: .75rem; margin-top: .35rem; }
  .copertina-testo { align-self: start; padding: 0; }
  .copertina-titolo { font-size: min(calc(100cqi / var(--em)), 4.3rem); margin: 0 auto .45em; }
  .copertina-riga p { font-size: 1.04rem; margin: 0 auto; max-width: 30ch; }
  .copertina-riga footer { margin-top: .5rem; }
  .copertina-riga .autore { font-size: .75rem; letter-spacing: .2em; }
  .copertina-riga cite { font-size: .92rem; }
  .copertina-marchio { font-size: .75rem; letter-spacing: .22em; justify-self: start; gap: .6rem; }
  .copertina-marchio .marca { font-size: .95rem; }
  .copertina-apri { font-size: .75rem; letter-spacing: .2em; gap: .7rem; }
  .copertina-apri::after { width: 1.8rem; }
}
/* sul telefono il marchio della testata basta: in fondo alla copertina resta il bollo, accanto all’invito */
@media (max-width: 599px) {
  .copertina-marchio > span:last-child { display: none; }
}
/* telefoni bassi (fino a 760 px): tavola e margini più stretti, così la citazione non arriva sull’invito in fondo */
@media (max-width: 899px) and (max-height: 760px) {
  .copertina-tavola { margin: 1.4svh 0 1.6svh; }
  .copertina-tavola .foto { width: min(calc(100vw - 3rem - 22px), var(--max-w), calc((min(24svh, var(--max-h)) - 1.75rem) * var(--rapporto))); }
  .copertina-riga p { font-size: .98rem; }
}

/* Schermo basso (telefono in orizzontale): le copertine scorrono come pagine intere, impaginate in due colonne */
@media (max-height: 560px) {
  .copertina { position: relative; height: auto; min-height: 100svh; }
}
@media (max-width: 899px) and (max-height: 560px) {
  .copertina-gabbia {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "numero tavola" "testo tavola" "marchio apri";
    column-gap: 5vw; text-align: left;
    padding: calc(var(--testata-h) + .9rem) max(5vw, env(safe-area-inset-right)) 1rem max(5vw, env(safe-area-inset-left));
  }
  .copertina-numero { justify-self: start; }
  .copertina-tavola { justify-self: end; align-self: center; margin: .4rem 0; }
  .copertina-tavola .foto { width: min(34vw, var(--max-w), calc(min(66svh, var(--max-h)) * var(--rapporto))); }
  .copertina-testo { align-self: center; padding: .6rem 0; }
  .copertina-titolo { font-size: min(calc(100cqi / var(--em)), 3.6rem); margin: 0 0 .4em -.05em; }
  .copertina-riga p { margin: 0; font-size: .98rem; max-width: 34ch; }
  .copertina-marchio > span:last-child { display: inline; }
}