@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes float {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }

}

@keyframes glow {

    0% {
        box-shadow:
            0 0 0 rgba(124,92,255,0);
    }

    50% {
        box-shadow:
            0 0 35px rgba(124,92,255,.15);
    }

    100% {
        box-shadow:
            0 0 0 rgba(124,92,255,0);
    }

}

.hero {
    animation: fadeUp .7s ease both;
}

.page-hero {
    animation: fadeUp .7s ease both;
}

.feature-card,
.product-card,
.review-card {
    animation: fadeUp .7s ease both;
}

.hero-visual {
    animation:
        fadeIn .9s ease both,
        float 5s ease-in-out infinite;
}

.feature-card:hover,
.product-card:hover,
.review-card:hover {
    animation: glow 1.4s ease;
}

.badge {
    animation: fadeIn .8s ease both;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}