/* La galleria sul nodo */
:root {
  --sala: #0E1526;
  --carta: #EEEBE3;
  --tenue: #97A0B6;
  --margine: clamp(18px, 3.2vw, 44px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  background: var(--sala);
}
body {
  color: var(--carta);
  font-family: 'Archivo Variable', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- la sala: una schermata, e la prospettiva */
.sala {
  position: relative;
  height: var(--alto);
  min-height: 480px;
  overflow: hidden;
  perspective: 520px;
  perspective-origin: 50% 50%;
  /* il dito cammina fra le foto invece di scorrere la pagina: la pagina è alta una schermata */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.sala.tira {
  cursor: grabbing;
}
.mondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* le foto stanno nello stesso spazio 3D: il browser le mette in ordine di profondità */
  transform-style: preserve-3d;
  transform: translateZ(0);
}
.velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--sala) 0%, rgba(14, 21, 38, 0.84) 20%, rgba(14, 21, 38, 0) 46%),
    linear-gradient(to bottom, rgba(14, 21, 38, 0.78) 0%, rgba(14, 21, 38, 0) 17%);
}
.quadro {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  border-radius: var(--tondo, 0%);
  background: #1B2336;
  visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.quadro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- le scritte sopra */
.testa,
.didascalia,
.piede {
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  pointer-events: none;
}
.testa {
  top: var(--margine);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.marchio {
  margin: 0;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 3rem);
  font-weight: 820;
  font-stretch: 62%;
  line-height: 0.85;
}
.testa__riga {
  margin: 0;
  font-size: clamp(0.84rem, 0.78rem + 0.22vw, 1rem);
  font-weight: 600;
  font-stretch: 88%;
  line-height: 1.3;
  text-align: right;
}
.maschera {
  display: block;
  overflow: hidden;
}
.maschera > span {
  display: block;
}

.didascalia {
  bottom: calc(var(--margine) + 76px);
  display: grid;
  gap: 6px;
  max-width: 30rem;
}
.didascalia__nome {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  font-weight: 800;
  font-stretch: 70%;
  line-height: 0.95;
}
.didascalia__nome .maschera {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.didascalia__riga {
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.12rem);
  font-weight: 500;
  line-height: 1.35;
}

.piede {
  bottom: var(--margine);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}
.nota {
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.84rem, 0.8rem + 0.16vw, 0.95rem);
  line-height: 1.4;
}
.percorso {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.percorso__etichetta {
  color: var(--tenue);
  font-size: 0.86rem;
  font-weight: 600;
}
.percorso__nome {
  min-width: 5.2em;
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 80%;
  text-align: center;
}
.tasto {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--carta);
  color: var(--carta);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.16s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.tasto svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .tasto:hover {
    background: var(--carta);
    color: var(--sala);
  }
}
.tasto:active { transform: scale(0.94); }
.tasto:focus-visible {
  outline: 2px solid var(--carta);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  /* sullo schermo stretto un obiettivo più largo, se no la sala sembra un corridoio */
  .sala {
    perspective: 400px;
  }
  .piede {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .didascalia {
    bottom: calc(var(--margine) + 132px);
  }
  .testa__riga {
    max-width: 14em;
  }
}