/**
 * Elementor Text Animations — Core Stylesheet v1.1.0
 *
 * Classes:
 *  .eta-split          Parent element whose text has been processed.
 *  .eta-char           Individual character span.
 *  .eta-word           Individual word span.
 *  .eta-invert-fill    Absolutely positioned fill overlay for Text Invert.
 *  .eta-animated       Applied after animation completes (JS-set).
 *  .eta-done           Applied after will-change cleanup (JS-set).
 */

/* =============================================================================
   1. FOUC Guard
   Hides split items until JS sets their initial from-state.
   Prevents a flash of fully-visible text before GSAP fires.
   ============================================================================= */

[data-eta-enabled="true"]:not([data-eta-initialized]) .eta-char,
[data-eta-enabled="true"]:not([data-eta-initialized]) .eta-word {
	opacity: 0;
}

/* Text Invert: hide overlay until JS builds it */
[data-eta-enabled="true"][data-eta-type="text-invert"]:not([data-eta-initialized]) .elementor-heading-title,
[data-eta-enabled="true"][data-eta-type="text-invert"]:not([data-eta-initialized]) .elementor-text-editor {
	/* Base color is set inline by JS; nothing to pre-hide here */
}

/* =============================================================================
   2. Split Container
   ============================================================================= */

.eta-split {
	position: relative;
}

/* =============================================================================
   3. Character Spans
   ============================================================================= */

.eta-char {
	display: inline-block;
	line-height: inherit;
	white-space: normal; /* was: pre — caused leading space at line-wrap */
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	text-decoration: inherit;
}

/* =============================================================================
   4. Word Spans
   ============================================================================= */

.eta-word {
	display: inline-block;
	line-height: inherit;
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	text-decoration: inherit;
}

/* =============================================================================
   5. Text Invert — Color Fill Overlay
   ============================================================================= */

/**
 * .eta-invert-fill
 *
 * A cloned copy of the text, absolutely positioned on top of the original.
 * Its clip-path is animated from the "closed" state to fully revealed.
 * Color is set inline by JS (fill color).
 *
 * The parent element receives position:relative + the base color via JS.
 */
.eta-invert-fill {
	/* Layout: cover the parent entirely */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Inherit all typographic traits from the parent */
	font-size:      inherit;
	font-family:    inherit;
	font-weight:    inherit;
	font-style:     inherit;
	line-height:    inherit;
	letter-spacing: inherit;
	word-spacing:   inherit;
	text-align:     inherit;
	text-transform: inherit;
	white-space:    inherit;

	/* GPU layer: clip-path drives the reveal */
	will-change: clip-path;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	/* Prevent overlay from intercepting mouse events */
	pointer-events: none;

	/* Ensure text doesn't reflow from position:absolute */
	display: block;
	overflow: visible;
}

/* Force fill color inheritance inside the overlay
   (overrides any color set on child elements in the original HTML) */
.eta-invert-fill * {
	color: inherit;
}

/* =============================================================================
   6. Per-type structural rules
   ============================================================================= */

/* Text Reveal needs inline-block for clip-path on span targets */
[data-eta-type="text-reveal"] .eta-split,
[data-eta-type="text-reveal"].eta-split {
	display: inline-block;
}

/* 3D Spin: preserve-3d set inline by JS; this is a defensive fallback */
[data-eta-type="3d-spin"] .eta-split,
[data-eta-type="3d-spin"].eta-split {
	transform-style: preserve-3d;
}

/* Scale + Move: GPU hint */
[data-eta-type="text-scale"] .eta-split,
[data-eta-type="text-scale"].eta-split,
[data-eta-type="text-move"] .eta-split,
[data-eta-type="text-move"].eta-split {
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =============================================================================
   7. Elementor Heading compatibility
   ============================================================================= */

.elementor-heading-title .eta-char,
.elementor-heading-title .eta-word {
	vertical-align: baseline;
}

/* Heading title needs position:relative for the fill overlay */
[data-eta-type="text-invert"] .elementor-heading-title {
	position: relative;
	display:  inline-block; /* ensures height wraps text tightly for overlay */
}

/* Text Editor: ensure the container is positioned for the fill overlay */
[data-eta-type="text-invert"] .elementor-text-editor {
	position: relative;
}

/* =============================================================================
   8. Post-animation states (set by JS)
   ============================================================================= */

.eta-animated {
	animation-fill-mode: both;
}

.eta-done .eta-char,
.eta-done .eta-word,
.eta-done.eta-split {
	will-change: auto;
}

/* =============================================================================
   9. Accessibility — respect prefers-reduced-motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.eta-char,
	.eta-word,
	.eta-split {
		opacity:    1 !important;
		transform:  none !important;
		clip-path:  none !important;
		-webkit-clip-path: none !important;
		transition: none !important;
		animation:  none !important;
		will-change: auto !important;
	}

	[data-eta-enabled="true"]:not([data-eta-initialized]) .eta-char,
	[data-eta-enabled="true"]:not([data-eta-initialized]) .eta-word {
		opacity: 1;
	}

	.eta-invert-fill {
		clip-path: none !important;
		-webkit-clip-path: none !important;
		transition: none !important;
	}
}

/* =============================================================================
   10. Background Overlay Animation (Section / Container / Column)
   ============================================================================= */

/**
 * Stacking context: ensure the wrapper has a stacking context so our
 * z-index: 0 overlay sits above the native Elementor background (which is
 * the element's own background-color / background-image, painted at z-index: auto)
 * but BELOW the actual page content.
 *
 * We achieve this by giving the inner content wrapper a higher z-index.
 * .elementor-container  = section inner wrapper (Elementor v3)
 * .elementor-widget-wrap = column inner wrapper
 * .e-con-inner           = flexbox container inner wrapper (Elementor v3.6+)
 */
[data-eta-bg-enabled="true"] {
	position: relative !important;
}

[data-eta-bg-enabled="true"] > .elementor-container,
[data-eta-bg-enabled="true"] > .elementor-widget-wrap,
[data-eta-bg-enabled="true"] > .e-con-inner {
	position: relative;
	z-index: 1;
}

/**
 * The animated overlay itself.
 * background-color reads the --eta-bg-color CSS custom property injected by PHP.
 * This means Elementor global colors (e.g. var(--e-global-color-abc123)) resolve
 * correctly through the browser's CSS variable cascade without JS needing to know
 * the actual hex value.
 */
.eta-bg-overlay {
	position:   absolute;
	inset:      0;
	z-index:    0;
	pointer-events: none;

	background-color: var(--eta-bg-color, rgba(0, 0, 0, 0.15));

	/* GPU compositing — only clip-path / opacity are animated */
	will-change:           clip-path, opacity;
	backface-visibility:   hidden;
	-webkit-backface-visibility: hidden;
}

/* Ensure the overlay covers any border-radius on the parent */
[data-eta-bg-enabled="true"] > .eta-bg-overlay {
	border-radius: inherit;
}

/* =============================================================================
   11. Reduced-motion override for background overlays
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.eta-bg-overlay {
		clip-path:         none !important;
		-webkit-clip-path: none !important;
		opacity:           1   !important;
		transition:        none !important;
		animation:         none !important;
		will-change:       auto !important;
	}
}