/*
 * DIB Smooth Text Rotator — stylesheet
 * ---------------------------------------------------------------
 * All phrases live stacked in the same CSS Grid cell so WIDTH never
 * jumps. HEIGHT is handled differently: the JS measures each phrase's
 * real rendered height and sets it on .dibct-rotator, which is why
 * this file has "transition: height ..." below — so a 1-line phrase
 * gets a short box and a 2-line phrase gets a tall box, animating
 * smoothly between the two instead of always reserving space for the
 * tallest phrase (which is what caused the leftover blank gap).
 */

.dibct-wrapper {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 0.35em;
	line-height: 1.3;
	--dibct-transition: 400ms;
}

.dibct-prefix {
	display: inline-block;
	white-space: nowrap;
}

.dibct-rotator {
	display: inline-grid;
	position: relative;
	vertical-align: baseline;
	overflow: hidden;                 /* clip to the JS-controlled height */
	transition: height var(--dibct-transition) ease;
}

.dibct-word {
	grid-area: 1 / 1 / 2 / 2;
	display: inline-block;
	align-self: start;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0);
	white-space: normal;
	will-change: opacity, transform;
	transition:
		opacity var(--dibct-transition) ease,
		transform var(--dibct-transition) ease,
		visibility 0s linear var(--dibct-transition);
}

.dibct-word.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity var(--dibct-transition) ease,
		transform var(--dibct-transition) ease,
		visibility 0s linear 0s;
}

/* Fade + slide up (default) */
.dibct-effect-fade-up .dibct-word { transform: translateY(14px); }
.dibct-effect-fade-up .dibct-word.is-active { transform: translateY(0); }

/* Fade + slide down */
.dibct-effect-fade-down .dibct-word { transform: translateY(-14px); }
.dibct-effect-fade-down .dibct-word.is-active { transform: translateY(0); }

/* Fade only */
.dibct-effect-fade .dibct-word { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.dibct-rotator { transition: none; }
	.dibct-word,
	.dibct-word.is-active {
		transition: opacity var(--dibct-transition) ease, visibility 0s;
		transform: none !important;
	}
}