html {
    scroll-behavior: smooth;
}

/* HeroCards background shadow */
.shadow {
    position: absolute;
    background: hsl(var(--primary) / 0%);
    border-radius: 24px;
    rotate: 35deg;
    z-index: -1;
    width: 260px;
    top: 200px;
    height: 400px;
    filter: blur(150px);
    will-change: transform;
    animation: shadow-slide infinite 4s linear alternate;
}

@keyframes shadow-slide {
    from {
        background: hsl(var(--primary) / 20%);
        right: 460px;
    }
    to {
        background: hsl(var(--primary) / 80%);
        right: 160px;
    }
}

@media (max-width: 1024px) {
    .shadow {
        top: 70px;
    }

    @keyframes shadow-slide {
        from {
            background: hsl(var(--primary) / 20%);
            right: 460px;
        }
        to {
            background: hsl(var(--primary) / 50%);
            right: 160px;
        }
    }
}

@media (max-width: 768px) {
    .shadow {
        top: 70px;
        width: 100px;
        height: 350px;
        filter: blur(60px);
    }

    @keyframes shadow-slide {
        from {
            background: hsl(var(--primary) / 20%);
            right: 280px;
        }
        to {
            background: hsl(var(--primary) / 30%);
            right: 100px;
        }
    }
}