/**
 * 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;
}

/* Added by JS when a horizontal row initializes — clips the sideways
   overflow of 100vw panels so the document never scrolls horizontally.
   (Previously this only worked when some OTHER stylesheet happened to set
   body overflow-x hidden.) */
body.pa-sa-has-horizontal {
	overflow-x: hidden;
}

[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;
}

/* Panels are full-viewport slides: without a height default they size to
   their content and the pinned row shows a half-empty screen. svh accounts
   for mobile browser chrome. Page CSS can still override padding/alignment. */
[data-pa-sa-mode="horizontal"] .fl-col > .fl-col-content {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

/* ── 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%;
	}
}

/* Note: no viewport-width fallback here — since 2.9.1 the mode attribute is
   only set when the mode actually initializes, so [data-pa-sa-mode] always
   means "active". A blanket ≤768px stack rule would fight rows that opt in
   to running horizontal mode on phones (mobile: full/reduced). */

/* ── 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;
}