/* =======================================
   ELEMENTOR EDITOR FIX
   Make elements visible during editing
   ======================================= */
.elementor-editor-active .wrsvp-scroll-hidden {
    opacity: 1 !important;
    transform: none !important;
}

/* =======================================
   BASE STATES
   ======================================= */

/* Base state - hidden initially */
.wrsvp-scroll-hidden {
    opacity: 0;
    will-change: transform, opacity;
    /* Transition defaults, can be overridden by inline styles */
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0.8s;
}

/* Visible state - stays visible once animated */
.wrsvp-scroll-visible {
    opacity: 1 !important;
}

/* 
   Animation Classes 
   Format: wrsvp-animate-{type}-{direction}
   Note: Some types like Scale/Rotate might not use direction.
*/

/* --- FADE --- */
.wrsvp-animate-fade-up.wrsvp-scroll-hidden {
    transform: translate3d(0, 50px, 0);
}

.wrsvp-animate-fade-down.wrsvp-scroll-hidden {
    transform: translate3d(0, -50px, 0);
}

.wrsvp-animate-fade-left.wrsvp-scroll-hidden {
    transform: translate3d(-50px, 0, 0);
}

.wrsvp-animate-fade-right.wrsvp-scroll-hidden {
    transform: translate3d(50px, 0, 0);
}

.wrsvp-animate-fade-up.wrsvp-scroll-visible,
.wrsvp-animate-fade-down.wrsvp-scroll-visible,
.wrsvp-animate-fade-left.wrsvp-scroll-visible,
.wrsvp-animate-fade-right.wrsvp-scroll-visible {
    transform: translate3d(0, 0, 0);
    transition-property: opacity, transform;
}

/* --- SLIDE (More displacement) --- */
.wrsvp-animate-slide-up.wrsvp-scroll-hidden {
    transform: translate3d(0, 100px, 0);
}

.wrsvp-animate-slide-down.wrsvp-scroll-hidden {
    transform: translate3d(0, -100px, 0);
}

.wrsvp-animate-slide-left.wrsvp-scroll-hidden {
    transform: translate3d(-100px, 0, 0);
}

.wrsvp-animate-slide-right.wrsvp-scroll-hidden {
    transform: translate3d(100px, 0, 0);
}

.wrsvp-animate-slide-up.wrsvp-scroll-visible,
.wrsvp-animate-slide-down.wrsvp-scroll-visible,
.wrsvp-animate-slide-left.wrsvp-scroll-visible,
.wrsvp-animate-slide-right.wrsvp-scroll-visible {
    transform: translate3d(0, 0, 0);
    transition-property: opacity, transform;
}

/* --- SCALE --- */
.wrsvp-animate-scale.wrsvp-scroll-hidden {
    transform: scale(0.5);
}

.wrsvp-animate-scale.wrsvp-scroll-visible {
    transform: scale(1);
    transition-property: opacity, transform;
}

/* --- ROTATE --- */
.wrsvp-animate-rotate.wrsvp-scroll-hidden {
    transform: rotate(-180deg) scale(0.5);
}

.wrsvp-animate-rotate.wrsvp-scroll-visible {
    transform: rotate(0) scale(1);
    transition-property: opacity, transform;
}

/* --- BOUNCE (Requires Keyframes) --- */
@keyframes wrsvpBounceUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.wrsvp-animate-bounce-up.wrsvp-scroll-visible {
    animation-name: wrsvpBounceUp;
    /* Duration is handled by inline style */
    animation-fill-mode: both;
}

/* You can add more bounce directions if needed */