/* ==========================================================================
   Section Transitions Pro by ByAmed.Net  (v3.6.0)
   Two engines — Native (CSS/JS) · SVG Filters — both vector, resolution-independent
   ========================================================================== */

/* --- Global Overrides ---------------------------------------------------- */
.elementor-section-wrap,
.elementor-page,
.elementor           { overflow: visible !important; }
body                 { overflow-x: clip !important; }

/* --- Base for BOTH engines ----------------------------------------------
   Every effect-section gets z-index:1. Natural DOM source order handles
   stacking between consecutive sections — later renders above earlier.
   ------------------------------------------------------------------------ */
[class*="byamed-fx-"]:not(.byamed-fx-none):not(.byamed-fx-reveal),
[class*="byamed-svg-"] {
    position: relative;
    z-index: 1;
    will-change: opacity, transform, filter, clip-path, -webkit-mask-image;
}

/* --- 3D perspective ------------------------------------------------------ */
.byamed-fx-fold-top,
.byamed-fx-fold-left,
.byamed-fx-fold-right,
.byamed-fx-page-turn,
.byamed-fx-card-flip,
.byamed-fx-perspective-tilt,
.byamed-fx-zoom-portal,
.byamed-fx-card-squeeze {
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* --- Pinning effects sit BELOW subsequent sections ---------------------- */
.byamed-fx-reveal {
    position: sticky !important;
    top: 0;
    z-index: 0;
    will-change: transform;
}
.byamed-fx-z-push { z-index: 0; }

/* --- Bars Flip Reveal — pinned section sits ABOVE subsequent sections
   so as its bars dissolve, whatever occupies the same visual space
   behind (page bg or next section) shows through. JS pins via translate.
   ------------------------------------------------------------------------ */
.byamed-fx-bars-flip-reveal {
    z-index: 5;
    will-change: transform, mask-image, -webkit-mask-image;
}

/* --- Hide the injected SVG filter element ------------------------------ */
[class*="byamed-svg-"] > svg.byamed-filter-svg {
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* --- Reduced motion respect --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [class*="byamed-fx-"],
    [class*="byamed-svg-"] {
        transition: none !important;
        animation: none !important;
    }
}