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

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

/* ==================================================
   BACKGROUND
================================================== */

.hero__background{
    position:absolute;
    inset:0;
    background:url("../images/hero/atelier-hero6.webp") center center/cover no-repeat;
    transform:scale(1.05);
    animation:heroZoom 18s ease-in-out infinite alternate;
}

.hero__overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(245,240,225,0.97) 0%,
            rgba(245,240,225,0.94) 35%,
            rgba(245,240,225,0.75) 55%,
            rgba(245,240,225,0.28) 75%,
            rgba(245,240,225,0) 100%
        );
}

/* ==================================================
   CONTENT
================================================== */

.hero .container{
    position:relative;
    z-index:2;
}

.hero__content{
    max-width:650px;
    padding:140px 0 80px;
}

/* ==================================================
   BADGE
================================================== */

.hero__badge{
    display:inline-flex;
    align-items:center;
    padding:9px 20px;
    margin-bottom:30px;

    border-radius:6px;
    border:1px dashed var(--color-primary);

    background:rgba(255,255,255,.7);
    backdrop-filter:blur(10px);

    font-size:.9rem;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--color-primary-dark);
}

/* ==================================================
   TITLE
================================================== */

.hero h1,
.hero h2{
    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1.02;
    margin-bottom:30px;
    color:var(--color-dark-bg);
}

.hero .highlight{
    color:var(--color-primary);
}

.hero__hand{
    display:inline-block;
    font-family:var(--font-script);
    font-weight:600;
    font-size:2.3rem;
    color:var(--color-secondary);
    transform:rotate(-3deg);
    margin-bottom:18px;
}

/* ==================================================
   DESCRIPTION
================================================== */

.hero__description{
    font-size:1.15rem;
    line-height:1.8;
    color:var(--color-text-light);
    margin-bottom:20px;
    font-family:var(--font-text);
}

.hero-opening{
    font-size:.95rem;
    line-height:1.7;
    color:var(--color-text-light);
    margin-bottom:45px;
    font-family:var(--font-text);
}

/* ==================================================
   BUTTONS
================================================== */

.hero__buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:50px;
}

/* ==================================================
   FEATURES
================================================== */

.hero__features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.hero__feature{
    display:flex;
    align-items:center;
    gap:12px;
}

.hero__feature span{
    width:34px;
    height:34px;

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

    border-radius:50%;
    background:var(--color-primary);
    color:#fff;
    font-weight:bold;
}

.hero__feature p{
    margin:0;
    font-weight:500;
    color:var(--color-text);
}

/* ==================================================
   ANIMATION
================================================== */

@keyframes heroZoom{

    from{
        transform:scale(1.05);
    }

    to{
        transform:scale(1.12);
    }

}

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

@media (max-width:991px){

    .hero{
        min-height:auto;
    }

    .hero__overlay{
        background:rgba(245,240,225,.93);
    }

    .hero__content{
        max-width:100%;
        text-align:center;
        padding:120px 0 70px;
    }

    .hero__buttons{
        justify-content:center;
    }

    .hero__features{
        grid-template-columns:1fr;
        margin-top:20px;
    }

}

@media (max-width:768px){

    .hero h1,
    .hero h2{
        font-size:2.7rem;
    }

    .hero__description{
        font-size:1rem;
    }

    .hero__buttons a{
        width:100%;
    }

}