/* HERO */

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;

}

.hero-bg,
.hero-overlay{

    position:absolute;

    inset:0;

}

@media(max-width:768px){

    .hero-bg{

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

    }

}


.hero-content{

    position:relative;

    z-index:20;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:24px;

    text-align:center;

    color:white;

opacity:0;
transform:translateY(40px);
animation:heroContentIn 1.2s ease forwards;
animation-delay:.4s;

}

.hero-logo{

    width:clamp(260px,42vw,620px);

    filter:drop-shadow(0 20px 40px rgba(0,0,0,.25));

    position:relative;

    z-index:20;

    will-change:transform;

    animation:floatLogo 6s ease-in-out infinite;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:url("../images/hero/background.webp") center center / cover no-repeat;

    will-change:transform;

    animation:heroZoom 30s ease-in-out infinite;

}

.hero-overlay{

    background:

        linear-gradient(

            rgba(0,0,0,.15),

            rgba(0,0,0,.45)

        );

    z-index:15;

}

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-250px;

    top:-150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,240,180,.45) 0%,
            rgba(255,220,120,.25) 35%,
            rgba(255,180,60,.10) 60%,
            transparent 80%
        );

    z-index:2;

    pointer-events:none;

    filter:blur(25px);

}