/* --- BASE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { 
    background: #000; 
    color: #fff; 
    font-family: 'Bricolage Grotesque', sans-serif; 
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- BACKGROUND --- */
#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #000; }
#bg div { background-size: cover; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 3s ease; }
#bg div.visible { opacity: 1; }

/* --- HEADER --- */
#header { 
    position: fixed; 
    top: 4vh; 
    left: 10%; 
    z-index: 100; 
    pointer-events: none; 
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-name { 
    display: flex; 
    font-size: 3.2rem; 
    text-transform: uppercase; 
    align-items: baseline;
    line-height: 0.2;
}

.sub-brand-group {
    margin-top: 0.4rem;
    display: flex;
    align-items: baseline;
    color: #888888;
    transition: all 1s cubic-bezier(0.2, 1, 0.3, 0.2);
}

.sub-brand-group .word-group { font-size: 3.1rem; }

.word-group { 
    display: flex; 
    align-items: baseline; 
    position: relative;
    margin-right: 0.4rem; 
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.letter { display: inline-block; }
.initial { color: #fff; transition: color 0.6s ease; }
.sub-brand-group .initial { color: #888888; }

.hidden-part {
    display: flex;
    align-items: baseline;
    opacity: 1;
    max-width: 1000px;
    filter: blur(0px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- STATO COMPRESSO --- */
#header.is-compressed .word-group { margin-right: 0.1rem; }
#header.is-compressed .initial { color: #000; }
#header.is-compressed .sub-brand-group .initial { color: #444444; }
#header.is-compressed .hidden-part {
    opacity: 0;
    max-width: 0;
    letter-spacing: -2rem; 
    filter: blur(3px);
    transition: all 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}
#header.is-compressed .sub-brand-group { margin-top: -0.1rem; }

/* --- SEZIONI --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5vh;
    position: relative;
    z-index: 2;
}
.scroll-hint { font-size: 1.2rem; letter-spacing: 2px; opacity: 0.5; text-transform: uppercase; }

/* --- FOOTER / MENU POPUP (Sorgente Originale) --- */
#main-footer {
    position: relative;
    background: rgba(0, 0, 0, 0.8); 
    backdrop-filter: blur(0.3px);   
    z-index: 10;
    padding: 3vh 10%;
    border-top: 1px solid #222;
}

.footer-content { max-width: 450px; margin: 0 auto; }

.enquiry-section h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.enquiry-section p {
    font-size: 0.9rem;
    font-weight: 100;
    opacity: 0.5;
    margin-bottom: 10px;
}

#footer-form input, 
#footer-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-bottom: 0.1px solid #333; 
    color: #fff;
    padding: 10px 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.8rem;
    outline: none;
}

.submit-btn {
    width: 100%;
    padding: 10px;
    background: #fff;
    color: #000;
    border: none;
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 10px;
}

.footer-info { margin-top: 20px; border-top: 0.1px solid #333; padding-top: 10px; }
.footer-email { display: block; color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.75rem; }
.copyright { color: rgba(255, 255, 255, 0.3); font-size: 0.55rem; }

/* --- RESPONSIVE MOBILE --- */
@media screen and (max-width: 736px) {
    #header { left: 5%; top: 3vh; }
    
    /* Uniformo Nicola Bontempi e Architect */
    .brand-name { font-size: 2.2rem; }
    .sub-brand-group .word-group { font-size: 2.2rem; }
    .sub-brand-group { margin-top: 0.1rem; }

    #header.is-compressed .hidden-part {
        letter-spacing: -2rem;
    }

    #main-footer { padding: 5vh 8%; }
}