/*====================================================
 OPERA
 Luxury Italian Wine Collection
====================================================*/

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --black:#060606;
    --gold:#C89D43;
    --gold-light:#E4C97F;
    --white:#F8F8F8;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);

    color:var(--white);

    font-family:'Montserrat',sans-serif;

    overflow-x:hidden;

}


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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:34px 70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:100;

    background:transparent;

}

.logo img{

    width:42px;

    display:block;

}


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

.menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.menu a{

    color:var(--gold);

    text-decoration:none;

    font-size:13px;

    letter-spacing:2px;

    font-weight:300;

    transition:.35s;

}

.menu a:hover{

    color:white;

}

.languages{

    display:flex;

    gap:14px;

    margin-left:25px;

}


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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:#050505;

}


/* luce teatrale */

.light{

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(200,157,67,.18) 0%,
    rgba(200,157,67,.05) 35%,
    transparent 72%);

    filter:blur(12px);

    animation:lightMove 18s ease-in-out infinite;

}
/*====================================================
HERO CONTENT
====================================================*/

.hero-content{

    position:relative;

    z-index:10;

    text-align:center;

    max-width:1100px;

    padding:20px;

}

.hero-logo{

    width:72px;

    margin-bottom:28px;

    animation:breathing 8s ease-in-out infinite;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(90px,10vw,180px);

    font-weight:500;

    letter-spacing:8px;

    color:var(--gold);

    margin-bottom:10px;

}

.hero h2{

    font-size:18px;

    font-weight:300;

    letter-spacing:8px;

    color:var(--gold-light);

    text-transform:uppercase;

    margin-bottom:35px;

}

.hero p{

    font-size:22px;

    color:#E8E2D4;

    line-height:1.8;

    margin-bottom:55px;

}


/*====================================================
BUTTON
====================================================*/

.btn-gold{

    display:inline-block;

    padding:18px 58px;

    border:1px solid var(--gold);

    border-radius:40px;

    color:var(--gold);

    text-decoration:none;

    letter-spacing:5px;

    font-size:14px;

    font-weight:400;

    transition:all .35s ease;

}

.btn-gold:hover{

    background:var(--gold);

    color:#050505;

}
/*====================================================
SECTIONS
====================================================*/

.section{

    min-height:100vh;

    background:#050505;

}


/*====================================================
FOOTER
====================================================*/

.footer{

    padding:60px 20px;

    text-align:center;

    color:#888;

    font-size:13px;

    letter-spacing:2px;

}


/*====================================================
ANIMAZIONI
====================================================*/

@keyframes breathing{

    0%{
        transform:scale(1);
        opacity:.96;
    }

    50%{
        transform:scale(1.02);
        opacity:1;
    }

    100%{
        transform:scale(1);
        opacity:.96;
    }

}


@keyframes lightMove{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(0,-20px);
    }

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

}


/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:900px){

.header{

    padding:25px;

}

.menu{

    gap:18px;

}

.hero h1{

    font-size:68px;

}

.hero h2{

    font-size:14px;

    letter-spacing:4px;

}

.hero p{

    font-size:18px;

    padding:0 20px;

}

.hero-logo{

    width:56px;

}

.btn-gold{

    padding:16px 42px;

}

}