/* -- animate.css — scroll animation styles for animate.js ----------------- */

/* Elements start hidden; animate.js reveals them on scroll */
[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
}

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

/* -- Keyframes ------------------------------------------------------------- */

@keyframes flowuiFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes flowuiFadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes flowuiFadeDown {
    from { opacity: 0; transform: translateY(-32px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes flowuiFadeLeft {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes flowuiFadeRight {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes flowuiZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1);    }
}

@keyframes flowuiSlideUp {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* -- Animation classes ----------------------------------------------------- */

.animate-fade-in    { animation: flowuiFadeIn    var(--flowui-animate-duration) var(--flowui-animate-easing) both; }
.animate-fade-up    { animation: flowuiFadeUp    var(--flowui-animate-duration) var(--flowui-animate-easing) both; }
.animate-fade-down  { animation: flowuiFadeDown  var(--flowui-animate-duration) var(--flowui-animate-easing) both; }
.animate-fade-left  { animation: flowuiFadeLeft  var(--flowui-animate-duration) var(--flowui-animate-easing) both; }
.animate-fade-right { animation: flowuiFadeRight var(--flowui-animate-duration) var(--flowui-animate-easing) both; }
.animate-zoom-in    { animation: flowuiZoomIn    var(--flowui-animate-duration) var(--flowui-animate-easing) both; }
.animate-slide-up   { animation: flowuiSlideUp   var(--flowui-animate-duration) var(--flowui-animate-easing) both; }