/* ==========================================================
   site.css — piccoli stili aggiunti nella conversione a HTML
   ========================================================== */

/* Animazione di comparsa allo scroll (sostituisce framer-motion).
   Gli elementi con class="reveal" partono trasparenti e compaiono
   quando entrano nello schermo. */
.reveal{opacity:0;transform:translateY(24px);
        transition:opacity .8s cubic-bezier(.22,1,.36,1),
                   transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}

/* Se il visitatore ha disattivato le animazioni, mostra tutto subito */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Rete di sicurezza: se il JavaScript non parte, il contenuto
   deve restare visibile lo stesso. */
.no-js .reveal{opacity:1;transform:none}

/* Pannello del menu su mobile */
#menu-mobile{display:none;margin:.5rem auto 0;max-width:80rem;
             border-radius:1.5rem;padding:1.5rem;
             flex-direction:column;gap:1rem}
#menu-mobile.aperto{display:flex}
#menu-mobile a{font-size:1rem;font-weight:500;color:var(--ink,#111);
               text-decoration:none}
@media (min-width:768px){#menu-mobile{display:none !important}}

/* ==========================================================
   Comportamenti ricostruiti dopo la rimozione di React
   ========================================================== */

/* --- 1. Schede del team: bio che si apre al clic --------- */
.bio-pannello{max-height:0;opacity:0;overflow:hidden;
              transition:max-height .35s cubic-bezier(.22,1,.36,1),
                         opacity .3s ease}
[data-scheda-team].aperta .bio-pannello{max-height:900px;opacity:1}
/* il "+" ruota diventando "x" */
[data-scheda-team] .lucide-plus{transition:transform .25s ease}
[data-scheda-team].aperta .lucide-plus{transform:rotate(45deg)}
/* la scheda si solleva al passaggio del mouse */
[data-scheda-team]{transition:transform .3s cubic-bezier(.22,1,.36,1),
                              box-shadow .3s ease}
[data-scheda-team]:hover{transform:translateY(-3px)}

/* --- 2. Schede investors e collaborations ---------------- */
.scheda-hover{transition:transform .3s cubic-bezier(.22,1,.36,1),
                         border-color .3s ease}
.scheda-hover:hover{transform:translateY(-4px)}
/* la lineetta che si allunga in basso a sinistra */
.scheda-hover:hover::after{width:33.3333%}
/* la freccetta "Visit site" che scatta in diagonale */
.scheda-hover:hover .lucide-arrow-up-right{transform:translate(2px,-2px)}
.scheda-hover .lucide-arrow-up-right{transition:transform .3s ease}

/* --- 3. Popup (Indaco) ---------------------------------- */
.modale{display:none;position:fixed;inset:0;z-index:100;
        align-items:center;justify-content:center;padding:1rem}
.modale.aperta{display:flex}
.modale-sfondo{position:absolute;inset:0;background:rgba(15,20,30,.55);
               backdrop-filter:blur(3px)}
.modale-riquadro{position:relative;background:var(--card,#fff);
                 border-radius:1.5rem;padding:2rem;
                 width:100%;max-width:42rem;max-height:85vh;overflow-y:auto;
                 box-shadow:0 24px 60px rgba(15,20,30,.25);
                 animation:modale-entra .25s cubic-bezier(.22,1,.36,1)}
@keyframes modale-entra{from{opacity:0;transform:translateY(12px) scale(.98)}
                        to{opacity:1;transform:none}}
.modale-chiudi{position:absolute;top:1rem;right:1.25rem;
               font-size:1.75rem;line-height:1;background:none;border:0;
               cursor:pointer;color:var(--ink,#111);opacity:.5}
.modale-chiudi:hover{opacity:1}
body.modale-attiva{overflow:hidden}