:root {
  --tp: 05s;/* t = tempo di permanenza delle immagini */
  --o:0.5;/* o = opacità */
}

/* Aggiungi o modifica queste regole in style.css */

.ritratti {
    display: flex;
    justify-content: space-around; /* Distribuisce le 3 immagini orizzontalmente */
    align-items: center;
    margin-bottom: 30px;margin-bottom: 1em;
    height: 200px; /* Altezza fissa per mantenere l'uniformità */
    overflow: hidden;
    background-color: #eee;
    border-radius: 8px;
    padding: 10px;    cursor:url("cursor-dx.cur"),auto;
}

.portrait-img {
    max-width: 30%; /* 3 immagini per riga */
    height: 100%;
    object-fit: cover; /* Assicura che l'immagine copra l'area senza distorsioni */
    object-fit: contain;
    border-radius: 5px;
    /* Margin e padding sono gestiti dal gap in .ritratti e max-width qui */
}
.ghost {
/*     */
    cursor:url("cursor-dx.cur"),auto;
    pointer-events: none;
    zcursor: not-allowed;
Xcursor:url(cursor-dx.cur),auto;

}
/* Definizione dell'animazione Fading (IIb) */
@keyframes fadeInOut {
    0%{opacity:0;}
    8%{opacity:calc(1*var(--o));}
   16%{opacity:calc(2*var(--o));}
   33%{opacity:calc(2*var(--o));}
   49%{opacity:1;}
  100%{opacity:1;}
}

.fade-in {
    animation-name: fadeInOut;
    /* La durata dell'animazione è impostata dinamicamente in JS a 3s */
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards;
}