/**
 * Cinematic Widget Pack
 * Scroll Animation CSS
 */


/* Base animation classes */

[data-animation],
[data-animation-type] {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animation].animated,
[data-animation-type].animated,
.cwp-animation-processed {
    opacity: 1;
}


/* Animation variations */

[data-animation="fade-in"].animated,
[data-animation-effect="fade-in"].animated,
[data-animation-type="css"].animated,
[data-animation-type="gsap"].animated {
    transform: translateY(0);
}

[data-animation="fade-up"]:not(.animated),
[data-animation-effect="fade-up"]:not(.animated) {
    transform: translateY(30px);
}

[data-animation="fade-down"]:not(.animated),
[data-animation-effect="fade-down"]:not(.animated) {
    transform: translateY(-30px);
}

[data-animation="fade-left"]:not(.animated),
[data-animation-effect="fade-left"]:not(.animated) {
    transform: translateX(30px);
}

[data-animation="fade-right"]:not(.animated),
[data-animation-effect="fade-right"]:not(.animated) {
    transform: translateX(-30px);
}

[data-animation="zoom-in"]:not(.animated),
[data-animation-effect="zoom-in"]:not(.animated) {
    transform: scale(0.9);
}

[data-animation="zoom-out"]:not(.animated),
[data-animation-effect="zoom-out"]:not(.animated) {
    transform: scale(1.1);
}


/* Animation with different data-duration values */

[data-duration="0.3"] {
    transition-duration: 0.3s;
}

[data-duration="0.4"] {
    transition-duration: 0.4s;
}

[data-duration="0.5"] {
    transition-duration: 0.5s;
}

[data-duration="0.6"] {
    transition-duration: 0.6s;
}

[data-duration="0.7"] {
    transition-duration: 0.7s;
}

[data-duration="0.8"] {
    transition-duration: 0.8s;
}

[data-duration="0.9"] {
    transition-duration: 0.9s;
}

[data-duration="1"] {
    transition-duration: 1s;
}

[data-duration="1.5"] {
    transition-duration: 1.5s;
}

[data-duration="2"] {
    transition-duration: 2s;
}


/* Animation with different data-delay values */

[data-delay="0.1"] {
    transition-delay: 0.1s;
}

[data-delay="0.2"] {
    transition-delay: 0.2s;
}

[data-delay="0.3"] {
    transition-delay: 0.3s;
}

[data-delay="0.4"] {
    transition-delay: 0.4s;
}

[data-delay="0.5"] {
    transition-delay: 0.5s;
}

[data-delay="0.6"] {
    transition-delay: 0.6s;
}

[data-delay="0.7"] {
    transition-delay: 0.7s;
}

[data-delay="0.8"] {
    transition-delay: 0.8s;
}


/* Class-based animations */


/* Hide elements until animated */

[class*="cwp-"] {
    opacity: 0;
}


/* Show elements when processed */

[class*="cwp-"].cwp-animation-processed {
    opacity: 1;
}


/* Stagger container - ensure it's visible */

[class*="cwp-"][data-animation-type="stagger"],
[data-animation-type="stagger"] {
    opacity: 1 !important;
}


/* Only hide the children of stagger containers */

[class*="cwp-"][data-animation-type="stagger"]>*,
[data-animation-type="stagger"]>* {
    opacity: 0;
}


/* Show animated children */

[class*="cwp-"][data-animation-type="stagger"]>*.cwp-animation-processed,
[data-animation-type="stagger"]>*.cwp-animation-processed {
    opacity: 1;
}


/* Text mask setup for children */

.text-mask-content {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.text-visible {
    visibility: visible !important;
}


/* Ensure children of stagger containers are properly hidden before animation */

[data-stagger-item] {
    opacity: 0;
}

[data-stagger-item].cwp-animation-processed {
    opacity: 1;
}


/* Fix for GSAP animations */

.cwp-animation-processed[data-animation-type="gsap"],
.cwp-animation-processed[data-animation-type="stagger"] {
    visibility: visible !important;
    opacity: 1 !important;
}


/* Fix for any animations that aren't working */

.elementor .animated {
    animation-fill-mode: both;
    visibility: visible !important;
    opacity: 1 !important;
}