@font-face { font-family: 'Open Sauce One'; src: url('open-sauce.one-regular.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }


:root {
    --vh: 1vh;
    --sec2-title-left: 14vw;
    --sec2-title-right: 4vw;
    --sec2-list-left: 4vw;
    --sec2-list-right: 12vw;


    --panel:         #ebebeb;
    --text:          #252422;
    --text-dim:      #403d39;
    --amber:         #5271ff;
}

* {
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    margin: 0px;
    line-height: 1.4;
    font-family: 'Open Sauce One', sans-serif;
    background-color: #ebebeb;
}

.container {
    width: 100%;
    height: 100%;

}

.section {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;

}







.nav {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    padding: 1.6rem 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.navtitolo {
    font-family: 'Open Sauce One', sans-serif;
    font-weight: 800;
    letter-spacing: 0.01em;
    font-size: clamp(1rem, 0.85rem + 0.5vw, 2rem);
    color: #111111;
    text-transform: uppercase;
}

.colleg {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 1rem + 2vw, 3rem);
    flex-wrap: wrap;
}

.colleg a {
    font-family: 'Open Sauce One', sans-serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.1rem);
    letter-spacing: 0.01em;
    color: #111111;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    padding: 0.3rem 0.1rem;
    transition: color 0.3s ease;
}

.colleg a:hover,
.colleg a.active {
    color: var(--amber);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 20;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #111111;
    border-radius: 2px;
    transition: transform 0.3s var(--aww-ease, ease);
}

.nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 760px) {
    .nav {
        padding: 0.9rem 5vw;
        justify-content: space-between;
    }
    .nav-toggle {
        display: flex;
    }
    .colleg {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
        padding: 1.4rem 0 1.8rem;
        background-color: var(--panel);
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        z-index: 15;
    }
    .colleg.open {
        display: flex;
    }
}





.section-hero2 {
    display: flex;
    flex-direction: column;
    background-color: var(--panel);
}

.sez1 {
    width: 100%;
    flex-shrink: 0;
    height: 34%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
    padding: 0 4vw;
}



.logo {

    margin: 0;
    flex-shrink: 0;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin-top: 17vh;
    font-size: clamp(2.75rem, 1rem + 9vw, 12rem);
    line-height: 1;
    color: #111111;
}

.p1 {
    margin: 0;
    margin-top: 18vh;
    text-align: right;
    font-weight: 400;
    color: #111111;
    font-size: clamp(0.9rem, 0.55rem + 1vw, 2rem);
    max-width: 45ch;
    line-height: 1.3;
}

.linea {
    width: 100%;
    flex-shrink: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.5);



    margin-top: 0vh; 
    margin-bottom: 4vh;
}



.linea-interna {
    display: none;
}

.img {
    width: 100%;
    flex: 1;
    min-height: 0;
    background-image: url(1.jpg);
    background-size: cover;
    background-position: center 60%;
}

@media (max-width: 760px) {
    .sez1 {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding: 3.5vh 6vw;
    }
    .logo {
        margin-top: 0;
        font-size: clamp(2.25rem, 1.5rem + 10vw, 4rem);
    }
    .p1 {
        margin-top: 0;
        max-width: 100%;
        text-align: left;
        font-size: clamp(0.85rem, 0.6rem + 1.4vw, 1rem);
    }
    .linea-interna {
        display: block;
        width: 100%;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.5);

        margin: 1.2rem 0;
    }
}



.logo,
.p1 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--aww-ease, ease), transform 1s var(--aww-ease, ease);
}

.linea {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--aww-ease, ease);
}

.img {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 1.2s var(--aww-ease, ease);
}

.section.in-view .logo,
.section.in-view .p1 {
    opacity: 1;
    transform: translateY(0);
}

.section.in-view .linea {
    transform: scaleX(1);
}

.section.in-view .img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.section-hero2.in-view .logo { transition-delay: 0.1s; }
.section-hero2.in-view .p1 { transition-delay: 0.3s; }
.section-hero2.in-view .linea { transition-delay: 0.5s; }
.section-hero2.in-view .img { transition-delay: 0.6s; }







#cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(82, 113, 255, 0.55) 0%,
        rgba(82, 113, 255, 0.28) 45%,
        rgba(82, 113, 255, 0) 78%
    );
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform;
}





.section-new {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.part2-s {
    width: 50%;
    height: 100%;
}

.part2img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.part2-d {
    width: 50%;
    height: 100%;
    position: relative; 
}

.part2-1 {
    position: absolute;
    top: 15vh;
    left: 0;
    width: 100%;
    padding-right: 7vw; 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.part2titolo {
    margin: 0;
    text-align: right;
    font-weight: 800;
    font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem);
    line-height: 90%;
    letter-spacing: -0.05em;
}

.linea {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.603);
    margin-top: 15px; 
}

.part2-2 {
    position: absolute;
    top: 30vh;
    left: 0;
    width: 100%;
    padding-right: 7vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
}

.p3 {
    margin: 0;
    text-align: right;
    font-weight: 400;
    font-size: clamp(0.95rem, 0.6rem + 0.8vw, 2rem);
    max-width: 45ch; 
}




@media (max-width: 1024px) {
    /* Sec 4 */
    .section-new {
        flex-direction: column-reverse;
    }
    .part2-s {
        width: 100%;
        height: 40%; 
    }
    .part2-d {
        width: 100%;
        height: 60%;
        display: flex;
        flex-direction: column;
        padding: 5vh 8vw 5vh 8vw;
    }
    .part2-1 {
        position: static;
        width: 100%;
        padding-right: 0;
        align-items: flex-start; 
    }
    .part2titolo {
        font-size: clamp(1.5rem, 1.2rem + 3vw, 2.2rem);
        text-align: left; 
    }
    .section-new .linea {
        width: 100%; 
        margin-top: 10px;
    }
    .part2-2 {
        position: static;
        width: 100%;
        padding-right: 0;
        margin-top: 3vh; 
        align-items: flex-start; 
    }
    .p3 {
        font-size: clamp(0.85rem, 0.6rem + 1.2vw, 1rem);
        max-width: 100%;
        text-align: left; 
    }



    
}




@media (max-width: 760px) {

    /* Sec 4 */
    /* Sec 4 */
    .section-new {
        flex-direction: column-reverse;
    }
    .part2-s {
        width: 100%;
        height: 40%; 
    }
    .part2-d {
        width: 100%;
        height: 60%;
        display: flex;
        flex-direction: column;
        padding: 5vh 8vw 5vh 8vw;
    }
    .part2-1 {
        position: static;
        width: 100%;
        padding-right: 0;
        align-items: flex-start;
    }
    .part2titolo {
        font-size: clamp(1.5rem, 1.2rem + 3vw, 2.2rem);
        text-align: left;
    }
    .linea {
        width: 100%; 
        margin-top: 10px;
    }
    .part2-2 {
        position: static;
        width: 100%;
        padding-right: 0;
        margin-top: 3vh; 
        align-items: flex-start;
    }
    .p3 {
        font-size: clamp(0.85rem, 0.6rem + 1.2vw, 1rem);
        max-width: 100%;
        text-align: left;
    }
}






/*Sezione 2 */

.part3 {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}



.lineaor {
    position: absolute;
    top: 5%; 
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 0;
}

.lineave {
    position: absolute;
    bottom: 0;
    top: 5%;
    left: 3%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.rettangolo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3%;
    height: 30%;
    background-color: #5271ff;
    z-index: 0;
}







.part3-1 {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    padding-left: var(--sec2-title-left);
    padding-right: var(--sec2-title-right);
}

.part3-1 h2 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem);
}


.cerchio {

    position: relative;
    display: inline-block;
    z-index: 1;
}

.cerchio::before {
  content: "";
  position: absolute;
  top: -50px; 
  bottom: -50px;
  left: -20px;
  right: -40px;
  z-index: -1;
  background-color: #5271ff;
  -webkit-mask-image: url('cerchio.svg');
  mask-image: url('cerchio.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.part3-1 .p2 {
    margin: 0;
    font-weight: 400;
    font-size: clamp(0.95rem, 0.6rem + 0.8vw, 2rem);
    max-width: 40ch;
}




.part3-2 {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: var(--sec2-list-left);
    padding-right: var(--sec2-list-right);
}


.word-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 26vw;
}

.word-list li {
    font-weight: 400;
    text-align: right;
    font-size: clamp(1.5rem, 0.6rem + 3.6vw, 3.4rem);
    padding: 0.35em 0;
    cursor: default;
    transform-origin: right center;

}

.word-list li:hover {
    color: #5271ff;
    transform: scale(1.5) !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
}

.word-list li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1200px){
    .word-list li{
        font-weight: 400;
        text-align: right;
        font-size: clamp(1.3rem, 0.6rem + 3.6vw, 3.4rem);
        padding: 0.35em 0;
        cursor: default;
        transform-origin: right center;
    }
    .word-list li:hover {
        color: #5271ff;
        transform: scale(1.2) !important;
    }
    .word-list li:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
  }






/* */
.part4 {
    position: relative;
    width: 100%;
    height: 100%;
}




.part4-img {
    position: absolute;
    top: 0;
    left: 2%;
    right: 2%;
    width: 96%;
    height: 70%;
    object-fit: cover;
    display: block;
}

.frase {
    position: absolute;
    top: 78%;
    left: 4%;
    right: 4%;
    margin: 0;
    color: var(--text);
    font-size: clamp(1.9rem, 1rem + 2.6vw, 5rem);
    line-height: 1;
}

.linea2 {
    position: absolute;
    top: 73%;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.5);
}


.virg {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.virg::before {
  content: "";
  position: absolute;
  top: -50px; 
  bottom: -50px;
  left: -20px;
  right: -40px;
  z-index: -1;
  background-color: #5271ff;
  -webkit-mask-image: url('virgolette.svg');
  mask-image: url('virgolette.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}








@media (max-width: 1024px) {
    /* sez1*/
    .section-hero2 {
        height: auto !important;
        min-height: auto !important;
    }

    .sez1 {
        height: auto;
        padding-top: 8vh;
        padding-bottom: 4vh;
    }

    .logo, .p1 {
        margin-top: 0;
    }

    .section-hero2 .img {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    
    
    /* Sec 3*/
    .part3 {
        flex-direction: column;
    }
    
    .part3-1 {
        width: 100%;
        height: 45%; 
        align-items: center;
        padding: 5vh 5vw 2vh 5vw;
        gap: 20px;
    }
    
    .part3-1 h2 {
        text-align: center;
    }
    
    .part3-1 .p2 {
        text-align: center;
        max-width: 100%;
    }
    
    .part3-2 {
        width: 100%;
        height: 55%;
        padding: 2vh 0 5vh 0;
        align-items: center;
        justify-content: center;
    }
    
    .word-list {
        max-width: 100%;
        width: 100%;
    }
    
    .word-list li {
        text-align: center;
        transform-origin: center center;
        padding: 0.5em 0; 
    }





    /*sez4*/

    .section-info {
        height: auto;
        min-height: auto;
        padding: 10vh 0;
    }
    .part4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .part4-img {
        position: static;
        width: 96%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    .linea2 {
        position: static; 
        width: 92%;
        margin: 4vh 0 2vh 0;
    }
    
    .frase {
        position: static;
        width: 92%;
        text-align: center;
    }
}








:root {
    --aww-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.part3-1 h2, .p2, .part2titolo, .p2 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--aww-ease), transform 1s var(--aww-ease);
}
.word-list li {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s var(--aww-ease), transform 0.8s var(--aww-ease);
}



.lineaor, .linea {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--aww-ease);
}


.lineave, .sec3-line-v {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s var(--aww-ease);
}





.rettangolo {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 1s var(--aww-ease);
}


.part2, .part4-img, .part2img {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 1.2s var(--aww-ease);
}


.frase {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--aww-ease), transform 1s var(--aww-ease);
}



.section.in-view .part3-1 h2,
.section.in-view .p2,
.section.in-view .sec3-title,
.section.in-view .part2titolo,
.section.in-view .p2 {
    opacity: 1;
    transform: translateY(0);
}
.section.in-view .word-list li {
    opacity: 1;
    transform: translateX(0);
}

.section.in-view .lineaor,
.section.in-view .linea,
.section.in-view .lineave,
.section.in-view .sec3-line-v,
.section.in-view .rettangolo {
    transform: scaleX(1) scaleY(1);
}


.section.in-view .part2,
.section.in-view .part4-img,
.section.in-view .part2img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.section.in-view .frase {
    opacity: 1;
    transform: translateY(0);
}


/* Sezione 1 */
.section-hero.in-view .p1 { transition-delay: 0.2s; }

/* Sezione 2 */
.section-content.in-view .lineaor { transition-delay: 0.1s; }
.section-content.in-view .lineave { transition-delay: 0.3s; }
.section-content.in-view .rettangolo { transition-delay: 0.5s; }
.section-content.in-view .part3-1 h2 { transition-delay: 0.2s; }
.section-content.in-view .p2 { transition-delay: 0.4s; }

.section-content.in-view .word-list li:nth-child(1) { transition-delay: 0.2s; }
.section-content.in-view .word-list li:nth-child(2) { transition-delay: 0.3s; }
.section-content.in-view .word-list li:nth-child(3) { transition-delay: 0.4s; }
.section-content.in-view .word-list li:nth-child(4) { transition-delay: 0.5s; }
.section-content.in-view .word-list li:nth-child(5) { transition-delay: 0.6s; }
.section-content.in-view .word-list li:nth-child(6) { transition-delay: 0.7s; }

/* Sezione 3 */
.section-info.in-view .part4-img { transition-delay: 0.6s; }
.section-info.in-view .frase { transition-delay: 0.8s; }

/* Sezione 4 */
.section-new.in-view .part2-s { transition-delay: 0.1s; }
.section-new.in-view .part2titolo { transition-delay: 0.3s; }
.section-new.in-view .linea { transition-delay: 0.4s; }
.section-new.in-view .p2:nth-child(1) { transition-delay: 0.5s; }
.section-new.in-view .p2:nth-child(2) { transition-delay: 0.6s; }
.section-new.in-view .p2:nth-child(3) { transition-delay: 0.7s; }
.section-new.in-view .p2:nth-child(4) { transition-delay: 0.8s; }