/* ==========================================================================
   Blocchi 14–16 — scena.css + scena.js (nessuna libreria)
   14 Bento: griglia a riquadri di misure diverse           <div class="bento" data-anim="stagger">
   15 Galleria orizzontale: scorre di lato mentre si scende <section class="galleria-o" data-galleria>
   16 Titolo in maschera: la foto dentro le lettere, poi si "entra" nella parola  <section class="maschera" data-maschera>
      (<h2 class="maschera-testo" style="background-image:url(m/foto.webp)">)
   Senza JS o con "riduci movimento": tutto leggibile e statico (galleria = scorrimento orizzontale a dita).
   ========================================================================== */

/* ---------- 14 · Bento ---------- */
.bento {
  --bento-gap: clamp(10px, 1.4vw, 18px); --bento-raggio: var(--radius, 18px); --bento-riga: clamp(150px, 17vw, 230px);
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: var(--bento-riga); gap: var(--bento-gap);
}
.bento > * {
  position: relative; overflow: hidden; border-radius: var(--bento-raggio); grid-column: span 2;
  background: var(--bento-fondo, rgba(127,127,127,.1)); padding: clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;
}
.bento .b-largo { grid-column: span 4; }
.bento .b-alto { grid-row: span 2; }
.bento .b-grande { grid-column: span 4; grid-row: span 2; }
.bento .b-tutto { grid-column: 1 / -1; }
.bento > * > img, .bento > * > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.bento > .b-foto::before { /* velatura per leggere il testo sulla foto */
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 62%);
}
.bento > .b-foto { color: #fff; }
.bento h3 { margin: 0 0 .25em; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.15; }
.bento p { margin: 0; opacity: .85; font-size: .95rem; max-width: 40ch; }
.bento .b-numero { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
@media (hover: hover) { .bento > *:hover > img, .bento > *:hover > video { transform: scale(1.045); } }
@media (max-width: 760px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .bento > *, .bento .b-largo, .bento .b-grande { grid-column: span 2; }
  .bento .b-mezzo { grid-column: span 1; }
  .bento .b-grande { grid-row: span 2; }
}

/* ---------- 15 · Galleria orizzontale ---------- */
.galleria-o { position: relative; }
.galleria-o-testa { padding: 0 clamp(20px, 5vw, 64px); margin-bottom: 24px; }
.galleria-o-traccia {
  list-style: none; margin: 0; padding: 0 clamp(20px, 5vw, 64px) 12px; display: flex; gap: clamp(14px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.galleria-o-traccia > li { flex: 0 0 auto; width: min(78vw, 460px); scroll-snap-align: start; }
.galleria-o figure { margin: 0; }
.galleria-o img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius, 14px); }
.galleria-o figcaption { margin-top: 10px; font-size: .95rem; opacity: .8; }
.galleria-o figcaption b { display: block; font-size: 1.05rem; opacity: 1; }
.galleria-o-barra { display: none; }
/* versione animata (scena.js, schermi larghi, movimento consentito) */
.galleria-o.attiva .galleria-o-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding-top: var(--galleria-testata, 0px); box-sizing: border-box; } /* --galleria-testata = altezza della testata fissa del sito */
.galleria-o.attiva .galleria-o-traccia { overflow: visible; scroll-snap-type: none; will-change: transform; padding-bottom: 0; }
.galleria-o.attiva .galleria-o-traccia > li { width: clamp(300px, 30vw, 460px); }
.galleria-o.attiva .galleria-o-barra {
  display: block; margin: 28px clamp(20px, 5vw, 64px) 0; height: 2px; background: rgba(127,127,127,.25); position: relative;
}
.galleria-o.attiva .galleria-o-barra i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(0); }

/* ---------- 16 · Titolo in maschera ---------- */
.maschera { position: relative; background: var(--maschera-fondo, var(--carta, #f3f1ec)); }
.maschera-pin { position: relative; min-height: 70vh; display: grid; place-items: center; overflow: hidden; }
.maschera-testo {
  margin: 0; padding: 0 .04em; text-align: center; white-space: nowrap; line-height: .85;
  font-size: clamp(3rem, 15vw, 18rem); font-weight: 900; letter-spacing: -.03em; text-transform: uppercase;
  color: var(--maschera-colore, #222);
  background-position: center; background-size: cover; background-repeat: no-repeat; /* immagine: style="background-image:url(...)" sul titolo */
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transform-origin: var(--maschera-origine, 50% 50%); will-change: transform;
}
.maschera-foto { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; pointer-events: none; } /* immagine copiata dal titolo da scena.js */
.maschera-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); }
.maschera-dopo { position: absolute; left: 0; right: 0; bottom: 8vh; text-align: center; color: #fff; opacity: 0; padding: 0 20px;
  text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.maschera.attiva { height: var(--maschera-durata, 260vh); }
.maschera.attiva .maschera-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .maschera-testo { -webkit-text-fill-color: currentColor; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bento > * > img, .bento > * > video { transition: none; }
}