/* ==========================================================================
   Vitalum — shared scroll-in animations for plugin widgets.
   Mirrors the HTML theme's animate.css + jQuery Waypoints behaviour:
     - element starts hidden (visibility:hidden)
     - when it enters the viewport at 95% offset, JS adds .vha-in
     - .vha-in applies the animation-name from data-vha-animate
     - animation-delay is set inline from data-vha-delay
     - duration: 0.6s (theme default)
   Uses `vha-` prefixed keyframe names so they don't clash with the theme's
   own animate.css classes if both are loaded on the same page.
   ========================================================================== */

.vha-anim {
    visibility: hidden;
    animation-duration: 0.6s;
    animation-fill-mode: both;
    z-index: 9;
}

.vha-anim.vha-in { visibility: visible; }

/* -- fadeIn ---------------------------------------------------------- */
@keyframes vha-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.vha-anim.vha-in[data-vha-animate="fadeIn"] { animation-name: vha-fadeIn; }

/* -- fadeInUp -------------------------------------------------------- */
@keyframes vha-fadeInUp {
    from { opacity: 0; transform: translate3d(0, 40px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.vha-anim.vha-in[data-vha-animate="fadeInUp"] { animation-name: vha-fadeInUp; }

/* -- fadeInDown ------------------------------------------------------ */
@keyframes vha-fadeInDown {
    from { opacity: 0; transform: translate3d(0, -40px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.vha-anim.vha-in[data-vha-animate="fadeInDown"] { animation-name: vha-fadeInDown; }

/* -- fadeInLeft ------------------------------------------------------ */
@keyframes vha-fadeInLeft {
    from { opacity: 0; transform: translate3d(-40px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.vha-anim.vha-in[data-vha-animate="fadeInLeft"] { animation-name: vha-fadeInLeft; }

/* -- fadeInRight ----------------------------------------------------- */
@keyframes vha-fadeInRight {
    from { opacity: 0; transform: translate3d(40px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.vha-anim.vha-in[data-vha-animate="fadeInRight"] { animation-name: vha-fadeInRight; }

/* Reduced-motion — respect the user's OS setting */
@media (prefers-reduced-motion: reduce) {
    .vha-anim {
        visibility: visible;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}