/* --- RESET E BASE --- */
*, *::before, *::after { box-sizing: border-box; }

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* --- PROTEZIONE CONTENUTI --- */
body {
    /* Impedisce di evidenziare il testo in blu */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}

#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: #000; z-index: 9999999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease; pointer-events: none;
}
.loader-content {
    color: white; font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 2px;
    animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.5; } }

img, video {
    /* Impedisce di prendere l'immagine e trascinarla sul desktop */
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none; /* Rende l'immagine "intangibile" al mouse (opzionale) */
}

/* ECCEZIONE IMPORTANTE: */
/* Dobbiamo permettere di copiare la mail o cliccare i link/bottoni */
a, button, input, textarea, .selectable {
    user-select: text !important; /* Riabilita la selezione */
    pointer-events: auto !important; /* Riabilita il click */
}

/* --- GESTIONE LINGUA --- */

/* Nascondi elementi inglesi se siamo in IT (default) */
body.lang-it .lang-en {
    display: none !important;
}

/* Nascondi elementi italiani se siamo in EN */
body.lang-en .lang-it {
    display: none !important;
}

/* Stile del selettore nel menu */
.language-selector {
    cursor: pointer;
    font-weight: 400;
}
.language-selector span.active {
    font-weight: 800; /* Grassetto per la lingua attiva */
    opacity: 1;
    text-decoration: underline;
}

/* --- SFONDO E OVERLAY --- */
#canvas-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0;
}

.fixed-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    /* Overlay molto scuro per leggere bene il CV */
    background: rgba(0,0,0,0.85); 
    z-index: 1; pointer-events: none;
}

/* --- NAVIGAZIONE (Stesso codice dei progetti) --- */
nav.ui-element {
    position: fixed; top: 40px; left: 50px; right: 50px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 999999; pointer-events: none;
}
.nav-left, .nav-right { pointer-events: auto; }
.nav-left a {
    font-size: 18px; font-weight: 700; text-transform: uppercase;
    text-decoration: none; color: white; mix-blend-mode: exclusion;
}
.nav-right { display: flex; gap: 30px; }
.nav-right a, .nav-right .language-selector {
    color: white; text-decoration: none; text-transform: uppercase;
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
    opacity: 0.6; transition: opacity 0.3s; mix-blend-mode: exclusion;
}
.nav-right a:hover { opacity: 1; }

/* --- STRUTTURA ABOUT --- */
.about-content {
    position: relative;
    z-index: 10; /* Sopra l'overlay */
    max-width: 1200px;
    margin: 0 auto;
    padding: 200px 50px 100px 50px; /* Spazio in alto per la nav */
}

/* GRIGLIA RESUME */
.resume-grid {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Spazio tra le righe (Experience / Education ecc) */
}

.resume-row {
    display: grid;
    /* Colonna sinistra fissa (200px) o percentuale, destra flessibile */
    grid-template-columns: 250px 1fr; 
    gap: 40px;
    align-items: flex-start; /* Allinea in alto */
    
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Linea sottile opzionale */
    padding-bottom: 50px;
}
.resume-row:last-child { border-bottom: none; }

/* COLONNA SINISTRA (Etichette) */
.resume-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    opacity: 0.5;
}

/* COLONNA DESTRA (Testo) */
.resume-text {
    font-size: 14px; /* Dimensione leggibile */
    font-weight: 400;
    line-height: 1.6;
    color: #ffffffaf;
}

/* Stili specifici per il contenuto */
.intro {
    font-size: 18px; /* L'intro è più grande come nell'immagine */
    color: #ffffff;
    line-height: 1.4;
}

.job-item, .edu-item, .exhibit-item {
    margin-bottom: 5px;
}

strong {
    color: #fff;
    font-weight: 600;
}

/* Link nella sezione contact */
.resume-text.links a {
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    transition: 0.3s;
}
.resume-text.links a:hover { opacity: 0.7; }
.download-link { font-size: 14px; opacity: 0.7; margin-top: 10px; display: inline-block; }


/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    nav.ui-element {
        top: 20px; left: 20px; right: 20px;
        align-items: center;
    }

    /* Mostra il burger su mobile */
    .js-burger { display: flex; }

    /* TRASFORMAZIONE NAV-RIGHT IN MENU FULLSCREEN */
    .nav-right {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.96);

        
        flex-direction: column; /* Link uno sotto l'altro */
        justify-content: center;
        align-items: center;
        gap: 10px;
        
        z-index: 150;
        
        /* Nascondi di default */
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.4s ease;
    }

    /* Quando è attivo (cliccato il burger) */
    .nav-right.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Stile Link giganti su mobile */
    .nav-right a, .nav-right .language-selector {
        font-size: 32px; /* Grandi */
        font-weight: 600;
        opacity: 1;
        mix-blend-mode: normal; /* Toglie l'exclusion per vederli bene sul nero */
    }
    
    .nav-right .language-selector {
        font-size: 16px;
        margin-top: 20px;
        border: 1px solid white;
        padding: 10px 30px;
        border-radius: 50px;
    }
    .about-content {
        padding: 150px 20px 50px 20px;
    }

    .resume-row {
        /* Su mobile, una colonna unica */
        grid-template-columns: 1fr; 
        gap: 15px;
        padding-bottom: 40px;
    }

    .resume-label {
        opacity: 0.5; /* Meno evidente su mobile */
        font-size: 12px;
    }
    
    .resume-text.intro { font-size: 14px; }
    .resume-text { font-size: 12px; }


}