:root {
  --riquadro-colonne: calc(2 * var(--colonna) + var(--canale));
  --riquadro-l: var(--riquadro-colonne);
  --foto-l: calc(var(--riquadro-l) * var(--riquadro-scala, 1));
  --riquadro-a: min(calc(var(--foto-l) * 310 / 494), calc(33vh * var(--riquadro-scala, 1)));
  --titolo: 6.6vw;
  --sottotitolo: 32px;
  --sottotitolo-riga: 36px;
}

.fondo { position: fixed; inset: 0; z-index: 1; background: var(--nero); }
.fondo__strato, .riquadro__strato {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(50% 50% 50% 50%);
}
.fondo__strato img, .riquadro__strato img {
  width: 100%; height: 100%; object-fit: cover;
}
.fondo__strato img { filter: brightness(0.45); }
.fondo__strato video, .riquadro__strato video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none;
}
.fondo__strato video { filter: brightness(0.45); }
.fondo__strato video.gira, .riquadro__strato video.gira { opacity: 1; }
.fondo::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url("../assets/texture/grana.png") repeat;
  opacity: var(--grana, 0.5); mix-blend-mode: overlay;
  transition: opacity 0.9s var(--curva-tendina);
}
video::-webkit-media-controls-start-playback-button { display: none; }

.riquadro {
  position: fixed; z-index: 4; left: 50%; top: calc(50% - var(--spinta, 0px));
  width: var(--foto-l, var(--riquadro-l)); height: var(--riquadro-a);
  transform: translate(-50%, -50%);
  border-radius: 3px; overflow: hidden; clip-path: inset(0 round 3px);
  cursor: pointer;
}
.riquadro__strato img, .riquadro__strato video { scale: 1.025; }
.riquadro__velo {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.4) 100%);
}
.riquadro__invito {
  position: absolute; z-index: 7; left: 0; top: 0;
  padding: 0.55em 1em; border-radius: 999px;
  background: rgba(28, 31, 28, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  white-space: nowrap; pointer-events: none;
  opacity: 0; scale: 0.6; transition: opacity 0.3s, scale 0.3s var(--curva-titolo);
  translate: var(--invito-x, 50%) var(--invito-y, 50%);
}
@media (hover: hover) and (min-width: 992px) {
  .riquadro:hover .riquadro__invito { opacity: 1; scale: 1; }
}

.tendina { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0 var(--bordo);
  visibility: hidden;
}
.slide.is-attiva, .slide.is-uscente { visibility: visible; }

.slide__nome {
  position: absolute; left: var(--bordo); right: var(--bordo);
  margin: 0; min-width: 0;
  font-size: var(--titolo-calcolato, var(--titolo)); line-height: 1.06; letter-spacing: var(--spazio-titolo); font-weight: 500;
}
.slide__nome--sx { top: 0; display: flex; justify-content: flex-start; }
@media (min-width: 992px) {
  .slide__nome { left: calc(var(--bordo) + var(--colonna) + var(--canale)); right: calc(var(--bordo) + var(--colonna) + var(--canale)); }
}
.slide__nome--dx { bottom: 0; display: flex; justify-content: flex-end; }
.riga { display: block; width: fit-content; overflow: hidden; padding: 0.06em 0.04em 0.08em; margin: -0.06em -0.04em -0.08em; }
.slide__nome .riga { flex: none; }
.riga__testo { display: block; white-space: nowrap; will-change: transform; }

.slide__info {
  position: absolute; left: 50%; translate: -50% 0;
  top: calc(50% - var(--spinta, 0px) - var(--riquadro-a) / 2 - 12px - var(--etichette-a, 16.8px));
  display: grid; grid-template-rows: auto var(--riquadro-a) auto; row-gap: 12px;
  width: var(--riquadro-l);
}
.slide__sopra { grid-row: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; margin: 0; font-weight: 400; }
.slide__sopra .etichetta + .etichetta { margin-left: auto; }
.slide__sotto {
  grid-row: 3; margin: 6px 0 0; text-align: left;
  font-size: var(--sottotitolo); line-height: var(--sottotitolo-riga); letter-spacing: var(--spazio-medio);
}
.slide__piu {
  position: absolute; top: calc(var(--etichette-a, 16.8px) + 12px);
  left: calc(var(--bordo) + 4 * (var(--colonna) + var(--canale)) - (var(--vw) - var(--riquadro-l)) / 2);
  width: calc(2 * var(--colonna) + var(--canale));
}
.slide__estratto {
  margin: 0; font-size: var(--sottotitolo); line-height: var(--sottotitolo-riga); letter-spacing: var(--spazio-medio); font-weight: 400;
}
.slide__estratto .etichetta__testo { white-space: normal; }
.slide__estratto { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.slide__estratto.con-bollino { overflow-x: clip; overflow-y: visible; padding-bottom: 0.8em; }
.bollino-a { --bollino: 1.5; position: relative; white-space: nowrap; padding-right: calc(3.7em * var(--bollino) - 0.25em); }
.bollino {
  position: absolute; right: 0.2em; top: 50%; translate: 0 -30%; rotate: -6deg; z-index: 1;
  padding: 0.16em 0.5em 0.12em; border-radius: 999px;
  background: var(--giallo); color: var(--nero);
  font-size: calc(1em * var(--bollino)); line-height: 1; font-weight: 500; letter-spacing: 0; white-space: nowrap;
}
.slide__approfondisci { margin: 12px 0 0; font-weight: 400; }
.slide__approfondisci button {
  display: inline-flex; align-items: center; pointer-events: auto;
  padding: 0.7em 1.1em; border-radius: 999px; line-height: 1;
  background: var(--giallo); color: var(--nero); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease;
  transform-origin: 0 50%;
}
@media (hover: hover) { .slide__approfondisci button:hover { background: var(--giallo-forte); transform: scale(1.04); } }
.slide__approfondisci button:active { transform: scale(0.97); }
.slide__approfondisci button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.riquadro:focus-visible { outline-offset: -4px; }
.etichetta { display: block; overflow: hidden; color: var(--inchiostro); line-height: 1.2; }
.slide__sotto .etichetta { line-height: inherit; }
.etichetta__testo { display: block; white-space: nowrap; will-change: transform; }

.riquadro { transition: width 0.9s var(--curva-tendina), left 0.9s var(--curva-tendina); }
.ridimensiona .riquadro, .ridimensiona .miniature__binario { transition: none; }
.riquadro.is-persona { width: var(--riquadro-a); left: calc(50% + (var(--foto-l, var(--riquadro-l)) - var(--riquadro-a)) / 2); }
.miniature {
  position: fixed; z-index: 3;
  left: calc(50% - var(--foto-l, var(--riquadro-l)) / 2);
  top: calc(50% - var(--spinta, 0px) - var(--riquadro-a) / 2);
  height: var(--riquadro-a);
  clip-path: inset(0 -200px);
  pointer-events: none;
  --miniatura: calc((var(--riquadro-a) - 24px) / 3);
}
.miniature__binario {
  display: flex; flex-direction: column; gap: 12px;
  transform: translateY(calc(var(--inizio, 0) * -1 * (var(--miniatura) + 12px)));
  transition: transform 0.9s var(--curva-tendina);
}
.miniature__binario.senza-moto, .miniature__binario.senza-moto .miniature__voce { transition: none; }
.miniature__voce {
  display: block; flex: none; width: var(--miniatura); aspect-ratio: 1;
  border-radius: 3px; overflow: hidden;
  opacity: 0; transform: translateX(24px);
  transition: opacity 0.6s, transform 0.9s var(--curva-tendina);
  transition-delay: 0.15s, calc(150ms + var(--indice, 0) * 70ms);
}
.miniature.is-aperta .miniature__voce { opacity: 0.45; transform: none; pointer-events: auto; transition-delay: 0s, calc(150ms + var(--indice, 0) * 70ms); }
.miniature.is-aperta .miniature__voce.is-attiva { opacity: 1; }
@media (hover: hover) { .miniature.is-aperta .miniature__voce:not(.is-attiva):hover { opacity: 0.8; } }
.miniature__voce img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miniature__voce:focus-visible { outline: 1px solid var(--inchiostro); outline-offset: 2px; }
.bassa .miniature { display: none; }

.galleria { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: var(--nero); container-type: size; }
.galleria__binario { display: flex; gap: 12px; height: 100%; will-change: transform; }
.galleria__voce { position: relative; flex: none; height: 100%; aspect-ratio: 1; margin: 0; border-radius: 3px; overflow: hidden; }
.galleria__voce img { display: block; width: 100%; height: 100%; object-fit: cover; scale: none; }
.galleria__voce figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 36px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  color: var(--inchiostro); font-size: 14px; line-height: 1.2; text-align: left;
}
.galleria__voce b { display: block; font-weight: 500; }
.galleria__nome { display: block; font-weight: 400; }
@container (max-height: 150px) { .galleria__nome { display: none; } .galleria__voce figcaption { padding: 24px 8px 6px; } }
.galleria__velo {
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  background: rgba(28, 31, 28, 0.25);
}
.galleria__velo--dx {
  left: 62.75%; left: 100cqh; right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70%); mask-image: linear-gradient(to right, transparent, #000 70%);
}
.galleria__velo--sx {
  left: 0; right: 62.75%; right: 100cqh;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 70%); mask-image: linear-gradient(to left, transparent, #000 70%);
  opacity: 0;
}
.galleria--tutte .galleria__binario { align-items: center; }
.galleria--tutte .galleria__voce { width: var(--voce-l); height: auto; }
.galleria--tutte .galleria__velo { display: none; }

@media (max-width: 991px) {
  :root { --titolo: 75px; --sottotitolo: 20px; --sottotitolo-riga: 24px; --riquadro-colonne: calc(4 * var(--colonna) + 3 * var(--canale)); }
  .slide__piu { top: 100%; left: 0; width: 100%; margin-top: 12px; text-align: left; }
  .slide__estratto { display: none; }
  .slide__approfondisci { margin-top: 0; }
}
.bassa .slide__info { width: min(var(--riquadro-l), calc(var(--vw) - 2 * (var(--bordo) + var(--capitoli-l, 0px) + var(--canale)))); }
.bassa .slide__piu { top: 100%; left: 0; width: 100%; margin-top: 12px; }
.bassa .slide__estratto { display: none; }
.bassa .slide__approfondisci { margin-top: 0; }
@media (max-width: 767px) {
  :root { --titolo: 53px; --riquadro-colonne: calc(var(--vw) - 2 * var(--bordo)); --riquadro-a: calc(var(--foto-l) * 310 / 494); }
  .slide__sotto .etichetta__testo { white-space: normal; }
  .slide__nome--sx { left: calc(var(--bordo) + var(--capitoli-l, 0px) + var(--canale)); justify-content: flex-end; }
  .slide__estratto { display: block; text-box-trim: none; }
  .slide__approfondisci { margin-top: 12px; }
  .bollino-a { --bollino: 1.3; }
  .bollino { rotate: -4deg; translate: 0 -40%; }
  .slide__estratto.con-bollino { padding-bottom: 0.4em; }
  .solo-scopri .slide__estratto { display: none; }
  .solo-scopri .slide__approfondisci { margin-top: 0; }
}