/* =========================================
   1. RESET & SETUP
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

@font-face {
    font-family: akzidenz;
    src: url('fonts/AkzidenzGroteskPro-Md.otf') format('opentype');
}

@font-face {
    font-family: 'Alliance';
    src: url('fonts/Alliance-TextRegular.otf') format('opentype');
    font-style: normal;
}

body {
    color: #161616;
    background-color: #fdfdf5;
    overflow-x: hidden;
    font-family: 'akzidenz', sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img,
video {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* =========================================
   2. LOGICA DI LAYOUT
   ========================================= */

/* QUESTA È L'UNICA REGOLA DA RICORDARE.
   Invece di metterla su ogni p o h1, la mettiamo sui blocchi strutturali.
*/
.content-text,
.intro-wrapper,
.hero-content,
.two-columns,
.contact-link,
.tags,
.content-media,
.projects-list .tags,
.white-content,
.img-row,
.caption {
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Tipografia Pulita (Senza Margini Laterali) */
h1,
h2,
h3,
h4,
h5,
h6,
p,
address {
    font-weight: normal;
    padding: 0;
    /* RESET: Non spingono più da soli! */
    z-index: 1;
}

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

/* =========================================
   3. HEADER
   ========================================= */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* L'header fa eccezione perché è fixed */
    padding: 1.5rem 3rem;

    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s ease;
    background: linear-gradient(to bottom, rgba(253, 253, 245, 1) 0%, rgba(253, 253, 245, 0.8) 40%, rgba(253, 253, 245, 0) 100%);
}

#main-header.visible {
    opacity: 1;
    pointer-events: auto;
}

#main-header.scroll-hide {
    transform: translateY(-100%);
}

#main-header * {
    pointer-events: auto;
}

#main-header a {
    font-size: 1.1rem;
    margin-left: 2rem;
    transition: opacity 0.2s ease;
}

#main-header .logo {
    font-weight: 500;
    margin-left: 0;
    font-size: 1.2rem;
}

#main-header a:hover {
    opacity: 0.6;
}

/* =========================================
   4. HOME PAGE
   ========================================= */
.hero {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
}

/* Titolo Hero: deve avere il padding perché non è in un wrapper */
.hero h1 {
    padding-left: 3rem;
    padding-right: 3rem;
    font-size: 1.5rem;
    letter-spacing: 0.05rem;
}

#main-title {
    color: #fdfdf5;
    mix-blend-mode: difference;
    position: relative;
    z-index: 10;
    font-size: clamp(1.7rem, 8vw, 3rem);
    line-height: 4rem;
    letter-spacing: 0.02em;
}


.intro-wrapper {
    min-height: auto;
    /* Rimosso l'obbligo di occupare tutto lo schermo */
    padding-top: 12rem;
    /* Ampio spazio dopo la Hero per dare importanza al testo */
    padding-bottom: 8rem;
    max-width: 1400px;
}

#desc {
    max-width: 70ch;
    /* Lunghezza riga ottimale per la lettura (circa 60-70 caratteri) */
    /* Più grande per un impatto "editorial" */
    line-height: 1.35;
    color: #161616;
    margin-bottom: 0;
}

/* CTA Scroll */
#scroll-cta {
    align-self: center;
    margin-top: 4rem;
    margin-bottom: 4rem;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    border: 1px solid rgba(22, 22, 22, 0.3);
    border-radius: 50px;
    padding: 10px 24px;
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    animation: floating 2.5s ease-in-out infinite 1s;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}


/*body:not(.cinema-mode) #scroll-cta { margin-left: 3rem; }*/

#scroll-cta.visible {
    opacity: 1;
}

#scroll-cta:hover {
    border-color: #161616;
    background-color: rgba(22, 22, 22, 0.05);
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* LISTA PROGETTI */
.projects-list {
    width: 100%;
    padding-bottom: 10vh;
}

.project-item {
    position: relative;
    width: 100%;
    height: 80px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: height;
}

.project-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.project-item.darken video {
    filter: brightness(0.7);
}

.project-item:hover video {
    opacity: 1;
}

.project-content {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.project-content h2 {
    font-size: 1.5rem;
    margin: 0;
    color: #161616;
    transition: color 0.3s ease;
    /* Titoli lista progetti: aggiungiamo padding specifico qui */
    padding-left: 3rem;
    padding-right: 3rem;
}

.project-item:hover h2 {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Tags Home */
.tags {
    display: flex;
    gap: 10px;
    /* Padding gestito dalla regola globale */
    opacity: 0;
    transform: translateY(10px);
    max-height: 0;
    transition: all 0.4s ease;
}

.project-item:hover .tags {
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.5rem;
    max-height: 50px;
}

.tags span,
.hero-tags span {
    font-family: 'akzidenz';
    font-size: 0.9rem;
    border-radius: 50px;
    padding: 2px 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.project-item:hover .tags span {
    color: #fff;
}


/* =========================================
   5. PAGINE PROGETTO (CINEMA MODE)
   ========================================= */

body.cinema-mode {
    background-color: #0a0a0a;
    color: #f0f0f0;

}

body.cinema-mode .caption {
    color: rgba(255, 255, 255, 0.5);
    /* Bianco semitrasparente */
}

body.cinema-mode #main-header a {
    color: #ffffff;
}

body.cinema-mode #main-header {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

body.cinema-mode #main-header.solid-bg {
    background-color: transparent;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}



/* Hero Progetto */
.immersive-hero {
    position: relative;
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    padding-bottom: 4rem;
}

.hero-bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.8;
}

/* Contenitore Logo e Tag */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    width: 100%;
    /* Padding gestito dalla regola globale */
}

.project-logo {
    display: block;
    margin: 0 0 2rem 0;
    height: auto;
    max-width: 30rem;
    height: auto;
}

.hero-tags {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-tags span {
    font-size: 0.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 16px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
}

/* Corpo Progetto */
.project-body {
    /*padding-top: 6rem;*/
    width: 100%;
}

.content-media {
    padding-left: 3rem;
    padding-right: 3rem;
}

.content-media img,
.content-media video {
    width: 100%;
    height: auto;
    display: block;
}


.content-text {
    padding-top: 6rem;
    margin-bottom: 6rem;
    max-width: 75%;
    /* Padding gestito dalla regola globale */
}

.content-text h3 {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.content-text p {
    color: #ccc;
    font-size: 1.5rem;
    line-height: 1.6;
}

/* --- METADATI PROGETTO (Anno, Team, ecc.) --- */
.project-meta {
    display: flex;
    gap: 3rem;
    /* Spazio tra Anno e Team */
    margin-top: 1.5rem;
    /* Spazio dal paragrafo sopra */

    font-size: 0.9rem;
    /* Dimensione identica ai tag esistenti */
    font-family: 'akzidenz', sans-serif;
    line-height: 1.5;
}

.meta-item {
    display: flex;
    gap: 0.5rem;
    /* Spazio tra etichetta e valore */
}

.meta-label {
    color: #666;
    /* Grigio scuro per l'etichetta (es. "Anno") */
    text-transform: uppercase;
    font-size: 0.75rem;
    /* Leggermente più piccolo per gerarchia */
    letter-spacing: 0.05em;
    padding-top: 2px;
    /* Micro-aggiustamento ottico */
}

.meta-value {
    color: #fff;
    /* Bianco per il dato importante (es. "2024") */
}

/* Adattamento Mobile (copia la logica esistente del tuo CSS) */
@media (max-width: 768px) {
    .project-meta {
        flex-direction: column;
        /* Su mobile vanno a capo uno sotto l'altro */
        gap: 0.5rem;
    }
}

/* Due Colonne */
.two-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4rem;
    padding-bottom: 6rem;
    width: 100%;
    /* Padding gestito dalla regola globale */
}

.col {
    flex: 1;
    min-width: 300px;
}

.col img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1px;
}

/* Sezione Bianca */
.section-white {
    background-color: #fdfdf5;
    color: #161616;
    width: 100%;
    padding-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.img-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4rem;
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 6rem;
}

.img-row img {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* =========================================
   6. NAVIGAZIONE NEXT PROJECT
   ========================================= */
.next-project-wrapper {
    width: 100%;
    padding-top: 8rem;
    /* Distanza dal video */
    padding-bottom: 6rem;
    /* Distanza dal fondo pagina */

    /* Usa le stesse spaziature laterali del resto del sito */
    padding-left: 3rem;
    padding-right: 3rem;

    display: flex;
    justify-content: flex-end;
    /* Allinea tutto a destra (senso di avanzamento) */
}

.next-project-link {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Testo allineato a destra */
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.next-project-link:hover {
    opacity: 0.7;
}

.np-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
    /* Leggermente trasparente */
}

.np-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.np-title {
    font-size: 2rem;
    /* Titolo grande */
    font-family: 'akzidenz', sans-serif;
    line-height: 1;
    margin: 0;
}

.np-arrow {
    /* Ruotiamo la freccia di -90 gradi per farla puntare a DESTRA */
    transform: rotate(-90deg);

    /* Centramento ottico rispetto al titolo */
    display: flex;
    align-items: center;
    position: relative;
    top: 4px;
    /* Aggiusta questo valore se la senti troppo alta/bassa */

    transition: transform 0.3s ease;
}

/* Animazione all'hover */
.next-project-link:hover .np-arrow {
    /* TRUCCO MATEMATICO:
       Poiché l'abbiamo ruotata, gli assi si sono invertiti.
       Per muoverla a "Destra" visivamente, dobbiamo muoverla "Giù" (translateY)
       rispetto al suo orientamento originale.
    */
    transform: rotate(-90deg) translateY(10px);
}


/* ADATTAMENTO MOBILE */
@media (max-width: 768px) {
    .next-project-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        justify-content: flex-start;
        /* Su mobile meglio a sinistra */
    }

    .next-project-link {
        align-items: flex-start;
    }

    .np-title {
        font-size: 2rem;
    }

    .np-arrow {
        font-size: 2rem;
    }
}

/* Allineamento */

/* =========================================
   7. CONTATTI
   ========================================= */
.contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    z-index: 10;
    padding-top: 20vh;
}

.contact-list {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-link {
    font-size: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    transition: all 0.3s ease;
    /* Padding gestito dalla regola globale */
}

.contact-link .label {
    font-size: 1rem;
    opacity: 0.5;
    min-width: 100px;
}

.contact-link .value {
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.contact-link:hover {
    opacity: 0.7;
    transform: translateX(10px);
}

.contact-link:hover .value {
    border-bottom: 1px solid #161616;
}

/* =========================================
   8. RESPONSIVE (GESTIONE CENTRALIZZATA)
   ========================================= */
@media (max-width: 768px) {
    body {
        font-size: 1.2rem;
    }

    /* Qui avviene la magia: cambiamo il valore in UN solo posto per tutti */
    .content-text,
    .intro-wrapper,
    .hero-content,
    .two-columns,
    .content-media-full,
    .contact-link,
    .tags,
    .projects-list .tags,
    #main-header,
    .hero h1,
    .project-content h2,
    body:not(.cinema-mode) #scroll-cta,
    .white-content,
    .content-media

    /*.white-content h3,
    .white-content p,
    .white-content .two-columns*/
        {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Adattamenti specifici */
    #scroll-cta {
        margin-left: 1.5rem;
    }

    .project-logo {
        max-width: 250px;
    }

    .hero-tags {
        gap: 0.5rem;
    }

    .hero-tags span {
        font-size: 0.8rem;
        padding: 4px 12px;
    }

    .contact-link {
        flex-direction: column;
        gap: 0.2rem;
    }

    .project-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .content-text {
        max-width: 100%;
        /* Sblocca il limite di 900px */
    }

    .section-white {
        padding-left: 0rem;
        padding-right: 0rem;
    }

    .img-row {
        /* Importante: NON usiamo flex-wrap, così non vanno a capo. */
        flex-wrap: nowrap;

        /* Riduciamo il gap solo su mobile, altrimenti 4rem (64px) 
           spingerebbero i loghi fuori dallo schermo su telefoni piccoli.
           Restano comunque affiancati. */
        gap: 1.5rem;

    }

}

.caption {
    font-family: 'akzidenz', sans-serif;
    font-size: 0.9rem;
    color: #666666;
    margin-top: 2rem;
    /* Distanza dall'immagine */
    margin-bottom: 3rem;
    /* Distanza dal blocco successivo */
    display: block;
    /* Occupa la sua riga */
    line-height: 1.4;
}


/* =========================================
   CAROSELLO AUTOMATICO
   ========================================= */

/* Usa gli stessi padding del resto del sito grazie a .content-media, 
   ma aggiungiamo margine verticale */
.carousel-section {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.carousel-wrapper {
    display: grid;
    /* Definisce un'unica area dove impilare tutto */
    grid-template-areas: "stack";
    width: 100%;
    overflow: hidden;
}

.c-slide {
    /* Tutte le immagini occupano lo stesso spazio 'stack' */
    grid-area: stack;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* O 'contain' se non vuoi tagliarle */

    opacity: 0;
    /*transition: opacity 1s ease-in-out;*/
    z-index: 1;
}

.c-slide.active {
    opacity: 1;
    z-index: 2;
}


/* --- COMPARISON SLIDER STYLES FIXED --- */
.comparison-container {
    position: relative;
    width: 100%;
    /* Altezza definita dall'immagine base */
    line-height: 0;
    /* Rimuove spazi bianchi strani sotto le immagini */
    margin-top: 4rem;
    cursor: ew-resize;
    overflow: hidden;
    /* Impedisce la selezione del testo e delle immagini */
    user-select: none;
    -webkit-user-select: none;
}

.comparison-container img {
    /* FONDAMENTALE: Disabilita il drag & drop nativo del browser */
    pointer-events: none;
    -webkit-user-drag: none;

    /* Assicura che le immagini riempiano lo spazio */
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Taglia l'immagine se necessario per riempire */
}

/* Immagine Base (Sotto) */
.comparison-container .img-comp-base {
    width: 100%;
    height: auto;
}

/* Contenitore Overlay (Sopra) */
.comparison-container .img-comp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    /* Inizialmente a metà */
    height: 100%;
    overflow: hidden;
    /* Nasconde la parte eccedente */
    border-right: 2px solid #fff;
    z-index: 2;
    will-change: width;
    /* Ottimizza le prestazioni */
}

/* Immagine dentro l'Overlay */
.comparison-container .img-comp-overlay img {
    position: absolute;
    top: 0;
    left: 0;
    /* La larghezza verrà forzata via JS per essere identica al contenitore padre */
    height: 100%;
    max-width: none;
    /* Importante per evitare che si adatti al div tagliato */
}

/* Maniglia */
.comp-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    /* I click passano attraverso */
}

.comp-handle svg {
    width: 20px;
    height: 20px;
    color: #333;
}

.project-content h2 span {
    color: rgba(107, 107, 107, 0.5);
    /* Nero al 50% di opacità */
    font-weight: normal;
    /* Opzionale: lo rende meno "grassetto" */
    margin-left: 1rem;
}

/* Effetto Hover: quando passi sul progetto, diventa tutto bianco */
.project-item:hover h2 span {
    color: rgba(255, 255, 255, 0.7);
    /* Bianco leggermente trasparente */
}


/* =========================================
   WORK IN PROGRESS - GHOST MODE
   ========================================= */

/* 1. Cursore e Layout Base */
.project-item.wip {
    cursor: not-allowed;
    /* Il mouse diventa un cerchio sbarrato */
    /* Oppure usa: cursor: progress; per una clessidra/rotellina */
}

/* 2. Gestione Video "Fantasma" */
/* Quando passi sopra, il video si vede ma resta "spento" (Grigio e Opaco) */
.project-item.wip:hover video {
    opacity: 0.5 !important;
    /* Meno luminoso degli altri */
    filter: grayscale(100%);
    /* Completamente in bianco e nero */
    /* Se vuoi un effetto seppia, usa: filter: sepia(100%); */
}

/* 3. Gestione Titolo */
/* Il titolo non diventa bianco puro, resta grigetto per indicare inattività */
.project-item.wip:hover h2 {
    color: #999999;
    text-shadow: none;
    /* Rimuove l'ombra luminosa degli altri progetti */
}

.project-item.wip:hover h2 span {
    color: #666666;
    /* Sottotitolo più scuro */
}

/* 4. Scambio Tags -> Coming Soon */
/* Nascondiamo i tag originali all'hover */
.project-item.wip:hover .tags .tag-original {
    display: none;
}

/* Stile dell'etichetta COMING SOON - VERSIONE AD ALTO CONTRASTO */
.tag-wip {
    display: none;

    /* SFONDO SOLIDO SCURO: Così si legge sempre */
    background-color: #161616 !important;

    /* TESTO BIANCO */
    color: #fdfdf5 !important;

    /* Rimuoviamo il bordo, non serve più */
    border: none;

    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    padding: 6px 16px;
    /* Un po' più di spazio per eleganza */
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 500;

    /* Ombra leggera per staccarlo dallo sfondo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Assicuriamoci che appaia all'hover */
.project-item.wip:hover .tags .tag-wip {
    display: inline-block;
    animation: fadeIn 0.3s ease;
}

/* Mostriamo l'etichetta COMING SOON all'hover */
.project-item.wip:hover .tags .tag-wip {
    display: inline-block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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



#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}


.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


.selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}