/**
 * Carepify Motion Effects — frontend styles.
 *
 * Pairs with assets/js/motion-fx.js. Sets up transform anchoring, smooth
 * interpolation, the sticky states and the generated background-parallax layer.
 * Free-Elementor replacement for Elementor Pro's Motion Effects CSS.
 */

/* Transform anchor point (set per element by the JS from the X/Y controls).
   Uses an Inoforest-namespaced custom property so it never overlaps
   Elementor / Elementor Pro's own `--e-transform-origin-*`. */
.carepify-mfx-element {
    --carepify-mfx-origin-x: center;
    --carepify-mfx-origin-y: center;
    transform-origin: var(--carepify-mfx-origin-x) var(--carepify-mfx-origin-y);
    backface-visibility: hidden;
}

/* Smooth mouse-driven motion only. Scroll motion is frame-synced to the
   scroll position and must NOT be eased (easing makes it lag and drift), so
   the JS adds `carepify-mfx-smooth` only to elements with mouse effects. */
.carepify-mfx-smooth {
    transition: transform 0.12s ease-out;
}

/* ---- Background parallax layer ---------------------------------------- */

.carepify-mfx-has-bg {
    position: relative;
    overflow: hidden;
}

.carepify-mfx-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.carepify-mfx-bg-layer {
    position: absolute;
    /* Oversize so transforms never expose the element edges. */
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    will-change: transform;
}

.carepify-mfx-bg-layer.carepify-mfx-smooth {
    transition: transform 0.12s ease-out;
}

/* Keep the element's real content above the generated background layer. */
.carepify-mfx-has-bg > :not(.carepify-mfx-bg-container) {
    position: relative;
    z-index: 1;
}

/* ---- Sticky ----------------------------------------------------------- */
/* Own class namespace — does not touch Elementor's `.elementor-sticky*`. */

.carepify-mfx-sticky,
.carepify-mfx-sticky--active {
    z-index: 99;
}

.e-con.carepify-mfx-sticky--active {
    z-index: var(--z-index, 99);
}

.carepify-mfx-sticky-spacer {
    pointer-events: none;
}

/* A hook for users to style the "stuck" state (e.g. shrink / add shadow):
   .carepify-mfx-sticky--effects { box-shadow: 0 2px 12px rgba(0,0,0,.12); } */
.carepify-mfx-sticky--effects {
    transition: all 0.3s ease;
}

/* ---- Accessibility ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .carepify-mfx-element,
    .carepify-mfx-bg-layer {
        transition: none !important;
    }
}