/* ==========================================================
   Animate.css – Custom animations for Safety Fire Pro
   ========================================================== */


.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-fade-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-fade-in.animate {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-out {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-fade-out.animate {
    opacity: 0;
    transform: translateY(20px);
}

.animate-slide-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-slide-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.animate-slide-down {
    opacity: 1;
    transform: translateY(0);

}

.animate-slide-down-up {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-slide-down-up.animate {
    opacity: 1;
    transform: translateY(-20px);
}

.animate-slide-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-slide-left.animate {
    opacity: 1;
    transform: translateX(-20px);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-slide-right.animate {
    opacity: 1;
    transform: translateX(20px);
}

.animate-slide-left-right.animate {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* -----------------------------
   STAGGER (retards)
------------------------------ */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }