/* ===== BASE ===== */

html, body {
    margin: 0;
    padding: 0;
    background: #fff;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ===== HEADER ===== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 clamp(20px,6vw,100px);
    background:#fff;
    z-index:1000;
    font-family:'Inconsolata', monospace;
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
}

.logo-symbol img{
    width:110px;
    transition:transform .25s ease;
}

.logo-symbol:hover img{
    transform:translateY(-2px) scale(1.05);
}

.logo-text{
    font-family:'Inconsolata', monospace;
    font-size:16px;
    white-space:nowrap;
    text-decoration:none;
    color:#000;
    position:relative;
    transition:transform .25s ease, letter-spacing .25s ease;
}

.logo{
    font-size:16px;
}

.logo-text::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0%;
    height:1px;
    background:#000;
    transition:width .35s ease;
}

.logo-text:hover::after{
    width:100%;
}

.logo span{
    white-space:nowrap;
}

.menu{
    display:flex;
    gap:clamp(20px,3vw,50px);
    align-items:center;
}

.menu a{
    text-decoration:none;
    color:#000;
    position:relative;
    transition:transform .25s ease, letter-spacing .25s ease;
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0%;
    height:1px;
    background:#000;
    transition:width .35s ease;
}

.menu a:hover::after{
    width:100%;
}

.menu img{
    width:26px;
    transition:transform .35s ease;
}

/* riduzione icona instagram */
.menu img[src="logo_instagram.svg"]{
    width:23px;
}

.menu img[src="logo_instagram.svg"]{
    width:23px;
}

.menu img:hover{
    transform:translateY(-2px) scale(1.08);
}


/* ===== HAMBURGER ===== */

.hamburger{
    display:none;
    width:30px;
    height:30px;
    position:relative;
    cursor:pointer;
}

.hamburger span{
    position:absolute;
    width:26px;
    height:2px;
    background:#000;
    left:2px;
    transition:.3s ease;
}

.hamburger span:nth-child(1){ top:8px; }
.hamburger span:nth-child(2){ top:14px; }
.hamburger span:nth-child(3){ top:20px; }

.hamburger.active span:nth-child(1){
    transform:rotate(45deg);
    top:14px;
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg);
    top:14px;
}


/* ===== MOBILE MENU ===== */

.mobile-close{
    position:absolute;
    top:28px;
    right:32px;
    font-size:38px;
    cursor:pointer;
    opacity:0;
    transform:rotate(-90deg);
    transition:opacity .6s ease, transform .8s cubic-bezier(.4,0,.2,1);
}

.mobile-menu.active .mobile-close{
    opacity:1;
    transform:rotate(0deg);
}

.mobile-close:hover{
    transform:rotate(90deg) scale(1.12);
    transition:transform .6s ease;
}

.mobile-menu{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:40px;
    font-family:'Inconsolata', monospace;
    transform:translateX(100%);
    transition:transform .4s ease;
    z-index:2000;
}

.mobile-menu.active{
    transform:translateX(0);
}

.mobile-menu a{
    font-size:26px;
    color:#000;
    text-decoration:none;
    transition:transform .25s ease, letter-spacing .25s ease;
}

.mobile-menu a:hover{
    transform:translateX(6px);
    letter-spacing:1px;
}

.mobile-menu img{
    width:30px;
    transition:transform .25s ease;
}

/* riduzione icona instagram */
.mobile-menu img[src="logo_instagram.svg"]{
    width:26px;
}

.mobile-menu img:hover{
    transform:translateX(6px);
}


/* ===== HERO ROTATION ===== */

.hero-wrapper{
    margin-top:70px;
}

.stack{
    display:flex;
    flex-direction:column;
    transition:transform 3.6s cubic-bezier(.45,0,.25,1);
}

.section{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.section-inner{
    transform:translateY(-6%);
}

@keyframes subtleChaos{

    0%{
        transform:translateY(-6%) scale(1.04) rotate(0.2deg);
    }

    45%{
        transform:translateY(-6%) scale(1.015);
    }

    100%{
        transform:translateY(-6%) scale(1);
    }

}


/* ===== TYPOGRAPHY ===== */

.quote-wrapper{
    width:42vw;
    margin-left:14vw;
    font-family:'Gloock', serif;
}

.quote-text{
    font-size:clamp(28px,3.2vw,60px);
    line-height:1.1;
}

.author{
    margin-top:2vh;
    font-size:clamp(18px,1.9vw,28px);
    opacity:0;
    transform:translateX(12px);
    transition:opacity 1s ease, transform 1s ease;
}

.author.visible{
    opacity:1;
    transform:translateX(0);
}

/* ===== IMAGES ===== */

.afrodite img{
    width:clamp(260px,25vw,460px);
    animation: bloodPulse 4.5s ease-in-out infinite;
}

@keyframes bloodPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.06);
    }

    100%{
        transform:scale(1);
    }

}

.testa img{
    width:clamp(200px,18vw,340px);
}

.occhio img{
    width:clamp(220px,22vw,380px);
}


/* ===== MOBILE ===== */

@media (max-width:768px){

.menu{
    display:none;
}

.hamburger{
    display:block;
}

/* citazioni */

.quote-wrapper{
    width:88vw;
    margin:0 auto;
    padding:0 6vw;
}

.quote-text{
    font-size:10vw;
}

.author{
    font-size:5.2vw;
}

/* immagini */

.afrodite img,
.occhio img{
    width:70vw;
    max-height:65vh;
    margin:auto;
}

.testa img{
    width:63vw;
    max-height:65vh;
    margin:auto;
}

.section-inner{
    transform:translateY(-6%);
}
    
}

/* ===== MOBILE MENU ENTRY ANIMATION ===== */

.mobile-menu a,
.mobile-menu img{
    opacity:0;
    transform:translateX(-14px);
}

.mobile-menu.active a,
.mobile-menu.active img{
    opacity:1;
    transform:translateX(0);
    transition:opacity .7s ease, transform .7s ease;
}

/* sequenza */

.mobile-menu.active a:nth-of-type(1){ transition-delay:.12s; }
.mobile-menu.active a:nth-of-type(2){ transition-delay:.24s; }
.mobile-menu.active a:nth-of-type(3){ transition-delay:.36s; }
.mobile-menu.active a:nth-of-type(4){ transition-delay:.48s; }
.mobile-menu.active a:nth-of-type(5){ transition-delay:.60s; }

.mobile-menu.active img{ transition-delay:.72s; }


/* ===== CONTACT PAGE ===== */

.contact-page{
max-width:520px;
margin:140px auto;
padding:0 30px;
font-family:'Inconsolata', monospace;
}

@keyframes contactFade{

0%{
opacity:0;
transform:translateY(20px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.contact-page h1{
font-family:'Inconsolata', monospace;
font-size:32px;
margin-bottom:40px;
text-align:left;
}

.contact-page form{
display:flex;
flex-direction:column;
gap:18px;
}

.contact-page input,
.contact-page textarea{
width:100%;
border:1px solid #000;
padding:12px;
font-family:'Inconsolata', monospace;
font-size:16px;
background:#fff;
}

.contact-page textarea{
min-height:140px;
resize:vertical;
}

.contact-page button{
align-self:flex-start;
border:1px solid #000;
background:#fff;
padding:10px 20px;
cursor:pointer;
transition:background .2s ease,color .2s ease;
}

.contact-page button:hover{
background:#000;
color:#fff;
}

/* ===== CONTACT CINEMATIC ENTRY ===== */

.contact-page h1{
opacity:0;
transform:translateY(10px);
animation: contactTitle 1.2s ease forwards;
}

.contact-intro{
opacity:0;
transform:translateY(10px);
animation: contactIntro 1.2s ease forwards;
animation-delay:.35s;
}

.contact-page form{
opacity:0;
transform:translateY(10px);
animation: contactForm 1.2s ease forwards;
animation-delay:.7s;
}

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

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

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


/* ===== PAGE FADE TRANSITION ===== */

.page-transition{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0;
pointer-events:none;
transition:opacity .7s ease;
z-index:5000;
}

.page-transition.active{
opacity:1;
}


/* ===== FILM PAGE ===== */

.film-page{
max-width:900px;
margin:140px auto;
padding:0 30px;
font-family:'Inconsolata', monospace;
}

.film-page h1{
font-size:32px;
margin-bottom:60px;
}

.film-grid{
display:flex;
flex-direction:column;
gap:28px;
}

.film-item{
display:flex;
justify-content:space-between;
border-bottom:1px solid #000;
padding-bottom:8px;
transition:transform .25s ease;
}

.film-item:hover{
transform:translateX(6px);
}

.film-title{
font-size:18px;
}

.film-meta{
font-size:14px;
opacity:.7;
}



/* ===== BIO PAGE ===== */

.bio-page{
max-width:760px;
margin:140px auto;
padding:0 30px;
font-family:'Inconsolata', monospace;
}

.bio-page h1{
font-size:32px;
margin-bottom:40px;
}

.bio-page h2{
margin-top:60px;
margin-bottom:20px;
font-size:20px;
}

.bio-text{
font-size:16px;
line-height:1.7;
max-width:640px;
}

.filmography{
list-style:none;
padding:0;
margin:20px 0 0 0;
display:flex;
flex-direction:column;
gap:10px;
}

.filmography li{
border-bottom:1px solid #000;
padding-bottom:6px;
font-size:15px;
}

.bio-divider{
margin:70px 0;
border:none;
border-top:1px solid #000;
width:60px;
}


/* ===== CONTACT SUCCESS ===== */

.contact-success{
margin-top:30px;
font-family:'Inconsolata', monospace;
font-size:16px;
opacity:0;
transform:translateY(10px);
transition:opacity .6s ease, transform .6s ease;
}

.contact-success.visible{
opacity:1;
transform:translateY(0);
}