/**
 * Inoforest 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-*`. */
.inoforest-mfx-element {
    --inoforest-mfx-origin-x: center;
    --inoforest-mfx-origin-y: center;
    transform-origin: var(--inoforest-mfx-origin-x) var(--inoforest-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 `inoforest-mfx-smooth` only to elements with mouse effects. */
.inoforest-mfx-smooth {
    transition: transform 0.12s ease-out;
}

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

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

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

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

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

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

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

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

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

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

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

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

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