/*!
 * Custom Sticky Container for Elementor - Animations
 * Version: 2.0.0
 */

/* ==========================================================================
   CSS Custom Properties for Animations
   ========================================================================== */

:root {
    --csc-animation-duration: 0.3s;
    --csc-animation-timing: ease-out;
}

/* ==========================================================================
   Slide Down Animation
   ========================================================================== */

@keyframes csc-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.csc-sticky-container.csc-animation-slide {
    animation: csc-slide-down var(--csc-animation-duration, 0.3s) var(--csc-animation-timing, ease-out) forwards;
}

/* Slide from bottom variation */
@keyframes csc-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.csc-sticky-container[data-csc-position="bottom"].csc-animation-slide {
    animation: csc-slide-up var(--csc-animation-duration, 0.3s) var(--csc-animation-timing, ease-out) forwards;
}

/* ==========================================================================
   Fade In Animation
   ========================================================================== */

@keyframes csc-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.csc-sticky-container.csc-animation-fade {
    animation: csc-fade-in var(--csc-animation-duration, 0.3s) var(--csc-animation-timing, ease-out) forwards;
}

/* ==========================================================================
   Scale In Animation
   ========================================================================== */

@keyframes csc-scale-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.csc-sticky-container.csc-animation-scale {
    animation: csc-scale-in var(--csc-animation-duration, 0.3s) var(--csc-animation-timing, ease-out) forwards;
    transform-origin: center top;
}

.csc-sticky-container[data-csc-position="bottom"].csc-animation-scale {
    transform-origin: center bottom;
}

/* ==========================================================================
   Bounce In Animation
   ========================================================================== */

@keyframes csc-bounce-in {
    0% {
        transform: translateY(-200%);
        opacity: 0;
    }
    60% {
        transform: translateY(25%);
        opacity: 1;
    }
    75% {
        transform: translateY(-10%);
    }
    90% {
        transform: translateY(5%);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes csc-bounce-in-bottom {
    0% {
        transform: translateY(200%);
        opacity: 0;
    }
    60% {
        transform: translateY(-25%);
        opacity: 1;
    }
    75% {
        transform: translateY(10%);
    }
    90% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.csc-sticky-container.csc-animation-bounce {
    animation: csc-bounce-in var(--csc-animation-duration, 0.6s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.csc-sticky-container[data-csc-position="bottom"].csc-animation-bounce {
    animation: csc-bounce-in-bottom var(--csc-animation-duration, 0.6s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ==========================================================================
   Flip In Animation
   ========================================================================== */

@keyframes csc-flip-in {
    from {
        transform: perspective(400px) rotateX(-90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
        opacity: 1;
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes csc-flip-in-bottom {
    from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }
    70% {
        transform: perspective(400px) rotateX(-10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.csc-sticky-container.csc-animation-flip {
    animation: csc-flip-in var(--csc-animation-duration, 0.4s) ease-out forwards;
    transform-origin: center top;
}

.csc-sticky-container[data-csc-position="bottom"].csc-animation-flip {
    animation: csc-flip-in-bottom var(--csc-animation-duration, 0.4s) ease-out forwards;
    transform-origin: center bottom;
}

/* ==========================================================================
   Animation Reset Classes
   ========================================================================== */

.csc-sticky-container.csc-animation-reset {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Prefers Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .csc-sticky-container,
    .csc-sticky-container * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .csc-sticky-container.csc-animation-slide,
    .csc-sticky-container.csc-animation-fade,
    .csc-sticky-container.csc-animation-scale,
    .csc-sticky-container.csc-animation-bounce,
    .csc-sticky-container.csc-animation-flip {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   Hardware Acceleration for Smooth Animations
   ========================================================================== */

.csc-sticky-container.csc-animating {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.csc-sticky-container:not(.csc-animating) {
    will-change: auto;
}