/**
 * BB Animated Separators — Row Shape Animator
 *
 * This CSS provides animation classes that can be applied to existing
 * Beaver Builder rows to animate their native row shapes, as well as
 * UABB and PowerPack row separators.
 *
 * ═══════════════════════════════════════════════════════════════════════
 * USAGE (via CSS classes on BB rows):
 *
 *   1. Open row settings → Advanced → CSS Class
 *   2. Add one of these classes:
 *
 *      pa-drift           — Gentle horizontal drift, one cycle (4s)
 *      pa-drift-slow      — Slow drift, one cycle (5s)
 *      pa-drift-fast      — Fast drift, one cycle (3s)
 *      pa-scroll-fade     — Fade in on scroll
 *      pa-scroll-grow     — Grow from flat on scroll
 *      pa-scroll-slide    — Slide in on scroll
 *
 * ═══════════════════════════════════════════════════════════════════════
 *
 * @package ProjectPond
 * @since   1.0.0
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * DRIFT ANIMATION
 * Widens the shape layer and slides it laterally.
 *
 * 2.10.0.0 (WCAG 2.2.2): ONE cycle of at most 5 s that starts and ends on the
 * resting frame (translateX(0), the widened layer centered), so the shape
 * settles without a jump. slow 5s / medium 4s / fast 3s. Direction picks the
 * first move: alternate = left, right, back; left = out left and back;
 * right = out right and back. Amplitude (25% of the 200% layer = half the
 * row) is unchanged from the old infinite drift.
 * ═══════════════════════════════════════════════════════════════════════════ */

.pa-drift .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift .uabb-top-row-separator,
.pa-drift .uabb-bottom-row-separator,
.pa-drift .pa-row-separator-top,
.pa-drift .pa-row-separator-bottom {
    width: 200% !important;
    left: -50% !important;
    animation: pa-row-drift 4s ease-in-out 1;
}

.pa-drift-slow .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift-slow .uabb-top-row-separator,
.pa-drift-slow .uabb-bottom-row-separator,
.pa-drift-slow .pa-row-separator-top,
.pa-drift-slow .pa-row-separator-bottom {
    width: 200% !important;
    left: -50% !important;
    animation: pa-row-drift 5s ease-in-out 1;
}

.pa-drift-fast .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift-fast .uabb-top-row-separator,
.pa-drift-fast .uabb-bottom-row-separator,
.pa-drift-fast .pa-row-separator-top,
.pa-drift-fast .pa-row-separator-bottom {
    width: 200% !important;
    left: -50% !important;
    animation: pa-row-drift 3s ease-in-out 1;
}

/* Alternate (default): left, right, back to rest. */
@keyframes pa-row-drift {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-25%); }
    75%  { transform: translateX(25%); }
    100% { transform: translateX(0); }
}


/* ── Drift Direction (row settings: data-pa-drift-direction) ── */
/* Default "alternate" needs no override. Left/Right swap the keyframes for a
   single out-and-back move in that direction. Rows animated via manual CSS
   classes have no data attribute and keep the alternate keyframes. */

/* Left — out to the left and back */
.pa-drift[data-pa-drift-direction="left"] .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift[data-pa-drift-direction="left"] .uabb-top-row-separator,
.pa-drift[data-pa-drift-direction="left"] .uabb-bottom-row-separator,
.pa-drift[data-pa-drift-direction="left"] .pa-row-separator-top,
.pa-drift[data-pa-drift-direction="left"] .pa-row-separator-bottom,
.pa-drift-slow[data-pa-drift-direction="left"] .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift-slow[data-pa-drift-direction="left"] .uabb-top-row-separator,
.pa-drift-slow[data-pa-drift-direction="left"] .uabb-bottom-row-separator,
.pa-drift-slow[data-pa-drift-direction="left"] .pa-row-separator-top,
.pa-drift-slow[data-pa-drift-direction="left"] .pa-row-separator-bottom,
.pa-drift-fast[data-pa-drift-direction="left"] .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift-fast[data-pa-drift-direction="left"] .uabb-top-row-separator,
.pa-drift-fast[data-pa-drift-direction="left"] .uabb-bottom-row-separator,
.pa-drift-fast[data-pa-drift-direction="left"] .pa-row-separator-top,
.pa-drift-fast[data-pa-drift-direction="left"] .pa-row-separator-bottom {
    animation-name: pa-row-drift-left;
    animation-direction: normal;
}

/* Right — out to the right and back */
.pa-drift[data-pa-drift-direction="right"] .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift[data-pa-drift-direction="right"] .uabb-top-row-separator,
.pa-drift[data-pa-drift-direction="right"] .uabb-bottom-row-separator,
.pa-drift[data-pa-drift-direction="right"] .pa-row-separator-top,
.pa-drift[data-pa-drift-direction="right"] .pa-row-separator-bottom,
.pa-drift-slow[data-pa-drift-direction="right"] .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift-slow[data-pa-drift-direction="right"] .uabb-top-row-separator,
.pa-drift-slow[data-pa-drift-direction="right"] .uabb-bottom-row-separator,
.pa-drift-slow[data-pa-drift-direction="right"] .pa-row-separator-top,
.pa-drift-slow[data-pa-drift-direction="right"] .pa-row-separator-bottom,
.pa-drift-fast[data-pa-drift-direction="right"] .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift-fast[data-pa-drift-direction="right"] .uabb-top-row-separator,
.pa-drift-fast[data-pa-drift-direction="right"] .uabb-bottom-row-separator,
.pa-drift-fast[data-pa-drift-direction="right"] .pa-row-separator-top,
.pa-drift-fast[data-pa-drift-direction="right"] .pa-row-separator-bottom {
    animation-name: pa-row-drift-right;
    animation-direction: normal;
}

@keyframes pa-row-drift-left {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-25%); }
    100% { transform: translateX(0); }
}

@keyframes pa-row-drift-right {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(25%); }
    100% { transform: translateX(0); }
}

/* Held below the fold: JS adds .pa-drift-wait to drift rows whose shapes are
   not yet on screen and removes it when they scroll in, so the single cycle
   is not spent off screen. The held frame is the resting frame. */
.pa-drift-wait .fl-row-content-wrap .fl-builder-shape-layer,
.pa-drift-wait .uabb-top-row-separator,
.pa-drift-wait .uabb-bottom-row-separator,
.pa-drift-wait .pa-row-separator-top,
.pa-drift-wait .pa-row-separator-bottom {
    animation: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * SCROLL REVEAL ANIMATIONS
 * Initial hidden states — JS adds .pa-in-view when visible
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fade In ─────────────────────────────────────────────────────────────── */
.pa-scroll-fade .fl-row-content-wrap .fl-builder-shape-layer,
.pa-scroll-fade .uabb-top-row-separator,
.pa-scroll-fade .uabb-bottom-row-separator,
.pa-scroll-fade .pa-row-separator-top,
.pa-scroll-fade .pa-row-separator-bottom {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pa-scroll-fade.pa-in-view .fl-row-content-wrap .fl-builder-shape-layer,
.pa-scroll-fade.pa-in-view .uabb-top-row-separator,
.pa-scroll-fade.pa-in-view .uabb-bottom-row-separator,
.pa-scroll-fade.pa-in-view .pa-row-separator-top,
.pa-scroll-fade.pa-in-view .pa-row-separator-bottom {
    opacity: 1;
    transform: translateY(0);
}


/* ── Scale/Grow ──────────────────────────────────────────────────────────── */
.pa-scroll-grow .fl-row-content-wrap .fl-builder-shape-layer,
.pa-scroll-grow .uabb-top-row-separator,
.pa-scroll-grow .uabb-bottom-row-separator,
.pa-scroll-grow .pa-row-separator-top,
.pa-scroll-grow .pa-row-separator-bottom {
    opacity: 0;
    transform: scaleY(0);
    transition: opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Set transform origin based on position */
.pa-scroll-grow .fl-builder-shape-layer[data-position="top"],
.pa-scroll-grow .uabb-top-row-separator,
.pa-scroll-grow .pa-row-separator-top {
    transform-origin: top center;
}

.pa-scroll-grow .fl-builder-shape-layer[data-position="bottom"],
.pa-scroll-grow .uabb-bottom-row-separator,
.pa-scroll-grow .pa-row-separator-bottom {
    transform-origin: bottom center;
}

.pa-scroll-grow.pa-in-view .fl-row-content-wrap .fl-builder-shape-layer,
.pa-scroll-grow.pa-in-view .uabb-top-row-separator,
.pa-scroll-grow.pa-in-view .uabb-bottom-row-separator,
.pa-scroll-grow.pa-in-view .pa-row-separator-top,
.pa-scroll-grow.pa-in-view .pa-row-separator-bottom {
    opacity: 1;
    transform: scaleY(1);
}


/* ── Slide In ────────────────────────────────────────────────────────────── */
.pa-scroll-slide .fl-row-content-wrap .fl-builder-shape-layer,
.pa-scroll-slide .uabb-top-row-separator,
.pa-scroll-slide .uabb-bottom-row-separator,
.pa-scroll-slide .pa-row-separator-top,
.pa-scroll-slide .pa-row-separator-bottom {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pa-scroll-slide.pa-in-view .fl-row-content-wrap .fl-builder-shape-layer,
.pa-scroll-slide.pa-in-view .uabb-top-row-separator,
.pa-scroll-slide.pa-in-view .uabb-bottom-row-separator,
.pa-scroll-slide.pa-in-view .pa-row-separator-top,
.pa-scroll-slide.pa-in-view .pa-row-separator-bottom {
    opacity: 1;
    transform: translateX(0);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ROW SETTINGS INTEGRATION
 * These are applied when users use the row settings panel extension
 * (via fl_builder_register_settings_form filter in the main plugin)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* The PHP will add data attributes to rows; JS reads them. */
/* Selectors below match rows with our custom data-pa-* attributes */


/* ═══════════════════════════════════════════════════════════════════════════════
 * ACCESSIBILITY
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pa-drift .fl-row-content-wrap .fl-builder-shape-layer,
    .pa-drift .uabb-top-row-separator,
    .pa-drift .uabb-bottom-row-separator,
    .pa-drift .pa-row-separator-top,
    .pa-drift .pa-row-separator-bottom,
    .pa-drift-slow .fl-row-content-wrap .fl-builder-shape-layer,
    .pa-drift-slow .uabb-top-row-separator,
    .pa-drift-slow .uabb-bottom-row-separator,
    .pa-drift-slow .pa-row-separator-top,
    .pa-drift-slow .pa-row-separator-bottom,
    .pa-drift-fast .fl-row-content-wrap .fl-builder-shape-layer,
    .pa-drift-fast .uabb-top-row-separator,
    .pa-drift-fast .uabb-bottom-row-separator,
    .pa-drift-fast .pa-row-separator-top,
    .pa-drift-fast .pa-row-separator-bottom {
        animation: none !important;
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }

    .pa-scroll-fade .fl-row-content-wrap .fl-builder-shape-layer,
    .pa-scroll-fade .uabb-top-row-separator,
    .pa-scroll-fade .uabb-bottom-row-separator,
    .pa-scroll-fade .pa-row-separator-top,
    .pa-scroll-fade .pa-row-separator-bottom,
    .pa-scroll-grow .fl-row-content-wrap .fl-builder-shape-layer,
    .pa-scroll-grow .uabb-top-row-separator,
    .pa-scroll-grow .uabb-bottom-row-separator,
    .pa-scroll-grow .pa-row-separator-top,
    .pa-scroll-grow .pa-row-separator-bottom,
    .pa-scroll-slide .fl-row-content-wrap .fl-builder-shape-layer,
    .pa-scroll-slide .uabb-top-row-separator,
    .pa-scroll-slide .uabb-bottom-row-separator,
    .pa-scroll-slide .pa-row-separator-top,
    .pa-scroll-slide .pa-row-separator-bottom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ── BB editor: nothing animates; previews show the final state ── */
.fl-builder-edit .pa-drift .fl-row-content-wrap .fl-builder-shape-layer,
.fl-builder-edit .pa-drift .uabb-top-row-separator,
.fl-builder-edit .pa-drift .uabb-bottom-row-separator,
.fl-builder-edit .pa-drift .pa-row-separator-top,
.fl-builder-edit .pa-drift .pa-row-separator-bottom,
.fl-builder-edit .pa-drift-slow .fl-row-content-wrap .fl-builder-shape-layer,
.fl-builder-edit .pa-drift-slow .uabb-top-row-separator,
.fl-builder-edit .pa-drift-slow .uabb-bottom-row-separator,
.fl-builder-edit .pa-drift-slow .pa-row-separator-top,
.fl-builder-edit .pa-drift-slow .pa-row-separator-bottom,
.fl-builder-edit .pa-drift-fast .fl-row-content-wrap .fl-builder-shape-layer,
.fl-builder-edit .pa-drift-fast .uabb-top-row-separator,
.fl-builder-edit .pa-drift-fast .uabb-bottom-row-separator,
.fl-builder-edit .pa-drift-fast .pa-row-separator-top,
.fl-builder-edit .pa-drift-fast .pa-row-separator-bottom {
    animation: none !important;
}

.fl-builder-edit .pa-scroll-fade .fl-row-content-wrap .fl-builder-shape-layer,
.fl-builder-edit .pa-scroll-fade .uabb-top-row-separator,
.fl-builder-edit .pa-scroll-fade .uabb-bottom-row-separator,
.fl-builder-edit .pa-scroll-fade .pa-row-separator-top,
.fl-builder-edit .pa-scroll-fade .pa-row-separator-bottom,
.fl-builder-edit .pa-scroll-grow .fl-row-content-wrap .fl-builder-shape-layer,
.fl-builder-edit .pa-scroll-grow .uabb-top-row-separator,
.fl-builder-edit .pa-scroll-grow .uabb-bottom-row-separator,
.fl-builder-edit .pa-scroll-grow .pa-row-separator-top,
.fl-builder-edit .pa-scroll-grow .pa-row-separator-bottom,
.fl-builder-edit .pa-scroll-slide .fl-row-content-wrap .fl-builder-shape-layer,
.fl-builder-edit .pa-scroll-slide .uabb-top-row-separator,
.fl-builder-edit .pa-scroll-slide .uabb-bottom-row-separator,
.fl-builder-edit .pa-scroll-slide .pa-row-separator-top,
.fl-builder-edit .pa-scroll-slide .pa-row-separator-bottom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * PREVENT OVERFLOW
 * Parent rows with drift animation should hide overflow to prevent
 * horizontal scrollbars from the widened separator
 * ═══════════════════════════════════════════════════════════════════════════ */

.pa-drift .fl-row-content-wrap,
.pa-drift-slow .fl-row-content-wrap,
.pa-drift-fast .fl-row-content-wrap {
    overflow: hidden;
}

/* Also prevent page-level horizontal scrollbar */
body.fl-builder {
    overflow-x: hidden;
}