/*------------------------------------------------------------------*\
    SECTION MOTION — .rb-section-motion / .rb-image-motion
    Stacked image reveal (lemirage.ae-style), CSS-driven via native sticky.

    Mechanism (mirrors lemirage.ae):
      Each image is its OWN panel: `position:sticky; top:0; height:100svh`,
      laid out in normal flow as siblings inside the section. As you scroll,
      every panel slides up from below and COVERS the previous one, which stays
      stuck at the top beneath it (source order = paint order, last on top).
      The section's height is the sum of the stacked panels (N × 100svh) since
      sticky elements keep their space in flow.

    CRITICAL constraints for sticky to work:
      - The section (and its ancestors up to the scroll root) must NOT set
        `overflow: hidden/auto/scroll` — that traps the sticky and it won't
        stick to the viewport. Clipping the per-panel zoom is done on the PANEL
        instead (overflow on the sticky element itself is fine).
      - No vertical gap between panels, or background shows between stacked
        images. We force `gap:0`; also set the Elementor container gap to 0.

    Markup is Elementor-authored (an `e-con` flex column with image widgets) —
    classes are a fixed contract, do NOT rename. The per-panel zoom (scale
    1.4 → 1, right-anchored) is layered on top in
    assets/js/modules/section-motion.js. With no JS the stacking still works;
    only the zoom is missing.
\*------------------------------------------------------------------*/

.rb-section-motion {
    position: relative;
    /* Isolated stacking context so the panels compose among themselves. */
    isolation: isolate;
    /* No fixed height: the stacked sticky panels define it.
       No overflow:hidden here — it would break the sticky panels. */
    gap: 0; /* defensive: avoid scroll gaps between stacked panels */
}

/* Every image is a full-viewport sticky panel; later panels cover earlier. */
.rb-section-motion .rb-image-motion {
    position: sticky;
    top: 0;
    height: 100vh;       /* fallback */
    height: 100svh;      /* avoids mobile URL-bar jump */
    width: 100%;
    flex-shrink: 0;      /* don't let the flex column squash a panel */
    margin: 0;
    /* Clip the 1.4 zoom inside the panel (safe: overflow on the sticky
       element itself does not break its stickiness). */
    overflow: hidden;
}

/* Defensive: common Elementor image wrappers must stretch to fill the panel
   so the cover crop works regardless of widget nesting. */
.rb-section-motion .rb-image-motion > .elementor-widget-container,
.rb-section-motion .rb-image-motion figure,
.rb-section-motion .rb-image-motion a {
    display: block;
    height: 100%;
    margin: 0;
}

.rb-section-motion .rb-image-motion img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/*------------------------------------------------------------------*\
    CONTAINER MOTION — .rb-container-motion (bg-media containers)
    Same stacking reveal, but each PANEL is a top-level Elementor container
    with a BACKGROUND video/image (no <img> widget). These are SEPARATE
    containers (no .rb-section-motion stage): consecutive sticky panels stack
    at the scroll root on their own. The JS targets the bg-video wrapper for
    the clip-wipe + zoom (see getMotionTarget); the container's own content
    keeps its Elementor animations. Works desktop + mobile.
\*------------------------------------------------------------------*/

.rb-container-motion {
    position: sticky;
    top: 0;
    height: 100vh;       /* fallback */
    height: 100svh;      /* avoids mobile URL-bar jump */
    overflow: hidden;    /* contains the bg zoom; safe on the sticky element */
    /* Reveal progress (100 = clipped/hidden from the top → 0 = fully shown).
       The JS animates this; the bg-video wrapper AND the Elementor container
       overlay (.e-con::before) both read it, so they wipe in TOGETHER (no static
       overlay band). Default 0 = shown (base panel / no JS). */
    --rb-reveal-pct: 0;
}

/* Elementor's bg-video wrapper covers the panel and is the animation target. */
.rb-container-motion > .elementor-background-video-container {
    position: absolute;
    inset: 0;
}

/* Shared reveal clip: the bg-video wrapper + the container overlay pseudo wipe
   in together, driven by --rb-reveal-pct above. Content is NOT clipped. */
.rb-container-motion > .elementor-background-video-container,
.rb-container-motion::before {
    -webkit-clip-path: inset(calc(var(--rb-reveal-pct) * 1%) 0% 0% 0%);
            clip-path: inset(calc(var(--rb-reveal-pct) * 1%) 0% 0% 0%);
}

/*------------------------------------------------------------------*\
    SPLIT — .rb-image-motion--split (vertical diptych — MOBILE ONLY)
    Each marked panel is a single image widget (one <img>). On MOBILE the
    marked panels stop stacking and instead pin as equal vertical slices of
    ONE 100vh screen (2 → 50vh each) via STAGGERED sticky tops — keeping the
    section-motion sticky concept, gap-less so no background shows between
    them. The soft seam-anchored zoom on entry is added by JS (buildDiptych).

    On DESKTOP (min-width: 1024px) the diptych is OFF: each split image is a
    normal full-screen 100vh stacking panel again (JS runs buildMotion). The
    overrides here are the mobile base; the desktop block below reverts them.

    (Two-panel case below. For N slices, offset each sticky top by
    i × (100/N)vh and set height to 100/N vh.)
\*------------------------------------------------------------------*/

.rb-section-motion .rb-image-motion--split {
    /* keep position:sticky from .rb-image-motion above; just halve the height */
    height: 50vh;
    height: 50svh;
    padding: 0;
}

/* Stagger the sticky tops so the two halves pin into one 100vh screen instead
   of both sticking at top:0 and overlapping. */
.rb-section-motion .rb-image-motion--split:nth-of-type(1) {
    top: 0;
}
.rb-section-motion .rb-image-motion--split:nth-of-type(2) {
    top: 50vh;
    top: 50svh;
}

/* Desktop: diptych OFF — each split image is a full-screen 100vh stacking
   panel again (reverts the 50/50 overrides above). */
@media (min-width: 1024px) {
    .rb-section-motion .rb-image-motion--split {
        height: 100vh;
        height: 100svh;
    }
    .rb-section-motion .rb-image-motion--split:nth-of-type(2) {
        top: 0;
    }
}