/**
 * 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:
 *
 *      pp-drift           — Gentle horizontal drift animation
 *      pp-drift-slow      — Slow drift (15s)
 *      pp-drift-fast      — Fast drift (5s)
 *      pp-scroll-fade     — Fade in on scroll
 *      pp-scroll-grow     — Grow from flat on scroll
 *      pp-scroll-slide    — Slide in on scroll
 *
 * ═══════════════════════════════════════════════════════════════════════
 *
 * @package ProjectPond
 * @since   1.0.0
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * DRIFT ANIMATION
 * Widens the shape layer and slides it laterally
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Target BB native shapes */
.pp-drift .fl-row-content-wrap .fl-builder-shape-layer,
/* Target UABB row separators */
.pp-drift .uabb-top-row-separator,
.pp-drift .uabb-bottom-row-separator,
/* Target PowerPack row separators */
.pp-drift .pp-row-separator-top,
.pp-drift .pp-row-separator-bottom {
    width: 200% !important;
    left: -50% !important;
    animation: pp-row-drift 10s ease-in-out infinite alternate;
}

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

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

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


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

/* ── Fade In ─────────────────────────────────────────────────────────────── */
.pp-scroll-fade .fl-row-content-wrap .fl-builder-shape-layer,
.pp-scroll-fade .uabb-top-row-separator,
.pp-scroll-fade .uabb-bottom-row-separator,
.pp-scroll-fade .pp-row-separator-top,
.pp-scroll-fade .pp-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);
}

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


/* ── Scale/Grow ──────────────────────────────────────────────────────────── */
.pp-scroll-grow .fl-row-content-wrap .fl-builder-shape-layer,
.pp-scroll-grow .uabb-top-row-separator,
.pp-scroll-grow .uabb-bottom-row-separator,
.pp-scroll-grow .pp-row-separator-top,
.pp-scroll-grow .pp-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 */
.pp-scroll-grow .fl-builder-shape-layer[data-position="top"],
.pp-scroll-grow .uabb-top-row-separator,
.pp-scroll-grow .pp-row-separator-top {
    transform-origin: top center;
}

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

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


/* ── Slide In ────────────────────────────────────────────────────────────── */
.pp-scroll-slide .fl-row-content-wrap .fl-builder-shape-layer,
.pp-scroll-slide .uabb-top-row-separator,
.pp-scroll-slide .uabb-bottom-row-separator,
.pp-scroll-slide .pp-row-separator-top,
.pp-scroll-slide .pp-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);
}

.pp-scroll-slide.pp-in-view .fl-row-content-wrap .fl-builder-shape-layer,
.pp-scroll-slide.pp-in-view .uabb-top-row-separator,
.pp-scroll-slide.pp-in-view .uabb-bottom-row-separator,
.pp-scroll-slide.pp-in-view .pp-row-separator-top,
.pp-scroll-slide.pp-in-view .pp-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-pp-* attributes */


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

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

    .pp-scroll-fade .fl-row-content-wrap .fl-builder-shape-layer,
    .pp-scroll-fade .uabb-top-row-separator,
    .pp-scroll-fade .uabb-bottom-row-separator,
    .pp-scroll-fade .pp-row-separator-top,
    .pp-scroll-fade .pp-row-separator-bottom,
    .pp-scroll-grow .fl-row-content-wrap .fl-builder-shape-layer,
    .pp-scroll-grow .uabb-top-row-separator,
    .pp-scroll-grow .uabb-bottom-row-separator,
    .pp-scroll-grow .pp-row-separator-top,
    .pp-scroll-grow .pp-row-separator-bottom,
    .pp-scroll-slide .fl-row-content-wrap .fl-builder-shape-layer,
    .pp-scroll-slide .uabb-top-row-separator,
    .pp-scroll-slide .uabb-bottom-row-separator,
    .pp-scroll-slide .pp-row-separator-top,
    .pp-scroll-slide .pp-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
 * ═══════════════════════════════════════════════════════════════════════════ */

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

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