[data-animate] {
    opacity: 0;

    transition:
        opacity var(--reveal-duration, 0.8s) ease,
        transform var(--reveal-duration, 0.8s) ease;

    will-change: opacity, transform;
}

[data-animate].animate {
    opacity: 1;
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="scale-in"] {
    transform: scale(0.92);
}

[data-animate="fade-up"].animate,
[data-animate="scale-in"].animate {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}