/* ==========================================================================
   moveIn – sezione "Chi siamo": storia, progetto e team.
   Tutte le regole partono da .mi-chi-siamo. Usa le variabili del sito (--lp-*).
   Il colore delle foto (--k: 1 al centro, 0 ai lati) è impostato da assets/js/mi-chi-siamo.js.
   ========================================================================== */

.mi-chi-siamo { --mi-ease: cubic-bezier(.22, .7, .2, 1); overflow: hidden; }

/* Intestazione e storia (due paragrafi) */
.mi-chi-siamo .mi-head { text-align: center; max-width: 900px; margin: 0 auto 36px; }
.mi-chi-siamo .mi-head h2 { text-wrap: balance; }
.mi-chi-siamo .mi-story { margin: 0 auto; max-width: 680px; font-size: 1.08rem; line-height: 1.65; color: var(--lp-muted, #55607a); }
.mi-chi-siamo .mi-story + .mi-story { margin-top: 14px; }
.mi-chi-siamo .mi-story a { color: var(--lp-blue-dark, #2a5191); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.mi-chi-siamo #progetto { scroll-margin-top: 120px; }

/* Team: nastro a tutta larghezza (da bordo a bordo della finestra), sfumato uguale ai due lati.
   Ogni elemento è largo quanto la foto: le foto sono distribuite in modo simmetrico rispetto al centro,
   nome e ruolo stanno a fianco della foto senza occupare spazio e compaiono solo per chi è al centro. */
.mi-chi-siamo .mi-team {
    position: relative; padding: 8px 0 12px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.mi-chi-siamo .mi-team-track { display: flex; gap: 190px; margin: 0; padding: 0; list-style: none; will-change: transform; }

.mi-chi-siamo .mi-member {
    --k: 0;
    position: relative; flex: none; width: 190px; cursor: pointer;
    transform: scale(calc(.84 + .16 * var(--k)));
}
/* foto senza riquadro, come stampate sullo sfondo bianco: bordi e base sfumano nella pagina */
.mi-chi-siamo .mi-member img {
    display: block; width: 190px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%;
    filter: grayscale(calc(1 - var(--k))) brightness(1.025);   /* lo sfondo delle foto (quasi bianco) diventa bianco come la pagina */
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 94%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 94%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-composite: intersect;
}
.mi-chi-siamo .mi-member-txt {
    position: absolute; left: calc(100% + 18px); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; white-space: nowrap;
    opacity: calc(var(--k) * var(--k));
}
.mi-chi-siamo .mi-member-txt strong { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1.1; color: var(--lp-ink, #16213a); }
.mi-chi-siamo .mi-member-txt span {
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    font-size: .85rem; font-weight: 500; letter-spacing: .02em;
    color: var(--lp-blue-dark, #2a5191); background: var(--lp-tint, #f3f6fb);
}

/* Tastiera: il nastro si sposta con le frecce ← → quando ha il focus */
.mi-chi-siamo .mi-team:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: -3px; }

/* Senza JS il nastro si scorre a mano */
.mi-chi-siamo:not(.is-ready) .mi-team { overflow-x: auto; }
.mi-chi-siamo:not(.is-ready) .mi-member { --k: 1; }

/* Telefono: foto più piccole, nome e ruolo sotto la foto */
@media (max-width: 600px) {
    .mi-chi-siamo .mi-head { margin-bottom: 28px; }
    .mi-chi-siamo .mi-team { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); padding-bottom: 72px; }
    .mi-chi-siamo .mi-team-track { gap: 28px; }
    .mi-chi-siamo .mi-member, .mi-chi-siamo .mi-member img { width: 160px; }
    .mi-chi-siamo .mi-member-txt { left: 50%; top: 100%; transform: translate(-50%, 8px); align-items: center; }
    .mi-chi-siamo .mi-member-txt strong { font-size: 1.25rem; }
}