/* LA LIGHTBOX — una sola per tutte le pagine progetto (src/lente.js la costruisce).
   Fondo scuro sopra la pagina sfocata (Francesco, 20/10/2026): la pagina resta lì dietro, la foto si vede tutta.
   Un clic fuori dalla foto chiude, e il cursore lo dice («Chiudi»). La foto parte dal suo riquadro nella pagina
   e cresce fino a stare intera nello schermo; chiudendo torna dove sta (anche se nel frattempo si è passati a un'altra). */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
  background:transparent;color:var(--crema);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.lb[open]{display:block}
/* il velo è un nero NEUTRO, ⛔ il nero marrone del sito (Francesco, 21/10/2026). Sta nel ::backdrop, l'unico strato che vede la pagina: un backdrop-filter dentro la dialog la trova nitida.
   --fondo (0→1) lo accende, e lo anima lente.js */
.lb::backdrop{background:oklch(.14 .004 40 / .94);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);opacity:var(--fondo,1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lb::backdrop{background:oklch(.14 .004 40)}}
.lb:focus{outline:none}
html.lb-aperto{overflow:hidden}
.lb__fondo{position:absolute;inset:0}   /* trasparente: è la superficie del clic fuori */

/* la fila delle foto: una per schermo, scorre di lato */
.lb__fila{position:absolute;inset:0;display:flex;will-change:transform}
.lb__foglio{flex:0 0 100%;position:relative;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--barra) + 8px) var(--gronda) calc(var(--barra) + 40px)}
.lb__vista{position:relative;overflow:hidden;background:rgba(245,244,237,.04);transform-origin:50% 50%;will-change:transform}
.lb__vista img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.lb__vista .lb__fine{opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
.lb__vista .lb__fine.pronta{opacity:1}


/* testa e piede: righe mono sottili, come il resto del sito */
.lb__testa,.lb__piede{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;gap:24px;padding:0 var(--gronda)}
.lb__testa{top:0;height:var(--barra);justify-content:space-between}
.lb__piede{bottom:0;height:calc(var(--barra) + 32px);align-items:flex-end;padding-bottom:calc(var(--barra)/2 - 6px)}
.lb__chi{display:flex;gap:16px;align-items:baseline;min-width:0}
.lb__titolo{opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb__conto{display:inline-flex;gap:.5em;font-variant-numeric:tabular-nums}
.lb__giro{display:inline-grid;overflow:hidden;height:1.2em;line-height:1.2em;vertical-align:top}
.lb__giro>span{grid-area:1/1}
.lb__di{opacity:.55}
.lb__nota{flex:1 1 0;min-width:0;opacity:.75;text-transform:none;letter-spacing:0;font-family:var(--sans,inherit);font-size:14px;line-height:1.4;max-width:46ch}

/* le tacche: una per foto, quella accesa è arancio e più lunga. Si cliccano */
.lb__tacche{flex:0 1 auto;display:flex;align-items:flex-end;height:20px;gap:0}
.lb__tacca{position:relative;width:14px;height:20px;padding:0;border:0;background:none;cursor:pointer}
.lb__tacca::after{content:"";position:absolute;left:6px;bottom:4px;width:1px;height:8px;background:currentColor;opacity:.35;
  transform-origin:50% 100%;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1),background-color .6s cubic-bezier(.16,1,.3,1)}
.lb__tacca.accesa::after{opacity:1;background:var(--arancio);transform:scaleY(2)}
@media (hover:hover){.lb__tacca:hover::after{opacity:1}}

.lb__passi{display:flex;gap:4px;margin-left:auto}
.lb__passo,.lb__chiudi,.lb__suono{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 10px;border:0;background:none;color:inherit;
  font:inherit;cursor:pointer;transition:color .4s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1)}
.lb__chiudi{margin-right:-10px}
/* l'interruttore del suono: tre barre in piedi = acceso, a terra = spento */
.lb__azioni{display:flex;align-items:center;gap:8px}
.lb__suono{opacity:.55}
.lb__suono:not(.spento){opacity:1}
.lb__onde{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.lb__onde i{display:block;width:1px;height:10px;background:currentColor;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.lb__onde i:nth-child(1){transform:scaleY(.5)}
.lb__onde i:nth-child(3){transform:scaleY(.7)}
.lb__suono.spento .lb__onde i{transform:scaleY(.1)}
.lb__passo:last-child{margin-right:-10px}
.lb__passo[disabled]{opacity:.25;cursor:default}
@media (hover:hover){.lb__passo:not([disabled]):hover,.lb__chiudi:hover,.lb__suono:hover{color:var(--arancio)}}
.lb__passo:focus-visible,.lb__chiudi:focus-visible,.lb__suono:focus-visible,.lb__tacca:focus-visible{outline:1px solid var(--arancio);outline-offset:2px}
.lb__passo--prima svg{transform:scaleX(-1)}
.lb__x{position:relative;width:12px;height:12px}
.lb__x::before,.lb__x::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.lb__x::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* sul telefono: niente tacche se sono tante, la nota sopra la riga dei comandi */
@media (max-width:43.75em){
  .lb__foglio{padding:calc(var(--barra) + 4px) 12px calc(var(--barra) + 64px)}
  .lb__piede{flex-wrap:wrap;row-gap:4px;height:auto;padding-bottom:12px}
  .lb__nota{flex:1 0 100%;font-size:13px}
  .lb__tacche{display:none}
  .lb__titolo{display:none}
}