/* ===========================
   HERO SECTION
   BUMBY
=========================== */


.hero {


    min-height:100vh;


    padding:

    120px 8% 80px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:60px;


    position:relative;


    overflow:hidden;


}





/* ===========================
   DECORATIONS
=========================== */


.hero::before {


    content:"";


    position:absolute;


    width:500px;

    height:500px;


    top:-180px;

    left:-180px;


    background:

    radial-gradient(

        circle,

        var(--pink-soft),

        transparent 70%

    );


    opacity:.7;


    z-index:-1;


}



.hero::after {


    content:"";


    position:absolute;


    width:400px;

    height:400px;


    bottom:-150px;

    right:-100px;


    background:

    radial-gradient(

        circle,

        var(--sage),

        transparent 70%

    );


    opacity:.45;


    z-index:-1;


}







/* ===========================
   TEXTE
=========================== */


.hero-content {


    width:50%;


    animation:

    heroReveal .9s cubic-bezier(.22,1,.36,1);


}





.hero-small {


    color:

    var(--purple);


    letter-spacing:

    5px;


    text-transform:

    uppercase;


    font-size:.85rem;


    margin-bottom:

    25px;


}





.hero h1 {


    font-size:

    clamp(5rem,10vw,8rem);


    line-height:.75;


    color:

    var(--purple);


    margin-bottom:

    25px;


    letter-spacing:

    -2px;


}





.hero-style {


    font-size:

    1.5rem;


    color:

    var(--brown);


    margin-bottom:

    30px;


}





.hero-description {


    max-width:

    480px;


    line-height:

    1.9;


    font-size:

    1.05rem;


}









/* ===========================
   IMAGE
=========================== */


.hero-image {


    width:

    42%;


    position:

    relative;


    animation:

    imageReveal 1.2s cubic-bezier(.22,1,.36,1);


}





.hero-image::before {


    content:"";


    position:absolute;


    inset:

    -25px;


    background:

    var(--pink-soft);


    border-radius:

    55% 45% 50% 50%;


    transform:

    rotate(-8deg);


    z-index:-1;


}





.hero-image::after {


    content:"";


    position:absolute;


    width:70px;

    height:70px;


    right:-20px;

    bottom:50px;


    background:

    var(--sage);


    border-radius:

    50%;


    opacity:.8;


}





.hero-image img {


    width:100%;


    height:650px;


    object-fit:cover;


    border-radius:

    50% 50% 45% 45%;


    box-shadow:

    var(--shadow-card);


}









/* ===========================
   APPARITION
=========================== */


@keyframes heroReveal {


    from {


        opacity:0;


        transform:

        translateY(50px);


    }


    to {


        opacity:1;


        transform:

        translateY(0);


    }


}





@keyframes imageReveal {


    from {


        opacity:0;


        transform:

        translateX(40px)

        scale(.95);


    }


    to {


        opacity:1;


        transform:

        translateX(0)

        scale(1);


    }


}


/* ===========================
   HERO LOGO BACKGROUND
=========================== */

.hero-logo-bg {

    position:absolute;

    width:2050px;

    /*left:360px;

    bottom:-320px;*/

    opacity:.05;

    filter:grayscale(100%);

    pointer-events:none;

    user-select:none;

    z-index:0;

}

@media(max-width:900px){
    .hero-logo-bg {
        bottom : -100px;
    }

}