/* Vetrina interattiva della home: elenco di quattro voci a sinistra,
   l'immagine della voce attiva a destra. Valori dalla spec sec9-vetrina. */

.vetrina{
  height:756px;
  padding-left:13%;   /* 187.195px a 1440 */
  padding-right:8.5%; /* 122.398px a 1440 */
}

/* l'elenco e' anche il riferimento delle immagini, che occupano la meta' destra */
.vetrina__elenco{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.vetrina__voce{max-width:47%}

/* nell'originale erano <a href="#">: link senza destinazione. Qui sono bottoni:
   raggiungibili col Tab, attivabili col tocco, e non portano da nessuna parte. */
.vetrina__titolo{
  display:inline-block;
  position:relative;
  z-index:2;
  margin:18px 0;
  padding:0 6px 5px;
  font-family:var(--display);
  font-size:46px;
  font-weight:400;
  line-height:59.8px;
  letter-spacing:-1.38px;
  color:var(--nero);
  text-align:left;
}

.vetrina__etichetta{
  display:block;
  position:relative;
  line-height:1;
}

/* la sottolineatura cresce da sinistra: e' l'unico segno della voce attiva */
.vetrina__etichetta::after{
  content:"";
  position:absolute;
  left:0;
  top:calc(100% - 1px);
  width:100%;
  height:1px;
  background:var(--nero);
  /* si allunga con scaleX, non con width: animare la larghezza fa ricalcolare
     il layout a ogni fotogramma. Il segno e' una barra piena, quindi scalarla
     e' indistinguibile dal farla crescere. */
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.vetrina__titolo[aria-current="true"] .vetrina__etichetta::after,
.vetrina__titolo:hover .vetrina__etichetta::after,
.vetrina__titolo:focus-visible .vetrina__etichetta::after{transform:scaleX(1)}

.vetrina__scheda{
  position:absolute;
  top:0;
  right:0;
  width:53%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  padding:40px;
  clip-path:inset(0 0 0 100%);
}
/* le schede non attive portano l'attributo hidden: senza questa riga il
   display:flex qui sopra vincerebbe sullo stile del browser e resterebbero a video */
.vetrina__scheda[hidden]{display:none}

.vetrina__scheda img{
  width:100%;
  height:auto;
  box-shadow:3px 3px 16px 2px rgba(0,0,0,.04);
}

/* il cambio immagine e' una tendina: la nuova entra da sinistra mentre la
   vecchia se ne va verso destra. Stessa durata e curva dell'originale.

   Lo stato di riposo e' scoperto: la scheda attiva si vede anche se
   l'animazione non gira. Senza questo, la foto restava invisibile ogni volta
   che l'animazione non arrivava in fondo — al primo caricamento, dopo un
   ridimensionamento, o in cattura. Una foto non puo' dipendere da
   un'animazione per esistere. */
/* stato di riposo: scoperta. Nessuna animazione, cosi' la foto si vede sempre. */
.vetrina__scheda--attiva{clip-path:inset(0 0 0 0)}

/* la tendina la mette il JS solo quando si cambia voce: e' un ornamento del
   passaggio, non la condizione perche' l'immagine esista. */
.vetrina__scheda--entra{animation:vetrina-entra .8s forwards cubic-bezier(.4,0,.2,1)}
.vetrina__scheda--uscita{animation:vetrina-esce .8s forwards cubic-bezier(.4,0,.2,1)}

@keyframes vetrina-entra{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes vetrina-esce{
  from{clip-path:inset(0 0 0 0)}
  to{clip-path:inset(0 0 0 100%)}
}

/* chi ha chiesto meno animazioni vede il cambio secco, senza tendina */
@media (prefers-reduced-motion:reduce){
  .vetrina__scheda--entra,
  .vetrina__scheda--uscita{animation:none}
}

/* --------------------------------------------------------------- schermi stretti */
@media (max-width:1024px){
  .vetrina{height:80vh}
  .vetrina__titolo{margin:13px 0}
}

@media (max-width:768px){
  /* niente hover: l'elenco si incolonna e ogni voce si porta dietro la sua immagine */
  .vetrina{height:auto;padding:40px 20px}
  .vetrina__elenco{display:block;height:auto}
  .vetrina__voce{max-width:none}
  .vetrina__titolo{font-size:40px;margin:10px 0}
  .vetrina__etichetta::after{width:100%}
  .vetrina__scheda,
  .vetrina__scheda--attiva,
  .vetrina__scheda--uscita{
    position:static;
    width:100%;
    height:auto;
    padding:0;
    margin-top:30px;
    clip-path:none;
    animation:none;
  }
  /* qui le immagini si vedono tutte, anche quelle rimaste con hidden a JS spento */
  .vetrina__scheda[hidden]{display:flex}
}