@charset "UTF-8";

/* Variabili globali */
:root {
    /* Padding e margini */
    --padding-default: 0.25rem;
    --padding-top: 0.25rem;
    --padding-right: 0.25rem;
    --padding-bottom: 0.25rem;
    --padding-bottom-filetti: calc(0.25rem / 2);
    --padding-left: .25rem;
    --margin-bottom-default: 0.25rem;
    --margin-top-default: 0.25rem;
    --padding-sito: .5rem;

    /* Colori */
    --color-black: #000;
    --color-white: #fff;
    --color-background: #050505;
    --color-gray: rgb(220, 220, 220);
    --color-yellow: yellow;
    --color-border: #000;

    /* Font e tipografia */
    --font-size-base: 1rem;
    --font-size-small: 0.875em;
    --font-size-large: 1.25em;
    --line-height-base: 1.5;

    /* Altezze e larghezze */
    --menu-width: calc(100vw / 8);
    --menu-height: 80vh;
    --project-height: auto;
    --image-width: 100%;
    --image-height: auto;

    /* Transizioni */
    --transition-duration: 0.4s;
    --transition-ease: ease-in-out;

    /* z-index */
    --z-index-header: 5000;
    --z-index-menu: 100;
    --z-index-active-menu: 1000;

    /* Posizionamento */
    --top-header: 0;
    --top-menu: calc(25vh / 2);
    --right-menu: 0;
    --bottom-padding-menu: 0.5rem;
}

/* Font */
@font-face {
    font-family: "baikal";
    src: url(../fonts/Baikal-Medium.otf);
}

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

/* Impostazioni di base */
html, body {
    background-color: var(--color-white);
    font-family: baikal, sans-serif;
    font-size: var(--font-size-base);
}

/* Header */
.header-content {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: var(--padding-sito);
    z-index: var(--z-index-header);
    background-color: var(--color-white);
    text-align: left;
    top: var(--top-header);
}

.header-home{
    width: 25%;
}

.header-navigation{
    width: 25%;
    text-align: right;
    padding-right: var(--padding-right);
}

.header-language{
    width: 50%;
    text-align: right;
}

/* Menu */
.menucontainer {
    top: var(--top-menu);
    position: absolute;
    right: var(--right-menu);
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-self: flex-start;
    z-index: var(--z-index-menu);
    transition: all var(--transition-duration) var(--transition-ease);
}

.menu {
    position: absolute;
    right: var(--right-menu);
    display: flex;
    flex-direction: column;
    padding: var(--padding-sito) var(--padding-sito) var(--padding-bottom) var(--padding-sito);
    width: calc(100% / 8 * 8);
    transition: all var(--transition-duration) var(--transition-ease);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
}

/* Menu attivo con sticky */
.menu-active {
    position: fixed;
    top: var(--top-menu);
    overflow-y: scroll;
    /* right: var(--right-menu); */
    width: calc(100vw/8 * 1 - 0.5rem);
    height: 50vh;
    z-index: var(--z-index-active-menu);
    transition: all var(--transition-duration) var(--transition-ease);
    /* padding-top: var(--padding-top); */
    padding-left: .5rem;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
}

.menu-active img{
    width: calc(100vw/8 * 1);
}

.progetto {
    position: relative; /* Sovrapposto all'immagine */
    top: 0;
    left: 0;
    width: 100%; /* Adatta alla larghezza dell'immagine */
    height: auto;
    display: flex;
    justify-content: left;
    align-items: top;
    text-align: left;
    color: var(--color-white); /* Colore del testo dei progetti */
    opacity: 1; /* Invisibile di default */
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.struttura-titoli {
    width: calc(50% - 5%);
    height: auto;
    position: relative;
}

.immagini img {
    width: var(--image-width); /* Larghezza dell'immagine */
    height: auto; /* Altezza adattata proporzionalmente */
    transition: transform 0.3s ease;
}

.immagini{
    width: 50%;
    transition: all ease-in-out .3s;
}

.titoli {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 5%) , 0);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    color: var(--color-black); /* Colore del testo dei titoli su bianco */
    text-align: left;
    opacity: 1; /* Invisibile di default */
    transition: opacity 0.3s ease;
}

.menu-active .titoli{
    justify-content: left;
}

/* Hover: mostriamo il titolo e manteniamo il colore del testo bianco */
.progetto:hover .titoli {
    color: var(--color-gray);
    opacity: 1; /* Assicura che il colore del testo rimanga bianco */
}

/* Filetto (linea tra i progetti) */
.filetto {
    width: 1.5rem;
    border-top: 1.5px solid var(--color-border);
    height: auto;
    margin: 0;
    right: 0;
    /* padding-bottom: var(--padding-bottom-filetti); */
}

.menu-active .filetto {
    display: none;
}

.menu-active .filettoprimo{
    display: none;
}

.filettoprimo {
    position: sticky;
    top: calc(1rem + 16px);
    width: 1.5rem;
    height: 3px;
    border-top: 1.5px solid var(--color-white);
    background-color: var(--color-black);
    margin-top: 0;
    
}

.numerazione-titoli {
    width: 5%;
    text-align: right;
    color: var(--color-black);
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    opacity: 1;
}


/* Hover effetti */
a {
    text-decoration: none;
    color: inherit; /* Eredita il colore del genitore */
}

/* Assicurarsi che i link nei titoli rimangano bianchi */
.titoli a {
    color: var(--color-white); /* Colore bianco per i link */
}

.progetto:hover .titoli  a {
    color: var(--color-gray);
    opacity: 1;
}

.progetto:hover img{
    opacity: 20%;
    transition: all .3s;
}

.progetto:hover .numerazione-titoli {
    color: var(--color-gray); /* Cambia colore in grigio */
    transition: color 0.3s ease; /* Transizione fluida per il cambiamento del colore */
}

.filetto.hovered {
    border-color: var(--color-gray); /* Cambia il colore del filetto */
    transition: border-color 0.3s ease;
}

.giallo {
    background-color: var(--color-yellow);
}

.fade {
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.fade.visible {
    opacity: 1;
}

.fade.out {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.menu-active .titoli{
    opacity: 1;
    transform: translate(0 , 0);
    top: 0;
    position: relative;
    text-align: left;
    align-items: flex-start;
    left: 0;
    transition: opacity .3s ease-in-out;
}

.menu-active .immagini{
opacity: 1;
width: calc(( 100vw / 8 * 1 ) / 3);
}

.menu-active .progetto{
    height: auto;
    width: auto;
    padding-bottom: var(--padding-bottom);
}

.menu-active .struttura-titoli{
    width: 100%;
    height: auto;
}

.menu-active .numerazione-titoli{
    width: auto;
}

.filettoprimo.hovered {
    background-color: var(--color-gray); /* Colore grigio */
    transition: all .3s;
}


/* .menu-active .immagini:hover {
    width: 150%;
    height: auto;
    transition: all ease-in-out .3s;
} */

.menu a.active-title {
    color: var(--color-gray);
}


.numerazione-titoli h1.active-title {
    color: var(--color-gray);
}

/* Quando la classe .progetto è in hover, solo il rispettivo filetto diventa grigio */
.progetto:hover .filetto {
    border-color: var(--color-gray); /* Cambia il colore del bordo in grigio */
    transition: border-color 0.3s ease; /* Transizione fluida */
}

.filetto.hovered {
    border-color: var(--color-gray); /* Cambia il colore del filetto in grigio */
    transition: border-color 0.3s ease; /* Effetto di transizione sul cambio di colore */
}


/* Quando il body ha la classe body-active, il menu avrà opacity 1 */
body.body-active .menucontainer, 
body.body-active .menu, 
body.body-active .menu a, 
body.body-active .progetto {
    opacity: 1 !important; /* Imposta opacity 1 per tutto il menu */
    transition: none !important; /* Rimuovi la transizione dell'opacità per evitare ritardi */
}

.Alessandro br{
    display: none;
}

@media (max-width: 800px){

    .sezione-storica {

        flex-direction: column;

    }

    .descrizione-progetto {
        width: 100%;
    }

    .contenitore-vignetta {
        width: 100%;
    }

}

@media (max-width: 1000px){

    .piani {
        height: calc(100% - var(--padding-bottom) - .6em);
    }

    .filettodue {
        top: calc(1rem + 12.8px * 3);
        /* margin-left: -5.5vw; */
        width: 1rem;
    }

    .menu-active .struttura-titoli{
        display: none;
    }

    .numerazione-titoli{
        /* width: 100%; */
        padding-right: 1em;
    }

    .menu-active .numerazione-titoli{
        width: 100%;
        padding-right: 0;
    }

    .filetto {
        width: 1rem;
        border-top: 1.5px solid var(--color-border);
        height: auto;
        margin: 0;
        right: 0;
        /* padding-bottom: var(--padding-bottom-filetti); */
    }
    .filettoprimo {
        position: sticky;
        top: calc(1rem + 12.8px * 3);
        width: 1rem;
        height: 3px;
        border-top: 1.5px solid var(--color-white);
        background-color: var(--color-black);
        margin-top: 0;
        
    }

    .Alessandro br{
        display: block;
    }

    .menu-active {
        top: 40vh;
        font-size: 1.2em;
    }
}


@media (max-width: 1400px){
    .menu-active .immagini{
        display: none;
        width: 0;
    }

    .filettodue {
        top: calc(1rem + 12.8px * 3);
        /* margin-left: -5.5vw; */
        width: 1rem;
    }
}


@media (min-width: 1920px){

    .filetto {
        height: 4.5px;
    }

    .filettoprimo {
        top: calc(1rem + 48px * 1);
        height: 4.5px;
    }
    
    .filettodue{
        top: calc(1rem + 48px * 1);
        height: 4.5px;
    }

    }