/**
 * GenerateBlocks GSAP Effects — Frontend Styles.
 *
 * Base styles that prevent flash-of-unstyled-content (FOUC) and
 * provide structural CSS for the animation effects.
 *
 * @package GenerateBlocks_GSAP_Effects
 */

/* ── Anti-FOUC: hide elements until GSAP initializes ─────────────────────── */

[data-gbgsap-effect="char-split"] {
	visibility: visible; /* Ensure visibility when JS fails gracefully */
}

/* ── Background Highlight base styles ────────────────────────────────────── */

[data-gbgsap-effect="bg-highlight"] {
	background-repeat: no-repeat;
	background-position: 0 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ── Character Split: overflow clip on split elements ────────────────────── */

[data-gbgsap-effect="char-split"] .word,
[data-gbgsap-effect="char-split"] .line {
	overflow: hidden;
	display: inline-block;
	white-space: nowrap; /* Prevent word-breaking when split into chars */
}

[data-gbgsap-effect="char-split"] .char {
	display: inline-block;
	will-change: transform, opacity;
}

/* ── Text Highlight on Scroll: structural styles ─────────────────────────── */

[data-gbgsap-effect="text-highlight"] .word {
	display: inline-block;
	white-space: nowrap; /* Prevent word-breaking when split into chars */
}

[data-gbgsap-effect="text-highlight"] .char,
[data-gbgsap-effect="text-highlight"] .line {
	display: inline-block;
	will-change: color;
}

/* ── Image Reveal on Scroll: structural styles ──────────────────────────── */

[data-gbgsap-effect="image-reveal"] {
	position: relative;
	overflow: hidden;
}

[data-gbgsap-effect="image-reveal"] img {
	will-change: clip-path, transform;
}



/* ── ScrollTrigger Developer Markers (dev mode only) ─────────────────────── */

.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
	z-index: 99999 !important;
	font-size: 11px !important;
}

/* ── Reduced Motion Preference ───────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	[data-gbgsap-effect] {
		transition: none !important;
		animation: none !important;
	}

	[data-gbgsap-effect="bg-highlight"] {
		background-size: 100% var(--gbgsap-hl-height, 40%) !important;
	}

	[data-gbgsap-effect="char-split"] .char,
	[data-gbgsap-effect="char-split"] .word,
	[data-gbgsap-effect="char-split"] .line {
		opacity: 1 !important;
		transform: none !important;
	}

	[data-gbgsap-effect="text-highlight"] .char,
	[data-gbgsap-effect="text-highlight"] .word,
	[data-gbgsap-effect="text-highlight"] .line {
		color: inherit !important;
	}

	[data-gbgsap-effect="image-reveal"] img {
		clip-path: none !important;
		transform: none !important;
	}


}