/* arco.css — accompagna arco.js.
   Un solo colore d'accento (--accento), tutto il resto neutro.
   Le foto stanno dentro carte piccole: non devono reggere l'attenzione da sole. */

.arco { --arco-ombra: 0 22px 45px rgba(20,18,16,.22); }

.arco-scena{
  position:relative;
  /* Deve contenere la carta di bordo ingrandita, non quella centrale:
     altezza base × (1 + crescita × posizioni), con un margine. */
  height:clamp(290px, 36vw, 470px);
  cursor:grab; outline:none;
  touch-action:pan-y;
  overflow-x:clip;                /* taglia ai lati, mai sopra e sotto */
  overflow-y:visible;
}
.arco-scena:active{ cursor:grabbing }
.arco-scena:focus-visible{ box-shadow:0 0 0 3px var(--accento,#E8590C); border-radius:14px }

.arco-pista{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  /* Il centro dell'arco sta al centro della scena, spostato indietro del raggio:
     è il punto attorno a cui ruotano tutte le carte. */
  display:grid; place-items:center;
}

.arco-carta{
  position:absolute; margin:0;
  width:var(--arco-larghezza); aspect-ratio:var(--arco-proporzione);
  border-radius:14px; overflow:hidden;
  background:#EDEAE4;
  box-shadow:var(--arco-ombra);
  will-change:transform, opacity;
}
.arco-carta img{
  width:100%; height:100%; object-fit:cover; display:block; user-select:none;
  /* Trattamento uniforme su tutte: dieci foto mediocri trattate uguali
     sembrano un servizio, disomogenee sembrano prese a caso. */
  filter:saturate(.92) contrast(1.04);
}

/* ---------- etichette numerate sotto l'arco ---------- */
.arco-etichette{
  list-style:none; margin:clamp(1.2rem,3vw,2rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.2rem, 5vw, 3.6rem);
}
.arco-etichette li{
  display:grid; gap:.28rem; justify-items:center; text-align:center;
  cursor:pointer; opacity:.45; transition:opacity .25s ease;
}
.arco-etichette li.attiva, .arco-etichette li:hover{ opacity:1 }
.arco-etichette b{
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:var(--accento,#E8590C);
}
.arco-etichette span{ font-size:.88rem; color:var(--testo-tenue,#6B6560) }

@media (max-width:640px){
  .arco-etichette li:not(.attiva){ display:none }   /* su mobile solo la corrente */
}

/* ---------- anteprima ingrandita ---------- */
.arco-carta{ cursor:zoom-in }

.arco-lente{
  border:none; padding:0; background:transparent;
  width:100vw; height:100dvh; max-width:100vw; max-height:100dvh;
  display:none; place-items:center;
  overscroll-behavior:contain;
}
.arco-lente[open]{ display:grid }
.arco-lente::backdrop{
  background:rgba(18,16,14,.86);
  backdrop-filter:blur(7px);
}
.arco-lente img{
  max-width:min(92vw, 1100px); max-height:86dvh;
  width:auto; height:auto; object-fit:contain;
  border-radius:10px; display:block;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  cursor:default;
}
.arco-chiudi{
  position:fixed; top:max(1rem, env(safe-area-inset-top)); right:1rem;
  width:48px; height:48px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); backdrop-filter:blur(8px);
  display:grid; place-items:center; cursor:pointer; z-index:2;
  transition:background .2s ease, transform .2s ease;
}
.arco-chiudi:hover{ background:rgba(255,255,255,.28); transform:scale(1.06) }
.arco-chiudi:focus-visible{ outline:3px solid #fff; outline-offset:3px }
.arco-chiudi svg{ width:22px; height:22px; stroke:#fff; stroke-width:2.2; fill:none; stroke-linecap:round }

@media (prefers-reduced-motion:reduce){
  .arco-carta{ transition:none }
  .arco-lente::backdrop{ backdrop-filter:none }
}