/* Exact same styles as the Codepen example */
.ce-reveal-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
	overflow: hidden;
    position: relative;
}

.ce-reveal {
    visibility: visible; /* Let GSAP handle visibility */
    position: relative;
    width: 100%; /* Full width of container */
    height: 100%; /* Full height of container */
    overflow: hidden;
}

.ce-reveal img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* Transform origin will be set by JavaScript based on user selection */
}

/* Ensure proper stacking context */
.ce-reveal-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Elementor editor adjustments */
.elementor-editor-active .ce-reveal-container {
    min-height: 300px;
}

.elementor-editor-active .ce-reveal {
    min-height: 200px;
    opacity: 1 !important;
}


/* animation image 2 */
/* Image Animation 2 Widget Styles */
.animate-card {
    display: inline-block;
    vertical-align: middle;
}

.cardbox {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.myimg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.reveal {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.slice {
    flex-grow: 1;
    transition: background-color 0.3s ease;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .animate-card {
        width: 100% !important;
    }
    
    .cardbox {
        width: 100% !important;
    }
}

/* Editor Mode Styles */
.elementor-editor-active .animate-card {
    pointer-events: auto !important;
}

.elementor-editor-active .cardbox {
    min-height: 200px;
}