/* ==========================================================================
   RESET E FONTS
   ========================================================================== */
:root {
    --margine-universale: 20px;
}

@font-face {
    font-family: "EvenMono";
    src: url("../fonts/EvenMono-Regular.otf") format("opentype");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }
html, body { -ms-overflow-style: none !important; scrollbar-width: none !important; width: 100%; height: 100%; }

body {
    font-family: "EvenMono", monospace;
    background: black;
    color: white;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Solo 60px per aderire sotto la top-bar. Il bottom è gestito dai singoli contenitori per evitare problemi su mobile */
body:not(.home-page) {
    padding-top: 60px;
    padding-bottom: 0px; 
}

body.home-page {
    overflow: hidden !important; position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%; touch-action: none;
}

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   BARRA SUPERIORE (Nera, alta 60px)
   ========================================================================== */
.top-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    padding: 0 var(--margine-universale); background: black;
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 1500; 
}

body.home-page .top-bar { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; background: transparent; }

/* white-space: nowrap tiene uniti e bloccati JV e la freccia senza farli andare a capo */
.top-left { display: flex; align-items: center; gap: 10px; font-size: 10px; white-space: nowrap; }
.top-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }
.top-right { display: flex; align-items: center; transform: translateY(-1.7px);}

#backToPreviewFixed, #backToPreview { font-size: 28px; line-height: 1; }
.project-name { border-bottom: none; cursor: default; pointer-events: none; }
.sub-link { border-bottom: 0.2px solid white; padding-bottom: 2px; }

/* Lingua */
.lang-switcher { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.lang-btn { cursor: pointer; color: #555; border-bottom: 0.5px solid #555; padding-bottom: 2px; }
.lang-btn.active { color: white; border-bottom-color: white; }
.lang-separator { color: #555; }



#openModalTop { font-size: 58px; cursor: pointer; line-height: 0; display: flex; align-items: center; transform: translateY(-2px); transform: translateX(16%); }



/* ==========================================================================
   BARRA INFERIORE (Sempre a schermo - FISSA)
   ========================================================================== */
.overlay-bottom { 
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 60px; 
    background: black; padding: 0 var(--margine-universale); z-index: 1500; 
    display: flex; justify-content: space-between; align-items: center; 
}

.bottom-left, .bottom-right { display: flex; align-items: center; width: max-content; }

.bottom-left, .bottom-right { 
    display: flex; 
    align-items: center; 
width: max-content !important; 
    min-width: max-content !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   CENTRATURA PERFETTA BOTTOM-CENTER
   ========================================================================== */
.bottom-center {
    position: absolute;
    left: 50%;
    /* Scrivili insieme sulla stessa riga! Ho messo -2px come esempio per alzarlo leggermente */
    transform: translateX(-50%) translateY(-1px); 
    display: flex;
    align-items: center;
    white-space: nowrap; 
}

.nav-btn { 
    font-size: 10px; 
    cursor: pointer; 
    transition: opacity 0.3s; 
    border-bottom: 0.2px solid white; 
    padding-bottom: 2px; 
    
    /* FORZATURA ANTI-A-CAPO ASSOLUTA */
    white-space: nowrap !important; 
    word-break: keep-all !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}


.nav-btn:hover { opacity: 0.6; }
.copyright { font-size: 10px; display: flex; align-items: center; }
.copy-symbol { font-size: 14px; margin-right: 8px; }

body.home-page .overlay-bottom { background: transparent; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }

/* ==========================================================================
   GRIGLIE ANTEPRIMA E PROGETTI
   ========================================================================== */

/* PREVIEW: padding-bottom 120px (60px per superare il footer + 60px per lo spazio vuoto dopo il titolo) */
#previewGrid { 
    margin-top: 0px;
    width: 100%; 
    padding: 0 var(--margine-universale) 100px var(--margine-universale); 
    margin-bottom: 0; 
}
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; width: 100%; }
.grid-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: opacity 0.3s ease; }
.grid-item:hover { opacity: 0.7; }
.grid-item video, .grid-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 10px; background: #111; }
.grid-item span { font-size: 10px; text-align: center; letter-spacing: 0.05em; margin-bottom: 10px; }

/* PAGINE SINGOLE: padding-bottom 60px fa appoggiare le immagini ESATTAMENTE sopra il footer senza farle tagliare */
#bookPages, #graphicsPages { 
    width: 100%; 
    padding: 0 var(--margine-universale) 60px var(--margine-universale); 
    margin-bottom: 0; 
}
.grafica-project { margin-bottom: 80px; }
.grafica-project:last-child { margin-bottom: 0; }
.grafica-images { 
    margin-top: 20px !important;  /* Aumenta questo numero per replicare l'ampio respiro di Artworks */
    margin-bottom: var(--margine-universale); 
}
.grafica-images:last-child { margin-bottom: 0; } /* AGGIUNTO: Rimuove il margine nero finale extra */

#bookPages.opere-2x2, .grafica-images.opere-2x2, #graphicsPages.opere-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--margine-universale); }
#bookPages.opere-3x3, .grafica-images.opere-3x3, #graphicsPages.opere-3x3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--margine-universale); }

#bookPages img, #bookPages video, .grafica-images img, .grafica-images video, #graphicsPages img, #graphicsPages video { width: 100%; height: auto; display: block; object-fit: cover; }
#bookPages img:not(:last-child), #bookPages video:not(:last-child) { margin-bottom: var(--margine-universale); }
#bookPages.opere-2x2 img, #bookPages.opere-2x2 video, #graphicsPages.opere-2x2 img, #graphicsPages.opere-2x2 video { margin-bottom: 0px; }

.opere-6x6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--margine-universale); margin-bottom: 0; }
.opere-6x6 img, .opere-6x6 video { width: 100%; height: auto; display: block; object-fit: cover; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.grafica-images.opere-3x2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--margine-universale); }






.info-grid { 
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--margine-universale); width: 100%; 
    font-size: 10px; line-height: 1.6; align-items: start; 
    margin-top: var(--margine-universale); 
    margin-bottom: 0; /* Rimuovi il margin-bottom per evitare il collasso */
    /* Aggiungi la variabile come padding inferiore (quarto valore) */
    padding: 0 var(--margine-universale) var(--margine-universale) var(--margine-universale); 
}


/* RIMOZIONE DOPPIO RIENTRO: Togliamo il padding laterale, ma SALVIAMO il padding inferiore di 20px */
#graphicsPages .info-grid, #bookPages .info-grid { 
    padding: 0 0 var(--margine-universale) 0; 
}

.info-left, .info-right { display: flex; flex-direction: column; } 
.info-title { margin-bottom: 0px; line-height: 1.6; font-size: 10px;}
.info-year { margin-bottom: 0px; line-height: 1.6; }
.info-materials { line-height: 1.6; }

/* ==========================================================================
   INTRO E SPLIT HOMEPAGE
   ========================================================================== */
#intro { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -47%); display: flex; gap: 0.05em; letter-spacing: -0.04em; line-height: 1; font-size: clamp(75vw, 77vw, 80vw); cursor: pointer; z-index: 2100; }
#intro span { display: inline-block; transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease; transform: translateY(-0.05em); }
#introText { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: clamp(4vw, 6vw, 8vw); line-height: 1.2; opacity: 0; z-index: 2200; pointer-events: none; transition: opacity 1.2s ease; }

#mainPreview { position: absolute; inset: 0; background: black; display: none; flex-direction: column; opacity: 0; z-index: 950; transition: opacity 0.8s ease; }
.preview-split { display: flex; width: 100%; height: 100vh; }
.preview-half { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; letter-spacing: 0.05em; font-size: clamp(4vw, 6vw, 8vw); cursor: default; }
.preview-half span { cursor: pointer; display: inline-block; }





/* ==========================================================================
   MODALE COMPLETO (Il tuo stile originale + Fix Barre Nere + Nuova Griglia About)
   ========================================================================== */
.modal { 
    position: fixed; 
    inset: 0; 
    background: #000 !important; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.2s ease; 
    z-index: 2500; 
}

.modal.active { 
    opacity: 1; 
    pointer-events: auto; 
    background: #000 !important; 
}

.modal-content {
    background: #000 !important;
    width: 100%;
    height: 100%; 
    max-height: 100dvh; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
    padding-top: 80px;    
    padding-bottom: 80px;
    padding-left: var(--margine-universale);
    padding-right: var(--margine-universale);
    -ms-overflow-style: none; 
    scrollbar-width: none;
}

/* === NUOVO: SCUDO NERO SUPERIORE (Evita il trapasso del testo) === */
.modal-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: black;
    z-index: 2550; /* Sopra il testo, ma sotto le scritte JV/ENG/X */
}

/* === NUOVO: BARRA INFERIORE NERA CON I CONTATTI === */
.modal-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2550;
}

#modalJV {
    position: fixed;
    top: 0;
    left: var(--margine-universale);
    height: 60px;
    display: flex;
    align-items: center;
    font-size: 28px;
    line-height: 1;
    z-index: 2700; /* Superiore a tutto */
    cursor: pointer;
    color: white !important;      /* Forza il bianco */
    text-decoration: none !important; /* Rimuove sottolineatura */
    background: transparent !important;
}

#modalLang {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    display: flex;
    align-items: center;
    z-index: 2600;
}

#closeModal { 
    position: fixed; 
    top: 0; 
    right: var(--margine-universale); 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: flex-end;
    font-size: 58px; 
    cursor: pointer; 
    line-height: 1; 
    z-index: 2600; 
    transform: translateY(-1.7px) translateX(6px); /* Il tuo allineamento ottico */
}





/* Nasconde la scrollbar nel modale per pulizia */
.modal-content::-webkit-scrollbar { display: none; }


/* ==========================================================================
   STILI TESTI E GRIGLIA SEZIONE ABOUT
   ========================================================================== */

/* Testo introduttivo centrato con larghezza massima di 800px */
.about-intro {
    max-width: 800px;
    margin: 0 auto 60px auto; 
    font-size: 20px;
    text-align: center;
    line-height: 1.6;
}

/* Griglia a 2 colonne per le esperienze (identica a quella dei progetti) */
.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--margine-universale);
    width: 100%;
    text-align: left;
    font-size: 10px;
    line-height: 1.6;
}

/* Colonna di Sinistra (Titolo) */
.about-left {
    display: flex;
    flex-direction: column;
}

.about-title {
    font-weight: bold;
    text-transform: uppercase;
}

/* Colonna di Destra (Esperienze) */
.about-right {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Spazio tra un'esperienza e l'altra */
}

.experience-item {
    display: flex;
    flex-direction: column;
}

/* Adattamento per i telefoni: torna a 1 colonna */
@media (max-width: 600px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    .about-title {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   STILI FOOTER MODALE E LINK
   ========================================================================== */

/* Il tuo stile esatto per i link usati nella barra inferiore */
.about-links {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.about-links a {
    font-size: 10px;
    border-bottom: 0.5px solid white;
    padding-bottom: 2px;
}





/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (min-width: 601px) { .preview-half span { transform: translateY(-20px); } }
@media (max-width: 1024px) { .opere-6x6 { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 600px) { 
    /* Le tue altre regole mobile... */
    
    /* RIMUOVE IL DOPPIO MARGINE SU TELEFONO */
    .grafica-images { 
        margin-top: 0px !important; 
    }
}

@media (max-width: 600px) { 
    /* Nuova regola per avere 2 colonne da telefono */
    .grafica-images.opere-3x2 { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* Regole originali a 1 colonna */
    .grid-container, #bookPages.opere-2x2, .grafica-images.opere-2x2, #graphicsPages.opere-2x2, .info-grid, .opere-6x6, #bookPages.opere-3x3, .grafica-images.opere-3x3, #graphicsPages.opere-3x3 { grid-template-columns: 1fr; }
    
    .info-materials { margin-bottom: 14px; }
    #intro { font-size: 110vw; flex-direction: column; line-height: 0.72; }
    #introText { font-size: 12vw; width: 90%; }
    .preview-split { flex-direction: column; }
    .preview-half { height: 50vh; flex: none; font-size: 12vw; width: 100%; }
    #chooseGraphics span { transform: translateY(-100px); }
    .span-2 { grid-column: auto !important; }
    .span-3 { grid-column: auto !important; }
}

/* GESTIONE LINGUA ISTANTANEA SENZA SCATTI */
html[lang="IT"] .text-eng { display: none !important; }
html[lang="ENG"] .text-it { display: none !important; }


/* ==========================================================================
   FORZATURA VIDEO: NASCONDI TUTTI I CONTROLLI E ICONE NATIVE
   ========================================================================== */
video::-webkit-media-controls { display: none !important; opacity: 0 !important; }
video::-webkit-media-controls-enclosure { display: none !important; opacity: 0 !important; }
video::-webkit-media-controls-panel { display: none !important; opacity: 0 !important; }
video::-webkit-media-controls-play-button { display: none !important; opacity: 0 !important; -webkit-appearance: none !important; }
video::-webkit-media-controls-start-playback-button { display: none !important; opacity: 0 !important; -webkit-appearance: none !important; }
video::-webkit-media-controls-overlay-play-button { display: none !important; opacity: 0 !important; -webkit-appearance: none !important; }

/* Rende il video "intoccabile", così se l'utente clicca non appare il menu del player e il focus è annullato */
video {
    pointer-events: none !important; 
    -webkit-user-select: none !important;
    user-select: none !important;
    outline: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Il separatore di default è nascosto su PC */
.mobile-separator { 
    display: none; 
}

@media (max-width: 600px) {
    /* Quando la griglia diventa una colonna unica (su telefono), mostriamo il separatore */
    .mobile-separator { 
        display: inline; 
    }
}


/* ==========================================================================
   SFERA FLUTTUANTE E RISOLUZIONE BARRE DI NAVIGAZIONE
   ========================================================================== */

:root {
    --sfera-dimensione: 40vw;       
    --sfera-opacita: 1.0;           
}

/* 1. Sfondo globale */
html { background-color: black !important; }
body, #mainPreview, .modal, .home-page { background-color: transparent !important; }

#cinematic-background {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--sfera-dimensione);
    height: var(--sfera-dimensione);
    margin-top: calc(var(--sfera-dimensione) / -2);
    margin-left: calc(var(--sfera-dimensione) / -2);
    
    background-image: url('../logosito.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Parte invisibile durante l'intro e sfuma dolcemente in 0.8s */
    opacity: 0;
    transition: opacity 0.8s ease;
    
    /* Livello 500: la tiene rigorosamente sotto immagini e barre */
    z-index: 500; 
    pointer-events: none;
    
    animation-name: orbFloatRandom;
    animation-duration: var(--sfera-velocita-random, 45s);
    animation-timing-function: ease-in-out;
    animation-delay: var(--sfera-ritardo, 0s);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    
    /* La sfera parte in pausa */
    animation-play-state: paused;
}

/* 3. IMMAGINI E VIDEO (Z-INDEX 1000) */
#bookPages img, #bookPages video, 
.grafica-images img, .grafica-images video, 
#graphicsPages img, #graphicsPages video,
.grid-item img, .grid-item video, 
.opere-6x6 img, .opere-6x6 video {
    position: relative;
    z-index: 1000;
}

/* 4. BARRE DI NAVIGAZIONE ASSOLUTAMENTE IN CIMA (Z-INDEX 2000) */
/* Questa regola forza le barre a scavalcare tutto, risolvendo il problema della scomparsa */
.top-bar, .overlay-bottom {
    z-index: 2000 !important;
}

/* 5. L'ANIMAZIONE */
@keyframes orbFloatRandom {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(var(--rx1), var(--ry1)) scale(var(--rs1)); }
    66% { transform: translate(var(--rx2), var(--ry2)) scale(var(--rs2)); }
    100% { transform: translate(var(--rx3), var(--ry3)) scale(var(--rs3)); }
}