/* RESET E BASE */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Nero profondo */
    color: #fff;
    font-family: 'Inter', sans-serif;
    width: 100%;       /* NON usare 100vw */
    max-width: 100%;   /* Impedisce di allargarsi oltre */
    overflow-x: hidden; /* Taglia via tutto ciò che sborda lateralmente */
}

/* --- 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;
}

/* 1. SFONDO 3D FISSO */
#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0; /* Dietro a tutto */
}

.ui-element {
    position: absolute;
    z-index: 10;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. OVERLAY SFUMATO FISSO */
/* Questo rende il testo leggibile scurendo la parte bassa dello schermo */
.fixed-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0) 0%,      /* Trasparente in alto (vedo l'oggetto) */
        rgba(0,0,0,0.6) 40%,   /* Inizia a scurire */
        rgba(0,0,0,0.95) 80%   /* Quasi nero in basso per il testo */
    );
    z-index: 1;
    pointer-events: none; /* Lascia passare il mouse */
}

/* --- NAVIGAZIONE (Corretta per entrambe le pagine) --- */
nav {
    position: absolute; /* Assicuriamoci che sia absolute */
    top: 40px;
    left: 50px;  /* IMPORTANTE: Ancora a sinistra */
    right: 50px; /* IMPORTANTE: Ancora a destra */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spinge gli elementi agli estremi opposti */
    z-index: 250; /* Sopra a tutto */
    pointer-events: none; /* Lascia cliccare attraverso la barra vuota */
}

.nav-left, .nav-right { pointer-events: auto; }


.nav-left a {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    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: 600;
    letter-spacing: 1px;
    opacity: 0.6;
    transition: opacity 0.3s;
    mix-blend-mode: exclusion;
}
.nav-right a:hover { opacity: 1; }

/* STILE BURGER (Creato via JS, quindi lo stilizziamo qui) */
.js-burger {
    display: none; /* Invisibile su Desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 12px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 250; /* Sopra al menu */
}
.js-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    transition: all 0.3s;
}

/* ANIMAZIONE X DEL BURGER */
.js-burger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.js-burger.open span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }



.back-btn {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.7;
    transition: opacity 0.3s;
    mix-blend-mode: exclusion; /* Si legge anche sul bianco */
}
.back-btn:hover { opacity: 1; }

/* 4. CONTENUTO SCROLLABILE */
.scroll-content {
    position: relative;
    z-index: 2;
    
    /* Layout */
    max-width: 85%;
    margin: 0 auto;
    padding: 0 50px;
    
    /* IMPORTANTE: 60vh spinge il testo in basso.
       Se lasci 20vh, il testo copre l'oggetto e non si legge. */
    padding-top: 20vh; 
    padding-bottom: 100px;
}

/* --- HEADER PROGETTO --- */
.project-header {
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 40px;
    z-index: 0;
    
    /* Aggiunto 'px'. Prima era solo '3' */
    margin-bottom: 30px; 
}

.p-title-main {
    font-size: clamp(40px, 6vw, 90px); /* Responsive */
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    line-height: 0.9;
    letter-spacing: -2px;
}

.p-meta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.meta-tag {
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50px;
    padding: 5px 15px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- GRIGLIA INFO (2 Colonne) --- */
.info-grid {
    display: grid;
    /* Colonna sinistra 65%, destra 35% */
    grid-template-columns: 1.5fr 1fr; 
    gap: 80px;
    margin-bottom: 100px;
}

.lead-text {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
}

.col-desc p {
    font-size: 16px;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 20px;
}

/* Dettagli a destra */
.col-details {
    padding-top: 10px; /* Allineamento ottico */
}

.detail-block {
    margin-bottom: 30px;
}

.label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-weight: 700;
}

.col-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-details li {
    font-size: 14px;
    margin-bottom: 5px;
    color: #eee;
}

.ext-link {
    display: block;
    color: white;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: fit-content;
    padding-bottom: 2px;
    transition: all 0.2s;
}
.ext-link:hover { opacity: 0.6; }


/* --- GALLERY (3 Colonne) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 colonne uguali */
    gap: 20px;
    margin-bottom: 80px;
}

.gallery-grid-video {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 colonne uguali */
    gap: 20px;
    margin-bottom: 80px;
}

.gallery-grid-cover {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne uguali */
    gap: 20px;
    margin-bottom: 80px;
}

.img-box-video {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 9 / 16;
}

.img-box-cover {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
}

.img-box-foto {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 3 / 4;
}

.img-box.full-span {
    /* Magia del Grid: va dalla prima linea all'ultima */
    grid-column: 1 / -1; 
    
    /* Consigliato: formato panoramico/cinematografico */
    aspect-ratio: 21 / 9; 
    /* aspect-ratio: 16 / 9; /* Se la vuoi un po' più alta */
}

/* --- BASE (Default: Rettangolo Standard 4:3) --- */
.img-box {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    /* Formato Standard (né troppo alto, né troppo basso) */
    aspect-ratio: 4 / 3; 
}


/* IMMAGINE INTERNA (Riempimento automatico) */
.img-box img, 
.img-box video,
.img-box-video video,
.img-box-cover img,
.img-box-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia i bordi per adattarsi alla forma scelta */
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.img-box:hover img,
.img-box:hover video,
.img-box-video:hover video,
.img-box-cover:hover img,
.img-box-foto:hover img {
    transform: scale(1.05);
}

/* --- FOOTER (Tasto Torna Su) --- */
.project-footer {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 40px;
    padding-bottom: 60px; /* Un po' di aria in fondo */
    
    display: flex;
    justify-content: flex-end; /* Allinea tutto a DESTRA */
}

.scroll-top-btn {

    display: inline-flex;    /* Usa Flexbox invece di block/inline-block */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;     /* Centra verticalmente */
    cursor: pointer;

    /* --- AGGIUNGI QUESTO PER FIXARE IL CLICK --- */
    position: relative;     /* Necessario per lo z-index */
    z-index: 1000;          /* Lo porta sopra a eventuali overlay o canvas */
    pointer-events: auto;   /* Forza la riattivazione del click */
    
    /* Stile Testo (Coerente con Navbar) */
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    
    /* Dimensione Bottone */
    padding: 15px 40px; /* Grande e cliccabile */
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50px; /* Pillola */
    
    transition: all 0.3s ease;
    background: transparent;
    margin: 5px;
}

.scroll-top-btn a {
    color: white;
    text-decoration: none;
}

.scroll-top-btn a:hover {
    color: black;
    text-decoration: none;
}

/* Hover: Diventa bianco con testo nero */
.scroll-top-btn:hover {
    background-color: white;
    color: black;
    border-color: white;
    transform: translateY(-5px); /* Sale leggermente */
}

@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;
    }

    /* CONTAINER: Meno padding, più larghezza */
    .scroll-content {
        padding: 0 20px; /* Margini laterali di sicurezza */
        padding-top: 15vh; /* Titolo parte un po' più in alto */
    }

    /* HEADER: Titoli più piccoli ma leggibili */
    .p-title-main {
        font-size: 54px; /* Dimensione fissa leggibile su mobile */
        margin-bottom: 15px;
    }
    
    .project-header {
        padding-bottom: 20px;
        margin-bottom: 10px;
    }

    .meta-tag {
        font-size: 10px;
        padding: 4px 12px;
    }

    /* INFO GRID: Passa a 1 Colonna */
    .info-grid {
        grid-template-columns: 1fr; /* Tutto impilato */
        gap: 10px;
        margin-bottom: 50px;
    }


    /* TESTO: Leggermente ridotto per schermi piccoli */
    .lead-text { font-size: 12px; }
    .col-desc p { font-size: 12px; margin-bottom: 10px;}

    /* DETTAGLI: Griglia interna per risparmiare spazio verticale */
    .col-details {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 colonne di dettagli */
        gap: 20px;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-top: 20px;
    }

    .col-details li {
        font-size: 12px;
    }
    
    /* GALLERY: 1 Colonna (Immagini grandi) */
    .gallery-grid,
    .gallery-grid-video,
    .gallery-grid-cover {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    /* FOOTER: Bottone a larghezza piena */
    .project-footer {
        justify-content: center;
    }
    .scroll-top-btn {
        font-size: 10px;
        width: 100%;
        align-items: center;
        text-align: center;
        padding: 10px 20px; /* Grande e cliccabile */
    }
}

/* FIX PER SCHERMI MOLTO PICCOLI (iPhone SE, etc) */
@media (max-width: 380px) {
    .p-title-main { font-size: 36px; }
    .col-details { grid-template-columns: 1fr; } /* Dettagli uno sotto l'altro */
}