/* ==========================================================================
   ESR Effects - Scroll Animations & Ripple Styles
   Add these classes in Elementor > Advanced > CSS Classes
   ========================================================================== */

/* ---------- Ripple Canvas (injected by JS) ---------- */
.esr-ripple {
    position: relative;
    overflow: hidden;
}

.esr-ripple > canvas.esr-ripple-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* ---------- Scroll Animations ---------- */
/* Each animation starts hidden and becomes visible when scrolled into view */

.esr-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-fade-in.esr-visible {
    opacity: 1;
    transform: translateY(0);
}

.esr-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-fade-in-up.esr-visible {
    opacity: 1;
    transform: translateY(0);
}

.esr-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-slide-left.esr-visible {
    opacity: 1;
    transform: translateX(0);
}

.esr-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-slide-right.esr-visible {
    opacity: 1;
    transform: translateX(0);
}

.esr-scale-up {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-scale-up.esr-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.esr-zoom-in {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-zoom-in.esr-visible {
    opacity: 1;
    transform: scale(1);
}

.esr-blur-in {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(10px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), filter 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-blur-in.esr-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.esr-rotate-in {
    opacity: 0;
    transform: rotate(-3deg) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.esr-rotate-in.esr-visible {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.esr-bounce-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.esr-bounce-in.esr-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Continuous Animations ---------- */
.esr-float {
    animation: esr-float 4s ease-in-out infinite;
}
@keyframes esr-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.esr-text-shimmer {
    background: linear-gradient(
        90deg,
        currentColor 0%,
        #6ec1e4 50%,
        currentColor 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: esr-shimmer 3s ease-in-out infinite;
}
@keyframes esr-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------- Don't animate in Elementor editor ---------- */
.elementor-editor-active .esr-fade-in,
.elementor-editor-active .esr-fade-in-up,
.elementor-editor-active .esr-slide-left,
.elementor-editor-active .esr-slide-right,
.elementor-editor-active .esr-scale-up,
.elementor-editor-active .esr-zoom-in,
.elementor-editor-active .esr-blur-in,
.elementor-editor-active .esr-rotate-in,
.elementor-editor-active .esr-bounce-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}