/**
 * BP-Animate - Complete Animation System
 * Using !important to override inline styles from JavaScript
 */

/* Base: All elements start invisible and ready to animate */
[class*="bp-animate-"] {
    opacity: 0 !important;
    transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Trigger class: Applied when element should animate */
.bp-animated {
    opacity: 1 !important;
}

/* ===== FADE ANIMATIONS ===== */

/* Fade In */
.bp-animate-fade-in {
    opacity: 0 !important;
}
.bp-animate-fade-in.bp-animated {
    opacity: 1 !important;
}

/* Fade Up */
.bp-animate-fade-up {
    opacity: 0 !important;
    transform: translateY(40px) !important;
}
.bp-animate-fade-up.bp-animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Fade Down */
.bp-animate-fade-down {
    opacity: 0 !important;
    transform: translateY(-40px) !important;
}
.bp-animate-fade-down.bp-animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Fade Left */
.bp-animate-fade-left {
    opacity: 0 !important;
    transform: translateX(40px) !important;
}
.bp-animate-fade-left.bp-animated {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Fade Right */
.bp-animate-fade-right {
    opacity: 0 !important;
    transform: translateX(-40px) !important;
}
.bp-animate-fade-right.bp-animated {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ===== SLIDE ANIMATIONS ===== */

/* Slide Up */
.bp-animate-slide-up {
    opacity: 0 !important;
    transform: translateY(60px) !important;
}
.bp-animate-slide-up.bp-animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Slide Down */
.bp-animate-slide-down {
    opacity: 0 !important;
    transform: translateY(-60px) !important;
}
.bp-animate-slide-down.bp-animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Slide Left */
.bp-animate-slide-left {
    opacity: 0 !important;
    transform: translateX(60px) !important;
}
.bp-animate-slide-left.bp-animated {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Slide Right */
.bp-animate-slide-right {
    opacity: 0 !important;
    transform: translateX(-60px) !important;
}
.bp-animate-slide-right.bp-animated {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ===== ZOOM ANIMATIONS ===== */

/* Zoom In */
.bp-animate-zoom-in {
    opacity: 0 !important;
    transform: scale(0.8) !important;
}
.bp-animate-zoom-in.bp-animated {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Zoom Out */
.bp-animate-zoom-out {
    opacity: 0 !important;
    transform: scale(1.2) !important;
}
.bp-animate-zoom-out.bp-animated {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ===== FLIP ANIMATIONS ===== */

/* Flip Up */
.bp-animate-flip-up {
    opacity: 0 !important;
    transform: perspective(400px) rotateX(90deg) !important;
    transform-origin: center bottom !important;
}
.bp-animate-flip-up.bp-animated {
    opacity: 1 !important;
    transform: perspective(400px) rotateX(0deg) !important;
}

/* Flip Down */
.bp-animate-flip-down {
    opacity: 0 !important;
    transform: perspective(400px) rotateX(-90deg) !important;
    transform-origin: center top !important;
}
.bp-animate-flip-down.bp-animated {
    opacity: 1 !important;
    transform: perspective(400px) rotateX(0deg) !important;
}