/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */

:root {
    /* Colors */
    --bg-color: #D9D9D9;
    --text-color: #1A1A1A;
    --grid-overlay-color: rgba(220, 53, 69, 0.04);
    --grid-line-color: rgba(220, 53, 69, 0.08);

    /* Grid configuration (Desktop Default) */
    --grid-cols: 12;
    --grid-margin: 10px;
    --grid-gutter: 10px;
    
    /* Dynamic width of a single column including margins and gutters */
    --col-width: calc((100vw - (2 * var(--grid-margin)) - (var(--grid-cols) - 1) * var(--grid-gutter)) / var(--grid-cols));

    /* Typography */
    /* Base Font: Neue Haas Unica Pro with modern system fallbacks */
    --font-base: 'Neue Haas Unica Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Accent Font */
    --font-accent: 'Times New Roman', Times, serif;
    /* Signature Font */
    --font-signature: 'Pinyon Script', cursive;
}

/* Responsive grid overrides based on breakpoints */
@media (max-width: 1024px) {
    :root {
        --grid-cols: 8;
    }
}

@media (max-width: 768px) {
    :root {
        --grid-cols: 4;
    }
}

/* Responsive visibility utilities */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: inline;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    html {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    body {
        height: 100%;
        overflow: hidden;
        touch-action: none;
    }
    
    body.works-open {
        touch-action: auto;
    }
}


/* ==========================================================================
   FONT FACE INTEGRATION (Neue Haas Unica Pro)
   ========================================================================== */

/* 
   Istruzioni: Posiziona i file del font in 'src/fonts/'.
   Queste definizioni caricheranno i tuoi file locali non appena saranno disponibili.
*/
@font-face {
    font-family: 'Neue Haas Unica Pro';
    src: url('fonts/NeueHaasUnicaPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Unica Pro';
    src: url('fonts/NeueHaasUnicaPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Unica Pro';
    src: url('fonts/NeueHaasUnicaPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Unica Pro';
    src: url('fonts/NeueHaasUnicaPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

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

/* Personalizzazione colore di selezione del testo (Highlight) */
::selection {
    background-color: #FF6E2B;
    color: var(--text-color);
}

::-moz-selection {
    background-color: #FF6E2B;
    color: var(--text-color);
}

html, body {
    height: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 
       Disattiviamo lo scroll per mantenere il layout della Home rigido e centrato.
       Viene ripristinato solo su schermi estremamente bassi per evitare tagli di contenuto.
    */
    overflow: hidden;
    
    /* Gestione dei margini uniformi e posizionamento elementi */
    display: flex;
    flex-direction: column;
    padding: var(--grid-margin);
}

/* Ripristina lo scorrimento verticale in landscape o su schermi molto bassi (solo desktop/tablet) */
@media (max-height: 550px) and (min-width: 769px) {
    html, body {
        overflow-y: auto;
    }
}

/* ==========================================================================
   RESPONSIVE GRID SYSTEM (Figma Compliant)
   ========================================================================== */

.grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   HEADER (Navigation & Grid Alignment)
   ========================================================================== */

.header {
    position: absolute;
    top: var(--grid-margin);
    left: var(--grid-margin);
    right: var(--grid-margin);
    width: calc(100% - (2 * var(--grid-margin)));
    z-index: 100;
    
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    
    /* Effetto difference: l'header come layer (testo bianco su bg trasparente)
       viene composited con tutto cio' che sta sotto (gallery, sfondo)
       usando la formula: difference(bianco, X) = inverte X */
    mix-blend-mode: difference;

    /* Animazione iniziale: scorrimento dall'alto con dissolvenza, ritardo sequenziato */
    opacity: 0;
    transform: translateY(-20px);
    animation: slideInHeader 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.8s;
}

@keyframes slideInHeader {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-link, .header-brand {
    font-family: var(--font-base);
    /* Ridotto di un altro pt (da 11pt a 10pt -> 13.33px -> 0.833rem) */
    font-size: 0.833rem; 
    font-weight: 500;
    text-transform: uppercase;
    /* Bianco: difference(bianco, X) = inversione di X.
       Su sfondo #D9D9D9: difference(255,217) = 38 -> quasi nero (leggibile).
       Sopra le immagini colorate: diventa il complementare del colore. */
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    line-height: 0.8; /* Comprime lo spazio superiore per consentire alla parte alta delle lettere di toccare il margine */
    margin-top: -3px; /* Compensa la cornice virtuale del font per adagiare il testo sulla linea superiore (10px) */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Allineamento degli elementi sulle colonne della griglia (Desktop Default) */
.header-works {
    grid-column: 1;
    justify-self: start;
    text-align: left;
}

.header-brand {
    grid-column: 5 / span 4; /* Perfettamente centrato su 12 colonne */
    justify-self: center;
    text-align: center;
    cursor: pointer; /* Ora è cliccabile per resettare/refreshare la home */
}

.header-about {
    grid-column: 11;
    justify-self: center;
    text-align: center;
}

.header-contact {
    grid-column: 12;
    justify-self: end;
    text-align: right;
}

.header-menu {
    display: none;
}

/* Adattamenti della griglia dell'header per Tablet (8 colonne) */
@media (max-width: 1024px) {
    .header-brand {
        grid-column: 3 / span 4; /* Centrato su 8 colonne */
    }
    .header-about {
        grid-column: 7;
    }
    .header-contact {
        grid-column: 8;
    }
}

/* Adattamenti della griglia dell'header per Mobile (4 colonne) - Prevenzione sovrapposizioni */
@media (max-width: 768px) {
    .header-brand {
        display: block; /* Mostra e allinea a sinistra il brandname su mobile */
        grid-column: 1 / span 3;
        justify-self: start;
        text-align: left;
    }
    .header-works,
    .header-about,
    .header-contact {
        display: none; /* Nasconde le tre voci dell'header su mobile */
    }
    .header-menu {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        grid-column: 4;
        justify-self: end;
    }
}

/* ── Burger icon morph (= → ×) ──────────────────────────────────────────────
   Both SVG lines are placed at y=6 (the vertical centre of the 18×12 viewBox).
   In the BURGER state each line is translated ±3px along Y to create visual
   separation, while staying centred at (9,6).
   In the X state the translateY disappears and a ±45° rotation around the
   shared centre (9,6) draws a perfect cross.

   transform-box: fill-box  → pivot is relative to the element's own bbox
   transform-origin: center → pivot lands at (9,6) for a full-width line at y=6
*/
.menu-icon {
    display: block;
    overflow: visible; /* Lines extend beyond viewBox during rotation */
}

.menu-icon-top,
.menu-icon-bot {
    transform-box:    fill-box;
    transform-origin: center; /* = geometric centre of each line = (9,6) */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Burger (closed) — push the two coincident lines apart */
.menu-icon-top { transform: translateY(-3px); }
.menu-icon-bot { transform: translateY( 3px); }

/* X (open) — collapse to centre and rotate */
.header-menu.is-open .menu-icon-top { transform: rotate( 45deg); }
.header-menu.is-open .menu-icon-bot { transform: rotate(-45deg); }

/* ── Mobile Nav Overlay ─────────────────────────────────────────────────────
   Positioned absolutely so it sits directly under the header,
   full-width, z-index below header but above the gallery.
   Only active on mobile; uses mix-blend-mode: difference to match header.
*/
.mobile-nav {
    display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
    .mobile-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Right-aligned */
        position: absolute;
        top: var(--grid-margin);
        right: var(--grid-margin);
        z-index: 99; /* Just below the header (100) */
        gap: 0.6em; /* Vertical spacing between items */
        pointer-events: none; /* Disabled by default */
        mix-blend-mode: difference; /* Match header blend mode */

        /* Start hidden and off to the right */
        opacity: 0;
        transform: translateX(12px);
        transition:
            opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-nav.is-open {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .mobile-nav-link {
        font-family: var(--font-base);
        font-size: 0.833rem; /* Same as MONICA BATTAGLIA */
        font-weight: 500;
        text-transform: uppercase;
        color: #ffffff; /* White → difference blend reads as near-black on bg */
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        line-height: 0.8;
        text-align: right;
        transition: opacity 0.2s ease;
    }

    /* Staggered entrance for each link */
    .mobile-nav-link:nth-child(1) { transition-delay: 0.04s; }
    .mobile-nav-link:nth-child(2) { transition-delay: 0.08s; }
    .mobile-nav-link:nth-child(3) { transition-delay: 0.12s; }

    /* Position nav: offset from the top by the burger icon height + a comfortable gap */
    .mobile-nav {
        padding-top: calc(1em + 1.4rem); /* burger height ~12px + margin-top -3px ≈ 1em, + gap */
    }
}

/* ==========================================================================
   CONTACT POP-UP
   ========================================================================== */

.contact-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 146px; /* Altezza predefinita desktop */
    background-color: #FF6E2B;
    z-index: 200; /* Sopra l'header */
    transform: translateY(calc(-100% - 20px)); /* Spostato ulteriormente verso l'alto per evitare filetti visibili */
    visibility: hidden;
    will-change: transform; /* Ottimizzazione per la fluidità dell'animazione (GPU) */
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    /* Padding e layout come il resto della griglia */
    padding: var(--grid-margin);
    display: flex;
    align-items: flex-start;
}

.contact-popup.is-open {
    transform: translateY(0);
    visibility: visible;
}

/* Effetto Blur e Grayscale per il contenuto della pagina */
.header, .main-content, .footer, .floating-gallery {
    transition: filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}



body.contact-open .header,
body.contact-open .main-content,
body.contact-open .footer,
body.contact-open .floating-gallery {
    filter: blur(3px) grayscale(100%);
    pointer-events: none; /* Disabilita i clic sugli elementi sottostanti */
}

body.about-open .header,
body.about-open .main-content,
body.works-open .header,
body.works-open .main-content {
    filter: blur(3px) grayscale(100%);
    pointer-events: none; /* Disabilita i clic sugli elementi sottostanti */
}

.contact-popup-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    width: 100%;
    height: 100%;
}

.contact-headline {
    grid-column: 1 / span 5; /* Col 1-5 */
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(0.75rem, 0.65vw + 0.6rem, 1.083rem); /* Stessa grandezza e fluidità del paragrafo About */
    line-height: 1.077; /* Stessa interlinea proporzionale del paragrafo About */
    color: var(--text-color);
    align-self: start;
}

.contact-item {
    font-family: var(--font-base);
    font-weight: 500; /* Medium */
    font-size: 0.833rem; /* Aumentato di 1pt (da 9pt a 10pt) */
    line-height: 1.1; /* Ridotto di circa 2pt per un'interlinea più compatta */
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-self: end; /* Ancorato dal basso */
    margin-bottom: -3px; /* Aggiustamento ottico per allineare la baseline all'area inferiore */
}

.contact-link {
    color: var(--text-color);
    text-decoration: underline;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.contact-links-group {
    grid-column: 7 / span 5; /* Copre da colonna 7 a 11 (5 colonne totali) */
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Allinea tutti i figli sul fondo */
    align-self: end;
    /* Sposta l'inizio del primo elemento a metà della colonna 7 */
    padding-left: calc(var(--col-width) / 2);
}

.close-contact-btn {
    grid-column: 12;
    justify-self: end;
    align-self: start; /* Ancorato in alto */
    font-family: var(--font-base);
    font-size: 0.833rem; /* Stesse dimensioni delle voci header (10pt) */
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-color);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0.8;
    margin-top: -3px; /* Stessa logica dell'header per adagiarlo al margine superiore */
    padding: 0;
    transition: opacity 0.2s ease;
}

/* Responsiveness Contact Pop-up */
@media (max-width: 1024px) {
    .contact-headline { grid-column: 1 / span 4; }
    .contact-links-group {
        grid-column: 5 / span 4; /* Spazio da colonna 5 a colonna 8 */
        padding-left: 0; /* Rimuove lo shift di mezza colonna su tablet */
    }
    .close-contact-btn { grid-column: 8; justify-self: end; }
}

@media (max-width: 768px) {
    .contact-popup {
        height: auto;
        padding-bottom: var(--grid-margin); /* Poggiato a 10px dal bordo */
    }
    .contact-popup-container {
        display: flex;
        flex-direction: column;
        gap: 35px; /* Spinge giù i blocchi contatti rispetto all'headline */
    }
    .contact-links-group {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-left: 0;
    }
    .contact-item {
        align-self: start; /* Tutti i blocchi allineati a sinistra su mobile */
        margin-bottom: 0;
    }
    .close-contact-btn {
        position: absolute;
        top: var(--grid-margin);
        right: var(--grid-margin);
    }
}

/* ==========================================================================
   ABOUT POP-UP
   ========================================================================== */

.about-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-color); /* Stesso colore del background generale */
    z-index: 200; /* Sopra l'header */
    transform: translateY(-100%); /* Fuori schermo in alto */
    visibility: hidden;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto; /* Permette lo scorrimento se il contenuto è alto */
    padding: var(--grid-margin);
}

.about-popup.is-open {
    transform: translateY(0);
    visibility: visible;
}

.about-popup-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    position: relative;
    padding-bottom: 80px; /* Spazio per evitare sovrapposizioni con il footer fisso */
}

/* Header interno (I'M MONICA BATTAGLIA + CLOSE) */
.about-top-bar {
    position: sticky;
    top: calc(-1 * var(--grid-margin));
    margin-top: calc(-1 * var(--grid-margin));
    margin-left: calc(-1 * var(--grid-margin));
    margin-right: calc(-1 * var(--grid-margin));
    margin-bottom: 10px; /* 10px margin + 10px padding-bottom = 20px totale originale */
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    padding-top: var(--grid-margin);
    padding-bottom: 10px; /* Spazio sotto le scritte all'interno del background sticky */
    background-color: var(--bg-color); /* Stesso colore del popup per evitare differenze di colore */
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    align-items: start;
}

.about-cv-link {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-family: var(--font-base);
    font-size: 0.833rem; /* 10pt come voci header */
    font-weight: 500;
    text-transform: uppercase;
    color: #FF6E2B;
    text-decoration: none;
    line-height: 0.8;
    margin-top: -3px;
    z-index: 2; /* Sopra il titolo se si sovrappongono */
    cursor: pointer;
    white-space: nowrap; /* Evita che il testo vada a capo su colonne strette */
    animation: cvBlink 1s infinite step-end;
}

@keyframes cvBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.about-title {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    font-family: var(--font-base);
    font-size: 0.833rem; /* 10pt come MONICA BATTAGLIA nell'header */
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-color);
    line-height: 0.8;
    margin-top: -3px;
}

.close-about-btn {
    grid-column: var(--grid-cols);
    grid-row: 1;
    justify-self: end;
    font-family: var(--font-base);
    font-size: 0.833rem; /* 10pt come voci header */
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
    z-index: 2; /* Sopra il titolo se si sovrappongono */
    line-height: 0.8;
    margin-top: -3px;
}

/* Contenuto Centrale */
.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra verticalmente gli elementi nell'altezza residua */
    text-align: center;
    gap: 0; /* Gestito tramite margin specifici per avere distanze asimmetriche */
    flex-grow: 1;
    margin-top: 30px; /* Abbassa l'intero blocco di 30px rispetto al centro */
}

.about-headline {
    font-family: var(--font-accent);
    font-size: clamp(1.6rem, 3.5vw, 2.917rem); 
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-color);
    margin-bottom: 55px; /* Spazio per allinearsi al layout Figma */
}

.about-photo {
    width: 172px;
    height: 172px;
    background-color: #d0d0d0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 5px; /* Padding di 5px dal testo paragrafo */
}

.about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-paragraph {
    font-family: var(--font-base);
    font-weight: 500; /* Medium */
    font-size: clamp(0.75rem, 0.65vw + 0.6rem, 1.083rem); /* Fluidamente da 9pt (mobile) a 13pt (desktop) */
    line-height: 1.077; /* Interlinea proporzionale (14pt/13pt) per ridursi proporzionalmente */
    text-transform: uppercase;
    color: var(--text-color);
    max-width: 800px; /* Limite per rientrare in 6 colonne circa */
}

.photo-switch-trigger {
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.photo-switch-trigger:hover {
    color: #FF6E2B;
}



/* Responsiveness About */
@media (max-width: 768px) {
    .about-popup {
        overflow: hidden;
    }

    .about-top-bar { 
        padding-bottom: 15px;
        margin-bottom: 15px; /* 15px padding-bottom + 15px margin-bottom = 30px totale originale */
    }
    .about-content { gap: 0; }
    .about-headline { margin-bottom: 50px; }
    .about-photo { margin-bottom: 5px; }
    .about-title { display: none; } /* Nasconde il nome centrale su mobile per evitare sovrapposizioni con CV e CLOSE */
    
    .about-mobile-name {
        display: block !important;
        font-family: var(--font-base);
        font-weight: 500;
        font-size: 0.625rem; /* 10px */
        text-transform: uppercase;
        color: var(--text-color);
        margin-bottom: 2px; /* Spazio sotto il nome prima dell'headline */
        text-align: center;
    }

    .about-paragraph.mobile-only {
        display: block !important;
        font-size: 0.625rem; /* 10px */
        line-height: 1.25; /* Interlinea compatta */
        text-wrap: balance;
    }
}

/* ==========================================================================
   WORKS POP-UP
   ========================================================================== */

.works-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 200;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: var(--grid-margin);
}

.works-popup.is-open {
    transform: translateY(0);
    visibility: visible;
}

.works-popup-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    position: relative;
    padding-bottom: 160px; /* Impostato uguale alla distanza tra i progetti */
}

.works-top-bar {
    position: sticky;
    top: calc(-1 * var(--grid-margin));
    margin-top: calc(-1 * var(--grid-margin));
    margin-left: calc(-1 * var(--grid-margin));
    margin-right: calc(-1 * var(--grid-margin));
    margin-bottom: 10px; /* 10px margin + 10px padding-bottom = 20px totale per eguagliare il layout originale */
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    padding-top: var(--grid-margin);
    padding-bottom: 10px; /* Spazio sotto le scritte all'interno del background sticky */
    background-color: var(--bg-color); /* Stesso colore del popup per evitare differenze di colore */
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    align-items: start;
}

.works-label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-family: var(--font-base);
    font-size: 0.833rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-color);
    line-height: 0.8;
    margin-top: -3px;
    z-index: 2;
    cursor: pointer;
}

.works-title {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    font-family: var(--font-base);
    font-size: 0.833rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
    line-height: 0.8;
    margin-top: -3px;
    z-index: 1;
}

.close-works-btn {
    grid-column: var(--grid-cols);
    grid-row: 1;
    justify-self: end;
    font-family: var(--font-base);
    font-size: 0.833rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
    line-height: 0.8;
    margin-top: -3px;
}

@media (max-width: 768px) {
    .works-top-bar { 
        padding-bottom: 15px;
        margin-bottom: 15px; /* 15px padding-bottom + 15px margin-bottom = 30px totale originale */
    }
    .works-title { display: none; }
}

/* Works Project Items Layout */
.works-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-top: 60px; /* Spazio dalla barra superiore */
}

.works-project {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 160px; /* Aumentato di altri 40px (da 120px a 160px) per richiesta utente */
}

.works-project:last-child {
    margin-bottom: 0;
}

.works-project-top {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    margin-bottom: 10px; /* Aumentato a 10px per richiesta utente */
}

.works-project-info {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spinge il titolo in alto e i tag in basso allineandoli all'immagine */
    padding-bottom: 0px; 
}

@media (min-width: 769px) {
    .works-project-info {
        position: sticky;
        top: 30px; /* Si blocca appena sotto la barra WORKS superiore */
        align-self: start; /* Impedisce l'allungamento in altezza permettendo l'effetto sticky */
    }
}

.works-project-title {
    font-family: var(--font-base);
    font-weight: 500;
    /* 35pt calcolato proporzionalmente e reso fluido (circa 46.66px massimi) */
    font-size: clamp(1.8rem, 3.5vw, 2.917rem); 
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-color);
    margin-top: -6px; /* Allineamento ottico superiore con l'immagine */
}

.works-project-tags {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    margin-top: 10px; /* Aumentato a 10px per richiesta utente */
    align-items: start;
    width: 100%;
}

.works-tag-category {
    grid-column: 1 / span 6;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.833rem; /* 10pt, come le voci dell'header */
    text-transform: uppercase;
    color: var(--text-color);
    line-height: 1.2;
}

.works-tag-ambiti {
    grid-column: 7 / span 4;
    display: flex;
    flex-direction: column;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.833rem; /* 10pt, come le voci dell'header */
    text-transform: uppercase;
    color: var(--text-color);
    line-height: 1.2;
}

.works-tag-year {
    grid-column: 11 / span 2;
    justify-self: end;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.833rem; /* 10pt, come le voci dell'header */
    text-transform: uppercase;
    color: var(--text-color);
    line-height: 1.2;
}

.works-project-tags.is-footer {
    margin-top: 10px; /* Spazio dal box uguale a quello dei primi tag */
}

.works-project-tags.is-footer .works-tag-category {
    grid-column: 1 / span 4; /* I nomi occupano fino alla quarta colonna, poi vanno a capo */
}

.works-project-tags.is-footer .works-tag-category,
.works-project-tags.is-footer .works-tag-ambiti {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.0; /* Ridotto di 2pt (da 1.2 a 1.0) */
}

.works-project-tags.is-footer .works-tag-year {
    line-height: 1.0; /* Ridotto di 2pt anche per l'anno */
}

.works-tag-details {
    text-transform: uppercase; /* Tutto in caps */
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.0; /* Ridotto di 2pt (da 1.2 a 1.0) */
}

/* Link social in footer */
.works-tag-details-link {
    text-decoration: underline;
    color: inherit;
    transition: color 0.2s ease-in-out;
}

.works-tag-details-link:hover {
    color: #FF6E2B; /* Diventa arancione al mousehover */
}

@media (max-width: 768px) {
    .works-project-tags.is-footer {
        margin-top: 10px;
    }
    .works-project-tags.is-footer .works-tag-category {
        grid-column: 1 / span 2; /* Su mobile occupa tutta la larghezza per non comprimere */
    }
}

.slideshow-box {
    position: relative;
}

.slideshow-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.slideshow-box img.active {
    opacity: 1;
    z-index: 2;
}

.works-project-gifs-container {
    background-color: #F9F7FC !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around; /* Equidistanziate tra loro */
    padding: 40px var(--grid-margin);
    height: auto !important; /* Sovrascrive l'altezza fissa */
    width: 100%;
    margin-top: 10px;
}

.works-project-gifs-container img {
    width: 13%; /* Circa 13% per ciascuna, lasciando spazio tra loro */
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .works-project-gifs-container {
        overflow-x: auto;
        justify-content: flex-start; /* Allineamento a sinistra per consentire lo scroll */
        gap: 20px;
        padding: 30px var(--grid-margin);
        scrollbar-width: none; /* Nasconde la scrollbar su Firefox */
        -ms-overflow-style: none; /* Nasconde la scrollbar su IE/Edge */
    }
    .works-project-gifs-container::-webkit-scrollbar {
        display: none; /* Nasconde la scrollbar su Chrome/Safari */
    }
    .works-project-gifs-container img {
        width: 100px; /* Dimensione ideale su mobile per lo scroll orizzontale swipable */
    }
}

.works-project-image {
    grid-column: 7 / span 6;
    height: 450px;
    background-color: #1A1A1A; /* Placeholder nero/scuro per ora */
    overflow: hidden;
}

.works-project-image img,
.works-project-image video,
.works-project-image iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

.works-project-description {
    width: 100%;
}

.works-project-description p {
    font-family: var(--font-base);
    font-weight: 500;
    /* 25pt con interlinea di 25pt -> line-height: 1 */
    font-size: clamp(1.2rem, 2.5vw, 2.083rem); 
    line-height: 1;
    color: var(--text-color);
}

.works-project-images {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    margin-top: 10px; /* Aumentato a 10px per richiesta utente */
}

/* Solo la prima galleria o box grande che segue direttamente la descrizione principale ha il margine aumentato a 40px (+30px) */
.works-project-description + .works-project-images,
.works-project-description + .works-project-image-full {
    margin-top: 40px;
}

.works-project-image-half {
    grid-column: span 6;
    height: 450px;
    background-color: #1A1A1A;
    overflow: hidden;
}

.works-project-image-half img,
.works-project-image-half video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-project-subdescription {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    margin-top: 40px; /* Aumentato di 30px (da 10px a 40px) */
    width: 100%;
}

.works-project-subdescription p {
    grid-column: 3 / -1; /* Parte dalla colonna 3 e va fino alla fine (colonna 12) */
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(1.2rem, 2.5vw, 2.083rem); 
    line-height: 1;
    color: var(--text-color);
}

.works-project-image-full {
    width: 100%;
    height: 900px; /* 2 * 450px (proporzionale a 6 colonne di larghezza) */
    background-color: #1A1A1A;
    overflow: hidden;
    margin-top: 10px; /* Aumentato a 10px per richiesta utente */
}

.works-project-image-full img,
.works-project-image-full video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-project-image-full.is-adapted {
    height: auto !important; /* L'altezza si adatta proporzionalmente per non tagliare l'immagine */
    background-color: transparent !important; /* Rimuove lo sfondo scuro che crea la striscia */
}

.works-project-image-full.is-adapted img {
    display: block; /* Elimina il gap inferiore causato dall'allineamento baseline di default */
    height: auto !important;
    object-fit: contain !important;
}

/* Responsiveness Works Project */
@media (max-width: 1024px) {
    .works-project-top {
        grid-template-columns: repeat(8, 1fr);
    }
    .works-project-info {
        grid-column: 1 / span 4;
    }
    .works-project-image {
        grid-column: 5 / span 4;
        height: 350px;
    }
    .works-project-image-half {
        grid-column: span 4;
        height: 350px;
    }
    .works-tag-category {
        grid-column: 1 / span 4;
    }
    .works-tag-ambiti {
        grid-column: 5 / span 3;
    }
    .works-tag-year {
        grid-column: 8;
        justify-self: end;
    }
    .works-project-image-full {
        height: 700px; /* 2 * 350px */
    }
}

@media (max-width: 768px) {
    .works-content { margin-top: 30px; }
    .works-project {
        margin-bottom: 140px;
    }
    .works-popup-container {
        padding-bottom: 140px;
    }
    .works-project-top {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .works-project-info {
        gap: 30px;
    }
    .works-project-image {
        height: auto;
        width: 100%;
    }
    .works-project-images {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Aumentato a 10px per coerenza */
        margin-top: 10px; /* Aumentato a 10px per richiesta utente */
    }
    .works-project-description + .works-project-images {
        margin-top: 40px;
    }
    .works-project-image-half {
        height: auto;
        width: 100%;
    }
    .works-project-tags {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 15px;
        column-gap: var(--grid-gutter);
        margin-top: 10px;
    }
    .works-tag-category {
        grid-column: 1;
        grid-row: 1;
    }
    .works-tag-year {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }
    .works-tag-ambiti {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
    .works-project-subdescription p {
        grid-column: 1 / -1;
    }
    .works-project-image-full {
        height: auto;
    }
    .works-project-title {
        margin-top: 0;
    }

    /* Mobile media responsiveness - show full content without cropping */
    .works-project-image img,
    .works-project-image video,
    .works-project-image-half img,
    .works-project-image-half video,
    .works-project-image-full img,
    .works-project-image-full video {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .works-project-image iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .slideshow-box {
        aspect-ratio: 3 / 2;
    }
    .slideshow-box img {
        height: 100% !important;
        object-fit: cover !important;
    }
}
/* ==========================================================================
   MAIN LAYOUT & HERO PLACEHOLDER
   ========================================================================== */

.main-content {
    flex-grow: 1; /* Il flex layout del body spinge naturalmente il footer in fondo */
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10; /* Sempre sopra la floating gallery (z-index: 5) */
    pointer-events: none; /* Il container non blocca i click sulla gallery sottostante */
}

/* Ripristina pointer-events per tutti gli elementi interattivi dentro main-content */
.main-content a,
.main-content button,
.main-content input,
.main-content h1,
.main-content h2,
.main-content p {
    pointer-events: auto;
}

.hero-section {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px var(--grid-margin);
    width: 100%;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
}



.hero-title {
    font-family: var(--font-accent);
    /* 
       Desktop: 35pt (46.67px -> 2.917rem) regular.
       Mobile: scalato fluidamente a 1.6rem (~25px) per prevenire l'overflow.
    */
    font-size: clamp(1.6rem, 3.5vw, 2.917rem); 
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-color);
    max-width: 100%; /* Rimosso il limite per evitare il ritorno a capo forzato su desktop */
    -webkit-font-smoothing: antialiased;
    
    /* Animazione di comparsa iniziale (primo step) */
    opacity: 0;
    animation: fadeInHeadline 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0s;
}

@keyframes fadeInHeadline {
    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .hero-title,
    .about-headline {
        line-height: calc(1.2em - 4pt);
    }
}



/* ==========================================================================
   FOOTER (Monica Battaglia & Copyright)
   ========================================================================== */

.footer {
    position: fixed;
    bottom: var(--grid-margin);
    left: var(--grid-margin);
    right: var(--grid-margin);
    width: calc(100% - (2 * var(--grid-margin)));
    z-index: 250; /* Superiore a quello del pop-up (200) */
    padding-bottom: 0;
    padding-top: 20px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Evita di bloccare click sul resto della pagina */
    
    /* Animazione iniziale sincrona con l'headline */
    opacity: 0;
    animation: fadeInFooter 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0s;
}

@keyframes fadeInFooter {
    to {
        opacity: 1;
    }
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0px; /* Spazio azzerato per unire visivamente firma e copyright come da layout */
    pointer-events: auto; /* Consente l'interazione/selezione del testo */
}

.footer-signature {
    font-family: var(--font-signature);
    /* Reso fluido da 14pt (1.167rem) su mobile a 17pt (1.417rem) su desktop */
    font-size: clamp(1.167rem, 0.48vw + 1.05rem, 1.417rem); 
    font-weight: 400;
    /* Line-height compresso per allineare l'interlinea ed evitare spazi vuoti */
    line-height: 1.05; 
    color: var(--text-color);
}

.footer-copyright {
    font-family: var(--font-base);
    /* Reso fluido da 9pt (0.75rem) su mobile a 11pt (0.917rem) su desktop */
    font-size: clamp(0.75rem, 0.32vw + 0.674rem, 0.917rem);
    font-weight: 400;
    /* 
       Riduciamo l'altezza della riga per spingere la baseline del testo 
       a rispettare esattamente il margine inferiore di 10px.
    */
    line-height: 0.8; 
    color: var(--text-color);
    letter-spacing: -0.01em;
    margin-top: -0.27em; /* Margine proporzionale in em per scalare con la grandezza del testo */
}

/* ==========================================================================
   FLOATING GALLERY (Homepage Interactive)
   ========================================================================== */

.floating-gallery {
    position: fixed;
    inset: 0;
    z-index: 5; /* Sotto .main-content (10), .header (100), .footer (250) */
    pointer-events: none; /* Il container non blocca click sulla pagina */
    overflow: hidden;
    opacity: 1; /* Visibilità e animazione di entrata gestite per-item in JS */
}

.floating-item {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0; /* Impedisce il flash degli elementi non posizionati nell'angolo in alto a sinistra al caricamento */
    pointer-events: auto; /* Ogni item riceve eventi mouse */
    will-change: transform; /* Hint GPU: alloca layer dedicato */
    cursor: pointer; /* Cliccabile: porta al progetto nel popup Works */
    /* Nessuna transition qui: translate + scale gestiti interamente dal loop JS (rAF)
       per evitare conflitti tra CSS animation e JS animation */
}

/* Stato hover: z-index elevato per stare sopra gli altri durante l'hover */
.floating-item:hover {
    z-index: 20; /* Sale sopra gli altri item della gallery durante l'hover */
}

/* Immagine reale: riempie completamente il placeholder colorato */
.floating-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Evita che l'img rubi mouseenter/mouseleave al div padre */
    user-select: none;
    -webkit-user-drag: none;
}


/* ==========================================================================
   FIGMA GRID OVERLAY HELPER (Visualizza colonne per allineamento)
   ========================================================================== */

.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permette il click sugli elementi sottostanti */
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.grid-overlay.active {
    opacity: 1;
}

.grid-overlay-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    padding: var(--grid-margin); /* Allineato al padding del body */
    width: 100%;
    height: 100%;
}

.grid-overlay-col {
    background-color: var(--grid-overlay-color);
    border-left: 1px solid var(--grid-line-color);
    border-right: 1px solid var(--grid-line-color);
    height: 100%;
}

/* Responsive grid helper columns hiding */
@media (max-width: 1024px) {
    .grid-overlay-col:nth-child(n+9) {
        display: none;
    }
}

@media (max-width: 768px) {
    .grid-overlay-col:nth-child(n+5) {
        display: none;
    }
}



/* ==========================================================================
   CUSTOM CURSOR (Desktop Only)
   ========================================================================== */

.custom-cursor {
    display: none;
}

@media (pointer: fine) {
    .custom-cursor {
        display: block;
        width: 10px;
        height: 10px;
        background-color: #000000;
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 99999;
        will-change: transform;
        transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
    }

    /* Nasconde il cursore di default del browser su tutti gli elementi interattivi */
    html, body, a, button, input, textarea, select, [role="button"] {
        cursor: none !important;
    }

    /* Effetto 'difference' quando passa sopra elementi cliccabili */
    .custom-cursor.hovered {
        background-color: #ffffff; /* Diventa bianco in modo che con difference inverta i colori sottostanti */
        mix-blend-mode: difference;
        width: 14px; /* Lo ingrandiamo leggermente per feedback */
        height: 14px;
    }
}