/* Indice laterale: copiato dal Palazzo (palazzo-online/public-palazzo/css/indice.css), rem convertiti in px */
/* Indice della pagina (27/09, da prova-indice.css forma 3, rifatto dopo il debugging).
   La fascia sotto la copertina è l'indice; scendendo le voci volano sul bordo sinistro (il volo segue lo scroll,
   js/indice.js) e diventano quattro tratti lunghi quanto la loro parte. Etichette solo testo, senza riquadro. */

/* --- l'indice orizzontale ---------------------------------------------------------------------- */
.ix { padding: 34px 0 32px; border-bottom: 1px solid rgba(46,40,33,.15); background: var(--calce); }
.ix ol { display: flex; justify-content: center; gap: clamp(24px, 5vw, 70px); flex-wrap: wrap; }
.ix a { position: relative; display: inline-block; padding: 6px 0; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ombra); }
.ix a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.ix a:hover::after { transform: scaleX(1); }
/* nel momento in cui parte il volo le parole passano alle voci che volano, nello stesso punto: nessuna dissolvenza */
.ix.is-gone ol { visibility: hidden; }

/* --- i tratti sul bordo ------------------------------------------------------------------------ */
.ixs { position: fixed; left: 8px; top: 50%; z-index: 40; translate: 0 -50%; color: var(--ombra); pointer-events: none; transition: color .35s ease-out; }
/* il colore segue cosa c'è sotto (js/indice.js): Ombra sui fondi chiari, bianco sui fondi scuri e sulle foto */
.ixs__i { transition: color .35s ease-out; }
.ixs__i.tone-dark, .ixs__i.tone-photo { color: #fff; } /* tratto per tratto (js/indice.js, readTone) */
.ixs__i.tone-photo .ixs__t { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)); }
.ixs.is-on { pointer-events: auto; }
/* zona di aggancio del mouse più larga (Divan, 27/09): la barra parte dal bordo della finestra e ha un margine
   invisibile di 7 rem a destra e 4 rem sopra e sotto; i tratti restano esattamente dove sono (8 px dal bordo) */
@media (hover: hover) and (pointer: fine) {
  .ixs { left: 0; padding: 40px 70px 40px 8px; }
}
.ixs ol { display: flex; flex-direction: column; gap: 10px; }
.ixs__i { opacity: 0; }
.ixs.is-on .ixs__i { opacity: 1; }
.ixs a { color: inherit; display: flex; align-items: stretch; padding: 0 14px 0 0; }
.ixs__t { position: relative; display: block; width: 2px; height: var(--len, 40px); background: color-mix(in srgb, currentColor 30%, transparent); transition: background-color .35s ease-out; }
.ixs__t::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fill, 0) * 100%); background: currentColor; }
.ixs__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* solo per i lettori di schermo */

/* --- le voci: in volo color Ombra; ferme sul bordo, col mouse, in bianco con inversione come i tratti --- */
.ixs-tip { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
.ixs-tip li { position: fixed; left: 0; top: 0; transform-origin: 0 50%; opacity: 0; }
.ixs-tip a { display: inline-block; padding: 6px 0; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--ombra); }
.ixs-tip.is-docked li.tone-dark a, .ixs-tip.is-docked li.tone-photo a { color: #fff; }
.ixs-tip.is-docked li.tone-photo a { text-shadow: 0 0 6px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .6); }
.ixs-tip.is-docked li { translate: -8px 0; transition: opacity .6s ease-out, translate .6s cubic-bezier(.22,1,.36,1); }
.ixs-tip.is-docked.is-open li { opacity: .7; translate: 0 0; pointer-events: auto; transition-delay: calc(var(--k) * 40ms); }
.ixs-tip.is-docked.is-open li.is-active { opacity: 1; }
.ixs-tip.is-docked a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ixs-tip.is-snap li { transition: none !important; }
/* sosta all'arrivo: le voci sono già al loro posto, nessuno scivolamento, e tutte piene come quella attiva */
.ixs-tip.is-docked.is-open.is-linger li { translate: 0 0; opacity: 1; transition-delay: 0s; }

/* come nella pagina del Palazzo (v4): le voci stanno in fondo alla schermata del nome, bianche sopra la foto */
.s-cop__nome .ix { position: absolute; left: 0; right: 0; bottom: 34px; padding: 0; border: 0; background: none; }
.s-cop__nome .ix a { color: #fff; text-shadow: 0 0 12px rgba(0,0,0,.35); font-family: var(--sans); }
.ixs-tip:not(.is-docked) li.is-ondark a { color: #fff; text-shadow: 0 0 12px rgba(0,0,0,.35); }
.ixs-tip a { font-family: var(--sans); }
@media (max-width: 1023px) { .s-cop__nome .ix { position: static; margin-top: 40px; } .s-cop__nome .ix a { color: inherit; text-shadow: none; } }
.ix ol, .ixs ol, .ixs-tip, .ixs-tip li { list-style: none; margin: 0; padding-left: 0; }