/**
 * Rapid Mind Extras — Elementor "RME Hover Effect" control styles.
 *
 * The Elementor control adds a class to the element wrapper via prefix_class:
 *   Zoom In  -> .rme-hover-zoom-in
 *   Zoom Out -> .rme-hover-zoom-out
 *   Grayscale-> .rme-hover-grayscale
 *   Lift     -> .rme-hover-lift
 *
 * Two image situations are handled:
 *   1. Containers / sections that use a CSS background-image  -> a ::after layer
 *      that inherits the element's background is scaled/filtered (Elementor owns
 *      ::before for the overlay, so we use ::after and keep it under the overlay).
 *   2. Image / Image-Box widgets that contain a real <img>   -> the <img> is
 *      scaled/filtered directly.
 *
 * Tunables (set per element by the editor controls, with sensible fallbacks):
 *   --rme-hover-scale  (default 1.1)
 *   --rme-hover-dur    (default .5s)
 */

@media (hover: hover) {

    /* ============================ ZOOM (background containers / sections) === */
    .rme-hover-zoom-in.e-con,
    .rme-hover-zoom-out.e-con,
    .rme-hover-zoom-in.elementor-section,
    .rme-hover-zoom-out.elementor-section {
        position: relative;
        overflow: hidden;
    }

    .rme-hover-zoom-in.e-con::after,
    .rme-hover-zoom-out.e-con::after,
    .rme-hover-zoom-in.elementor-section::after,
    .rme-hover-zoom-out.elementor-section::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: inherit;            /* inherit the element's own background image */
        transition: transform var(--rme-hover-dur, .5s) ease;
    }

    /* keep Elementor's overlay (::before) and the content above the zoom layer */
    .rme-hover-zoom-in.e-con::before,
    .rme-hover-zoom-out.e-con::before,
    .rme-hover-zoom-in.elementor-section::before,
    .rme-hover-zoom-out.elementor-section::before {
        z-index: 1;
    }
    .rme-hover-zoom-in.e-con > .elementor-widget,
    .rme-hover-zoom-in.e-con > .e-con-inner,
    .rme-hover-zoom-in.e-con > .elementor-element,
    .rme-hover-zoom-out.e-con > .elementor-widget,
    .rme-hover-zoom-out.e-con > .e-con-inner,
    .rme-hover-zoom-out.e-con > .elementor-element,
    .rme-hover-zoom-in.elementor-section > .elementor-container,
    .rme-hover-zoom-out.elementor-section > .elementor-container {
        position: relative;
        z-index: 2;
    }

    .rme-hover-zoom-in.e-con:hover::after,
    .rme-hover-zoom-in.elementor-section:hover::after {
        transform: scale(var(--rme-hover-scale, 1.1));
    }
    .rme-hover-zoom-out.e-con::after,
    .rme-hover-zoom-out.elementor-section::after {
        transform: scale(var(--rme-hover-scale, 1.1));
    }
    .rme-hover-zoom-out.e-con:hover::after,
    .rme-hover-zoom-out.elementor-section:hover::after {
        transform: scale(1);
    }

    /* ============================ ZOOM (Image / Image-Box widgets) ========== */
    .rme-hover-zoom-in.elementor-widget-image,
    .rme-hover-zoom-in.elementor-widget-image-box,
    .rme-hover-zoom-out.elementor-widget-image,
    .rme-hover-zoom-out.elementor-widget-image-box,
    .rme-hover-zoom-in .elementor-image,
    .rme-hover-zoom-out .elementor-image {
        overflow: hidden;
    }
    .rme-hover-zoom-in img {
        transition: transform var(--rme-hover-dur, .5s) ease;
    }
    .rme-hover-zoom-in:hover img {
        transform: scale(var(--rme-hover-scale, 1.1));
    }
    .rme-hover-zoom-out img {
        transform: scale(var(--rme-hover-scale, 1.1));
        transition: transform var(--rme-hover-dur, .5s) ease;
    }
    .rme-hover-zoom-out:hover img {
        transform: scale(1);
    }

    /* ============================ GRAYSCALE -> COLOR ======================== */
    .rme-hover-grayscale.e-con,
    .rme-hover-grayscale.elementor-section {
        position: relative;
        overflow: hidden;
    }
    .rme-hover-grayscale.e-con::after,
    .rme-hover-grayscale.elementor-section::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: inherit;
        filter: grayscale(1);
        transition: filter var(--rme-hover-dur, .5s) ease;
    }
    .rme-hover-grayscale.e-con::before,
    .rme-hover-grayscale.elementor-section::before {
        z-index: 1;
    }
    .rme-hover-grayscale.e-con > .elementor-widget,
    .rme-hover-grayscale.e-con > .e-con-inner,
    .rme-hover-grayscale.e-con > .elementor-element,
    .rme-hover-grayscale.elementor-section > .elementor-container {
        position: relative;
        z-index: 2;
    }
    .rme-hover-grayscale.e-con:hover::after,
    .rme-hover-grayscale.elementor-section:hover::after {
        filter: grayscale(0);
    }
    .rme-hover-grayscale img {
        filter: grayscale(1);
        transition: filter var(--rme-hover-dur, .5s) ease;
    }
    .rme-hover-grayscale:hover img {
        filter: grayscale(0);
    }

    /* ============================ LIFT ====================================== */
    .rme-hover-lift {
        transition: transform var(--rme-hover-dur, .3s) ease,
                    box-shadow var(--rme-hover-dur, .3s) ease;
    }
    .rme-hover-lift:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    }
}

/* Respect reduced-motion: drop transforms but keep grayscale/lift-shadow subtle. */
@media (prefers-reduced-motion: reduce) {
    .rme-hover-zoom-in.e-con:hover::after,
    .rme-hover-zoom-out.e-con::after,
    .rme-hover-zoom-out.e-con:hover::after,
    .rme-hover-zoom-in:hover img,
    .rme-hover-zoom-out img,
    .rme-hover-zoom-out:hover img,
    .rme-hover-lift:hover {
        transform: none;
    }
}