/* Image Fan Carousel plugin - Text Block widget styles */

.ifc-text-reveal-wrap {
	--ifc-tr-align: left;
	--ifc-tr-subtext-title-gap: 12px;
	--ifc-tr-title-desc-gap: 12px;

	display: flex;
	flex-direction: column;
	text-align: var( --ifc-tr-align );
	max-width: 100%;
	box-sizing: border-box;
}

.ifc-text-reveal-subtext,
.ifc-text-reveal-title,
.ifc-text-reveal-description {
	margin: 0;
	font: inherit;
	color: inherit;
}

.ifc-text-reveal-title:not( :first-child ) {
	margin-top: var( --ifc-tr-subtext-title-gap );
}

.ifc-text-reveal-description:not( :first-child ) {
	margin-top: var( --ifc-tr-title-desc-gap );
}

/* Each scramble target (one per line, split on <br>). inline-block lets
   opacity/transform transitions apply cleanly and predictably. */
.ifc-text-reveal-wrap [data-ifc-scramble] {
	display: inline-block;
	opacity: 1;
	transform: translateY( 0 );
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Server-rendered "pending" state: text starts invisible so there is no
   flash of plain text before the scramble reveal plays. Removed by
   text-reveal.js right as the reveal starts (or immediately, in any
   fallback case where the animation won't run at all). */
.ifc-text-reveal-wrap.ifc-tr-pending [data-ifc-scramble] {
	opacity: 0;
	transform: translateY( 8px );
}

/* While the scramble effect is running, lock the text to a monospace-ish
   tabular width so the reveal doesn't jitter the surrounding layout. */
.ifc-text-reveal-wrap.ifc-tr-animating [data-ifc-scramble] {
	font-variant-numeric: tabular-nums;
}