/* ==========================================================================
   CPX Entrance Animations – Image reveal
   ========================================================================== */

/* --------------------------------------------------------------------------
   Image: clip-path reveal + zoom
   -------------------------------------------------------------------------- */

.cpx-anim-image .elementor-widget-container {
    position: relative;

    height: auto !important;
    overflow: hidden;
}

.cpx-anim-image .elementor-widget-container img {
    transform: scale(1.25);

    will-change: transform, clip-path;
    clip-path: inset(100% 0 0 0);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .cpx-anim-image .elementor-widget-container img {
        transform: none;
        clip-path: none;
    }
}

/* --------------------------------------------------------------------------
   Elementor editor: alles zichtbaar tijdens bewerken
   -------------------------------------------------------------------------- */

.elementor-editor-active .cpx-anim-image .elementor-widget-container img {
    transform: none !important;
    clip-path: none !important;
}

/* --------------------------------------------------------------------------
   Tablet + mobile: image reveal van boven naar beneden
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .cpx-anim-image .elementor-widget-container img {
        clip-path: inset(0 0 100% 0);
    }
}