/* HERO */

.hero{

     position:relative;
    width:100%;
    height:100vh;


    background-image:url("../gallery/hero.jpg");

    background-size:cover;
    background-position:center;

    overflow:hidden;

}

/* Overlay */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.62) 0%,

        rgba(0,0,0,.32) 45%,

        rgba(0,0,0,.08) 100%

    );

    transition:.6s;

}

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

.hero-content .subtitle,
.hero-content h1,
.hero-content .description,
.hero-button{

    opacity:0;

}
/* Hero Wrapper */

.hero-wrapper{

     position:relative;
    width:100%;
    height:100%;

    transition:
        transform .8s cubic-bezier(.77,0,.18,1),
        filter .8s cubic-bezier(.77,0,.18,1);

       /* animation:heroFloat 18s ease-in-out infinite alternate;*/

}

@keyframes heroFloat{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.06);

    }

}

/* Hero Content */

.hero-content{

    position:absolute;

    left:7%;
    top:50%;

    transform:translateY(-50%);

    width:620px;

    z-index:10;

    transition:
        transform .7s,
        opacity .7s;

}

.subtitle{

    color:var(--primary);

    letter-spacing:5px;

    font-size:.82rem;

    margin-bottom:1rem;

    text-transform:uppercase;
     transform:translateY(25px);

}

.hero-content h1{

    font-family:var(--heading);

    font-size:6.2rem;

    line-height:.88;

    margin-bottom:1.3rem;

    font-weight:600;
    transform:translateY(40px);

}

.hero-content span{

    color:var(--primary);

}

.description{

    width:80%;

    font-size:1.1rem;

    line-height:1.9;

    color:#ededed;
    transform:translateY(30px);
}

/* Hero Button */

.hero-button{

    position:absolute;

   width:95px;
    height:95px;

    right:5%;
    bottom:4rem;

    font-size:.82rem;


    border-radius:50%;

    background:rgba(239,181,200,.95);

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:1rem;

    color:#111;

    font-weight:700;


    line-height:1.4;

    backdrop-filter:blur(12px);

    transition:
        transform .35s,
        opacity .5s;

    box-shadow:0 20px 45px rgba(0,0,0,.25);
   
}


.hero-button:hover{

    animation-play-state: paused;

    transform:translateY(-8px) scale(1.05);

}

/* Menu Open Animation */

.hero.menu-open .hero-wrapper{

    transform:scale(1.04);

    filter:blur(5px);

}

.hero.menu-open .overlay{

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.75),

        rgba(0,0,0,.55),

        rgba(0,0,0,.45)

    );

}

.hero.menu-open .hero-button{

    opacity:0;

    pointer-events:none;

}

.hero.menu-open .hero-content{

    opacity:.25;

    transform:translateY(-50%) translateX(-15px);

}

.hero.animate .subtitle{

    animation:fadeUp .8s ease forwards;

}

.hero.animate h1{

    animation:fadeUp .9s .25s ease forwards;

}

.hero.animate .description{

    animation:fadeUp .9s .55s ease forwards;

}

.hero.animate .hero-button{

    animation:
        buttonIn .8s .85s ease forwards,
        buttonFloat 4s ease-in-out 1.7s infinite;

}

@keyframes buttonFloat{

    0%{

        transform:
            translateY(0)
            scale(1);

    }

    50%{

        transform:
            translateY(-10px)
            scale(1.03);

    }

    100%{

        transform:
            translateY(0)
            scale(1);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes buttonIn{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.8);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}
/* Large tablets / small laptops */
@media (max-width:1100px){

    .hero-content h1{
        font-size:5.3rem;
    }

}

/* Tablets */
@media (max-width:900px){

    .hero-content h1{
        font-size:4.7rem;
    }

}

/* Phones */
@media (max-width:768px){

    .hero{
        background-position:65% center;
    }

    .hero-content{
        width:90%;
    }

    .hero-content h1{
        font-size:4rem;
    }

}

/* Small phones */
@media (max-width:480px){

    .hero-content h1{
        font-size:3.3rem;
    }

}


@media (max-height: 450px) and (orientation: landscape){

    .hero-content{

        top: 4rem;
        left: 5%;
        right: 5%;

        transform: none;

        width: auto;

        max-height: calc(100vh - 4rem);

        overflow-y: auto;

        padding-right: .5rem;

    }


    .hero-content h1{
        font-size: 3.4rem;
    }

    .hero-button{
        width: 80px;
        height: 80px;
        bottom: 1.rem;
    }

    nav{
        padding: .2rem 5%;
    }


}

.hero-content::-webkit-scrollbar{
    width:0;
}

.hero-content{
    scrollbar-width:none;
}