/**
 * Scroll Animator — Base Styles
 *
 * Static CSS for all three modes. Loaded only on pages that use the feature.
 *
 * @package Pond_Apex
 * @since   2.2.0
 */

/* ── Scroll-Trigger mode ─────────────────────────────── */
[data-pa-sa-mode="scroll-trigger"] .fl-col,
[data-pa-sa-mode="scroll-trigger"] .fl-module {
	will-change: transform, opacity;
}

/* ── Pin + Animate mode ──────────────────────────────── */
[data-pa-sa-mode="pin-animate"] > .fl-row-content-wrap {
	overflow: visible;
}

[data-pa-sa-mode="pin-animate"] {
	min-height: 100vh;
}

/* ── Horizontal Scroll mode ──────────────────────────── */
[data-pa-sa-mode="horizontal"] > .fl-row-content-wrap {
	overflow: visible;
}

[data-pa-sa-mode="horizontal"] .fl-col-group {
	display: flex;
	flex-wrap: nowrap;
}

[data-pa-sa-mode="horizontal"] .fl-col {
	flex: 0 0 100vw;
	width: 100vw;
	max-width: none;
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	[data-pa-sa-mode] .fl-col,
	[data-pa-sa-mode] .fl-module {
		opacity: 1 !important;
		transform: none !important;
		will-change: auto !important;
		transition: none !important;
	}

	[data-pa-sa-mode="horizontal"] .fl-col-group {
		flex-wrap: wrap;
	}

	[data-pa-sa-mode="horizontal"] .fl-col {
		flex: 1 1 auto;
		width: auto;
		max-width: 100%;
	}
}

/* ── BB Editor mode ──────────────────────────────────── */
body.fl-builder-edit [data-pa-sa-mode] .fl-col,
body.fl-builder-edit [data-pa-sa-mode] .fl-module {
	opacity: 1 !important;
	transform: none !important;
	will-change: auto !important;
}

body.fl-builder-edit [data-pa-sa-mode="horizontal"] .fl-col-group {
	flex-wrap: wrap;
}

body.fl-builder-edit [data-pa-sa-mode="horizontal"] .fl-col {
	flex: 1 1 auto;
	width: auto;
	max-width: 100%;
}

body.fl-builder-edit [data-pa-sa-mode]::before {
	content: "Scroll Animator";
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 11px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	z-index: 9999;
	white-space: nowrap;
	pointer-events: none;
}