html{scroll-behavior:smooth}
/* ===================================== */
/* HERO CIRCLE */
/* ===================================== */

.hero-circle{
    position:relative;
    overflow:visible;
}

.hero-circle::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:50%;
    border:2px solid rgba(255,107,0,.25);
    animation:ripple 4s ease-out infinite;
}

.hero-circle::after{
    content:"";
    position:absolute;
    inset:-45px;
    border-radius:50%;
    border:2px solid rgba(255,107,0,.12);
    animation:ripple 4s ease-out infinite 1.5s;
}

@keyframes ripple{

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

    20%{
        opacity:1;
    }

    100%{
        transform:scale(1.18);
        opacity:0;
    }

}



.hero-float{

    animation:float 7s ease-in-out infinite;

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

}



.hero-glow{

    animation:glowPulse 5s ease-in-out infinite;

}

@keyframes glowPulse{

    0%,100%{

        box-shadow:
        0 35px 70px rgba(255,107,0,.28);

    }

    50%{

        box-shadow:
        0 45px 120px rgba(255,107,0,.45);

    }

}