/* engage — animate.css | lean scroll-reveal (no vendor dependency)
 *
 * Pattern: add class="animated" data-class="fadeInUp" to a block.
 * js/general.js → addAnimation() adds the data-class value when the element
 * enters the viewport. Respects prefers-reduced-motion.
 */

.animated {
    opacity: 0;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

.animated.fadeIn,
.animated.fadeInUp,
.animated.fadeInDown,
.animated.fadeInLeft,
.animated.fadeInRight {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .animated { opacity: 1 !important; animation: none !important; }
}


/* ----- Keyframes ----- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 40px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -40px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-40px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(40px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideInDown {
    from { transform: translate3d(0, -100%, 0); visibility: visible; }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes slideOutUp {
    from { transform: translate3d(0, 0, 0); }
    to   { visibility: hidden; transform: translate3d(0, -100%, 0); }
}

.fadeIn       { animation-name: fadeIn; }
.fadeInUp     { animation-name: fadeInUp; }
.fadeInDown   { animation-name: fadeInDown; }
.fadeInLeft   { animation-name: fadeInLeft; }
.fadeInRight  { animation-name: fadeInRight; }
.slideInDown  { animation-name: slideInDown; }
.slideOutUp   { animation-name: slideOutUp; }


/* ----- Stagger delays ----- */
.delay-100  { animation-delay: 0.1s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-400  { animation-delay: 0.4s; }
.delay-500  { animation-delay: 0.5s; }
.delay-600  { animation-delay: 0.6s; }
.delay-700  { animation-delay: 0.7s; }
.delay-800  { animation-delay: 0.8s; }
.delay-900  { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }
.delay-1200 { animation-delay: 1.2s; }