/* Proposta B · il catalogo. Carta avorio, Helvetica bold come dice la guida, cuoio per l'azione,
   bordeaux per l'enfasi. Il libro è il catalogo vero; la cartolina è quella della pagina 2. */
.pb {
  --fondo: var(--avorio); --testo: var(--nero); --tenue: rgba(16, 16, 16, .74); --filo: rgba(16, 16, 16, .18);
  --sipario: var(--bordeaux); --sipario-segno: var(--blush);
  --fondo-testata: var(--avorio); --testo-testata: var(--nero);
  --fondo-piede: var(--bordeaux); --testo-piede: var(--blush);
  --ph: min(calc(100svh - var(--testata) - 7rem), 60vw, 900px);
  --pw: calc(var(--ph) * .7056);
}
.pb .testata { border-bottom: 1px solid var(--filo); }
.pb h1 em, .pb h2 em { font-style: normal; color: var(--bordeaux); }

/* ---------- il libro ---------- */
.b-libro { padding: calc(var(--testata) + clamp(2rem, 5vw, 4rem)) var(--margine) clamp(3rem, 6vw, 5rem); }
.b-libro__testo { max-width: 34rem; display: grid; gap: 1.4rem; justify-items: start; margin-bottom: 3rem; }
.b-libro__testo h1 { font-size: var(--t-4); letter-spacing: -.035em; }
.b-libro__testo p { font-size: var(--t-1); color: var(--tenue); }
.b-pagine { display: grid; gap: 1.25rem; }
.b-pag { display: grid; grid-template-columns: 1fr 1fr; background: #fff; box-shadow: 0 20px 50px -30px rgba(16, 16, 16, .45); }
.b-pag--copertina { grid-template-columns: 1fr; max-width: 50%; }
.b-pag img { width: 100%; }
.b-fine { margin-top: 1.25rem; padding: 2rem; background: var(--bordeaux); color: var(--blush); display: grid; gap: 1.2rem; justify-items: start;
  --azione: var(--blush); --azione-testo: var(--bordeaux); --azione-hover: var(--avorio); }
.b-fine__testo { font-weight: 700; font-size: var(--t-2); line-height: 1.1; letter-spacing: -.02em; }
.b-libro__segno { display: none; }

/* con il movimento: il libro in 3D, agganciato mentre scorri */
.moto-attivo .b-libro { padding: 0; height: var(--pista, 600svh); }
.moto-attivo .b-libro__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.moto-attivo .b-libro__testo { position: absolute; z-index: 2; left: var(--margine); top: 50%; translate: 0 -50%; margin: 0;
  width: min(34rem, calc(50vw - var(--margine) - 3rem)); will-change: opacity, transform; }
/* le pagine restano nel documento per chi usa un lettore di schermo; il libro 3D è solo da vedere */
.moto-attivo .b-pagine { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.moto-attivo .b-libro__libro { position: absolute; left: 50%; top: calc(50% + var(--testata) / 2); width: calc(var(--pw) * 2); height: var(--ph);
  translate: -50% -50%; perspective: 2600px; perspective-origin: 50% 40%; }
.b-libro__libro::before { content: ''; position: absolute; left: 50%; top: 2%; bottom: -3%; width: 60%; translate: -50% 0; z-index: -1;
  background: radial-gradient(closest-side, rgba(16, 16, 16, .22), transparent); filter: blur(18px); opacity: 0; }
.moto-attivo .b-libro__libro::before { opacity: 1; }
.b-foglio { position: absolute; left: 50%; top: 0; width: var(--pw); height: var(--ph); transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.b-faccia { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; overflow: hidden; }
.b-faccia img { width: 100%; height: 100%; object-fit: cover; }
.b-faccia--retro { transform: rotateY(180deg); }
/* la luce sulla pagina che gira: più scura a metà del giro */
.b-faccia::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--luce, 0);
  background: linear-gradient(90deg, rgba(16, 16, 16, .28), rgba(16, 16, 16, 0) 38%); }
.b-faccia--retro::after { background: linear-gradient(270deg, rgba(16, 16, 16, .28), rgba(16, 16, 16, 0) 38%); }
/* la piega al centro, sulle pagine ferme */
.b-faccia--fronte::before, .b-faccia--retro::before { content: ''; position: absolute; top: 0; bottom: 0; width: 7%; z-index: 1; pointer-events: none; }
.b-faccia--fronte::before { left: 0; background: linear-gradient(90deg, rgba(16, 16, 16, .16), transparent); }
.b-faccia--retro::before { right: 0; background: linear-gradient(270deg, rgba(16, 16, 16, .16), transparent); }
.b-faccia--testo { display: grid; align-content: center; justify-items: start; gap: 1.2rem; padding: 12%; background: var(--avorio); }
.b-faccia--testo p { font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.6rem); line-height: 1.15; }
.b-scritta { width: 100%; aspect-ratio: 732 / 530; background: var(--bordeaux);
  -webkit-mask: url(../media/brand/cartolina-scritta.png) center / contain no-repeat; mask: url(../media/brand/cartolina-scritta.png) center / contain no-repeat; }
.moto-attivo .b-fine { position: absolute; left: 50%; top: 0; width: var(--pw); height: var(--ph); margin: 0; padding: 12% 10%; align-content: center; }
.moto-attivo .b-fine__testo { font-size: clamp(1.2rem, 2vw, 2rem); }
.moto-attivo .b-libro__segno { display: block; position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0; white-space: nowrap; font-size: var(--t--1); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }

@media (max-width: 900px) {
  .pb { --ph: min(52svh, calc((100vw - 2 * var(--margine)) * 1.35)); }
  .b-pag--copertina { max-width: none; }
  .moto-attivo .b-libro__palco { display: grid; grid-template-rows: auto 1fr; padding: calc(var(--testata) + 1rem) var(--margine) 2.5rem; }
  .moto-attivo .b-libro__testo { position: static; translate: none; width: auto; gap: .8rem; }
  .moto-attivo .b-libro__testo h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .moto-attivo .b-libro__testo p { font-size: var(--t-0); }
  .moto-attivo .b-libro__testo .btn { display: none; }
  .moto-attivo .b-libro__libro { position: relative; left: auto; top: auto; translate: none; width: var(--pw); margin: 1rem auto 0; }
  .moto-attivo .b-foglio, .moto-attivo .b-fine { left: 0; }
  .moto-attivo .b-libro__segno { bottom: .8rem; }
}

/* ---------- la cartolina ---------- */
.b-cartolina { min-height: 100svh; padding: clamp(2.5rem, 6vw, 5rem) var(--margine); display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 6vw, 6rem); align-items: center; background: var(--avorio-2); }
.b-cartolina__testo h2 { font-size: var(--t-4); margin-bottom: 1.2rem; }
.b-cartolina__testo p { font-size: var(--t-1); color: var(--tenue); }
.b-cartolina__scena { perspective: 1800px; }
.b-cartolina__carta { width: min(470px, 86vw); display: grid; gap: 1.5rem; }
.moto-attivo .b-cartolina__carta { width: min(470px, 86vw, calc((100svh - 5rem) * .64)); }
.b-cartolina__fronte, .b-cartolina__retro { background: #fff; box-shadow: 0 30px 60px -30px rgba(16, 16, 16, .5); }
.b-cartolina__fronte { padding: 14px 14px 0; }
.b-cartolina__fronte img { width: 100%; aspect-ratio: 4160 / 5750; object-fit: cover; }
.b-cartolina__saluti { padding: .7rem 0 .9rem; font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase; }
.b-cartolina__retro { position: relative; padding: 1.5rem 1.5rem 1.25rem; background: #fff; display: grid; gap: 1rem; align-content: start; }
.b-cartolina__scritta { width: 62%; aspect-ratio: 732 / 530; background: var(--nero);
  -webkit-mask: url(../media/brand/cartolina-scritta.png) left center / contain no-repeat; mask: url(../media/brand/cartolina-scritta.png) left center / contain no-repeat; }
.b-cartolina__francobollo { position: absolute; top: 1.25rem; right: 1.25rem; width: 78px; height: 92px; display: grid; place-items: center;
  border: 2px dotted var(--fumo); outline: 4px solid #fff; outline-offset: -6px; background: var(--blush); color: var(--bordeaux); }
.b-cartolina__francobollo .logo { width: 62px; }
.b-cartolina__righe { display: grid; gap: .55rem; }
.b-cartolina__righe label { display: grid; gap: .1rem; font-size: var(--t--1); font-weight: 600; color: var(--tenue); }
.b-cartolina__righe input { min-height: 44px; border: 0; border-bottom: 1px solid var(--fumo); background: transparent; padding: .3rem 0; font-size: 1rem; color: var(--nero); }
.b-cartolina__righe input:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; border-bottom-color: var(--bordeaux); }
.b-cartolina__righe .btn { justify-self: start; margin-top: .5rem; }
.b-cartolina__nota { font-size: .8rem; color: var(--tenue); }
.b-cartolina__nota a { display: inline-flex; align-items: center; min-height: 44px; }
.b-cartolina__ok { font-weight: 700; color: var(--bordeaux); }

.moto-attivo .b-cartolina__carta { display: block; position: relative; aspect-ratio: .64; transform-style: preserve-3d; }
.moto-attivo .b-cartolina__fronte, .moto-attivo .b-cartolina__retro { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.moto-attivo .b-cartolina__fronte { display: grid; grid-template-rows: 1fr auto; }
.moto-attivo .b-cartolina__fronte img { height: 100%; aspect-ratio: auto; }
.moto-attivo .b-cartolina__retro { transform: rotateY(180deg); }
@media (max-width: 900px) {
  .b-cartolina { grid-template-columns: 1fr; justify-items: center; }
  .b-cartolina__testo { justify-self: stretch; }
  .moto-attivo .b-cartolina__carta { aspect-ratio: .6; }
  .b-cartolina__retro { padding: 1.1rem 1.1rem 1rem; gap: .6rem; }
  .b-cartolina__francobollo { width: 62px; height: 74px; top: 1rem; right: 1rem; }
  .b-cartolina__francobollo .logo { width: 48px; }
}