/* REVEAL ANIMATION STYLES */
/* This uses the clip-path technique for a sharp reveal */

/* This is a new wrapper that the JavaScript will add automatically.
   It's the element that will actually be animated. */
.reveal__content {
    /* Define the end-state (fully visible) and the transition */
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Define the starting (hidden) state for each direction.
   The .is-revealed class will be added by JS to start the transition. */
.reveal--bottom .reveal__content { clip-path: inset(100% 0 0 0); }
.reveal--top .reveal__content    { clip-path: inset(0 0 100% 0); }
.reveal--left .reveal__content   { clip-path: inset(0 0 0 100%); }
.reveal--right .reveal__content  { clip-path: inset(0 100% 0 0); }

/* When the parent has the .is-revealed class, the animation runs.
   We explicitly set the final state again for reliability. */
.reveal.is-revealed .reveal__content {
    clip-path: inset(0 0 0 0);
}

/* PARALLAX AND ELEMENTOR COMPATIBILITY STYLES */

/* The crucial Elementor fix: ensures the inner container crops the oversized image */
.reveal .elementor-widget-container {
    overflow: hidden;
    position: relative;
}

/* The parallax effect is applied directly to the image */
.reveal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Enhanced parallax container styles */
.reveal--parallax {
    overflow: hidden;
    position: relative;
}

.reveal--parallax .elementor-widget-container {
    overflow: hidden;
    position: relative;
}

.reveal--parallax .reveal__content {
    overflow: hidden;
    position: relative;
}

/* Ensure proper visibility in Elementor editor */
body.elementor-editor-active .reveal .elementor-widget-container {
    visibility: visible !important;
}

/* Additional styles for better performance */
.reveal {
    position: relative;
}

.reveal__content {
    position: relative;
    will-change: clip-path;
}

.reveal--parallax img {
    will-change: transform;
}

/* Ensure images are properly sized for parallax */
.reveal--parallax .elementor-widget-container {
    overflow: hidden;
}

.reveal--parallax img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}