/* Scroll entrance animations are activated by js/utils/observer-animation.js. */
[data-animation-type] {
    opacity: 0;
}

[data-animation-type="fade-up"].animation-active {
    animation: fade-up 0.7s ease-out both;
}

[data-animation-type="fade-left"].animation-active {
    animation: fade-left 0.7s ease-out both;
}

[data-animation-type="fade-right"].animation-active {
    animation: fade-right 0.7s ease-out both;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-left {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-animation-type] {
        opacity: 1;
    }

    [data-animation-type].animation-active {
        animation: none;
    }
}