/**
 * Pretpot Layered Section Color Swipe
 * Multi-layer horizontal swipe animation
 */

/* Section/column must be a stacking context so the swipe container
   can use negative z-index to sit behind the section's own content. */
.elementor-section.pretpot-has-layered-swipe,
.elementor-column.pretpot-has-layered-swipe,
.e-con.pretpot-has-layered-swipe {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* ── Swipe container ───────────────────────────────────────────────────────
   z-index: -1 puts the entire animation behind the section's content
   widgets (headings, buttons, etc.) while still sitting above the
   section's own CSS background (which lives outside this stacking context). */
.pretpot-layered-swipe-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    display: none;
    z-index: -1;
}

.pretpot-layered-swipe-container.pretpot-swipe-ready {
    display: block;
}

/* ── End frame ─────────────────────────────────────────────────────────────
   Always rendered at z-index 0 inside the container.
   The swipe layers sit above it (z-index 1+) and sweep over it.
   Once all layers have swept back off-screen the end frame is revealed. */
.pretpot-swipe-end-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.pretpot-swipe-end-frame.type-color {
    background-color: var(--pretpot-end-color, #000);
}

.pretpot-swipe-end-frame.type-image {
    background-size: var(--pretpot-image-size, cover);
    background-position: center;
    background-repeat: no-repeat;
}

.pretpot-swipe-end-frame.type-video {
    overflow: hidden;
}

.pretpot-swipe-end-frame.type-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Individual swipe layer ────────────────────────────────────────────────
   Layers start fully off-screen (set by direction classes below).
   JS assigns z-index inline so layer 0 = bottom, layer N = top. */
.pretpot-swipe-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* ── Left-to-Right ─────────────────────────────────────────────────────── */

/* Idle: hidden off left edge */
.pretpot-swipe-direction-ltr .pretpot-swipe-layer {
    transform: translateX(-101%);
}

/* Phase 1: sweep in from left */
.pretpot-swipe-direction-ltr .pretpot-swipe-layer.is-sweeping-in {
    animation: pretpotLTR-in var(--pretpot-dur, 600ms) cubic-bezier(0.65, 0, 0.35, 1) both;
    animation-delay: var(--pretpot-delay, 0ms);
}

/* Phase 2: sweep out to right — reveal end frame */
.pretpot-swipe-direction-ltr .pretpot-swipe-layer.is-sweeping-out {
    animation: pretpotLTR-out var(--pretpot-out-dur, 600ms) cubic-bezier(0.65, 0, 0.35, 1) both;
    animation-delay: var(--pretpot-out-delay, 0ms);
}

@keyframes pretpotLTR-in {
    from { transform: translateX(-101%); }
    to   { transform: translateX(0); }
}

@keyframes pretpotLTR-out {
    from { transform: translateX(0); }
    to   { transform: translateX(101%); }
}

/* ── Right-to-Left ─────────────────────────────────────────────────────── */

.pretpot-swipe-direction-rtl .pretpot-swipe-layer {
    transform: translateX(101%);
}

.pretpot-swipe-direction-rtl .pretpot-swipe-layer.is-sweeping-in {
    animation: pretpotRTL-in var(--pretpot-dur, 600ms) cubic-bezier(0.65, 0, 0.35, 1) both;
    animation-delay: var(--pretpot-delay, 0ms);
}

.pretpot-swipe-direction-rtl .pretpot-swipe-layer.is-sweeping-out {
    animation: pretpotRTL-out var(--pretpot-out-dur, 600ms) cubic-bezier(0.65, 0, 0.35, 1) both;
    animation-delay: var(--pretpot-out-delay, 0ms);
}

@keyframes pretpotRTL-in {
    from { transform: translateX(101%); }
    to   { transform: translateX(0); }
}

@keyframes pretpotRTL-out {
    from { transform: translateX(0); }
    to   { transform: translateX(-101%); }
}

/* Fully gone after sweep-out — keeps it off screen without animation */
.pretpot-swipe-layer.is-done {
    transform: translateX(101%) !important;
    animation: none !important;
}