/* Text Animation — keyframes for all presets. Driven by CSS custom properties. */

.brxe-text-animation {
	--txa-duration: 600ms;
	--txa-delay: 0ms;
	--txa-stagger: 30ms;
	--txa-easing: cubic-bezier(.2, .7, .2, 1);
	--txa-color-1: currentColor;
	--txa-color-2: #00e5ff;
	--txa-color-3: #ff00aa;
	--txa-caret-width: 0.6em;
	display: block;
}

.brxe-text-animation .txa-char,
.brxe-text-animation .txa-word {
	display: inline-block;
	white-space: pre;
}

.brxe-text-animation .txa-word-wrap {
	display: inline-block;
	white-space: nowrap;
}

.brxe-text-animation .txa-line {
	display: block;
}

/* Reduced-motion belt-and-braces guard. */
@media (prefers-reduced-motion: reduce) {
	.brxe-text-animation .txa-char,
	.brxe-text-animation .txa-word,
	.brxe-text-animation .txa-line,
	.brxe-text-animation::before,
	.brxe-text-animation::after,
	.brxe-text-animation {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* Generic clip wrapper used by reveal-style presets. */
.brxe-text-animation .txa-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	line-height: inherit;
}
.brxe-text-animation .txa-mask.is-block {
	display: block;
}

/* ---------- fade-in-chars ---------- */
[data-txa-preset="fade-in-chars"] .txa-char,
[data-txa-preset="fade-in-chars"] .txa-word,
[data-txa-preset="fade-in-chars"] .txa-line {
	opacity: 0;
}
[data-txa-preset="fade-in-chars"].is-animated .txa-char,
[data-txa-preset="fade-in-chars"].is-animated .txa-word,
[data-txa-preset="fade-in-chars"].is-animated .txa-line {
	animation: txa-fade-in var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--txa-delay) + var(--i) * var(--txa-stagger));
}
[data-txa-preset="fade-in-chars"].is-out .txa-char,
[data-txa-preset="fade-in-chars"].is-out .txa-word,
[data-txa-preset="fade-in-chars"].is-out .txa-line {
	animation: txa-fade-out var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--i) * var(--txa-stagger));
}
@keyframes txa-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes txa-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- slide-up-words ---------- */
[data-txa-preset="slide-up-words"] {
	overflow: hidden;
}
[data-txa-preset="slide-up-words"] .txa-char,
[data-txa-preset="slide-up-words"] .txa-word,
[data-txa-preset="slide-up-words"] .txa-line {
	transform: translateY(110%);
	opacity: 0;
}
[data-txa-preset="slide-up-words"].is-animated .txa-char,
[data-txa-preset="slide-up-words"].is-animated .txa-word,
[data-txa-preset="slide-up-words"].is-animated .txa-line {
	animation: txa-slide-up var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--txa-delay) + var(--i) * var(--txa-stagger));
}
[data-txa-preset="slide-up-words"].is-out .txa-char,
[data-txa-preset="slide-up-words"].is-out .txa-word,
[data-txa-preset="slide-up-words"].is-out .txa-line {
	animation: txa-slide-up-out var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--i) * var(--txa-stagger));
}
@keyframes txa-slide-up {
	from { transform: translateY(110%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
@keyframes txa-slide-up-out {
	from { transform: translateY(0);     opacity: 1; }
	to   { transform: translateY(-110%); opacity: 0; }
}

/* ---------- reveal-up ---------- */
[data-txa-preset="reveal-up"] .txa-char,
[data-txa-preset="reveal-up"] .txa-word,
[data-txa-preset="reveal-up"] .txa-line {
	transform: translateY(110%);
}
[data-txa-preset="reveal-up"].is-animated .txa-char,
[data-txa-preset="reveal-up"].is-animated .txa-word,
[data-txa-preset="reveal-up"].is-animated .txa-line {
	animation: txa-reveal-up var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--txa-delay) + var(--i) * var(--txa-stagger));
}
[data-txa-preset="reveal-up"].is-out .txa-char,
[data-txa-preset="reveal-up"].is-out .txa-word,
[data-txa-preset="reveal-up"].is-out .txa-line {
	animation: txa-reveal-up-out var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--i) * var(--txa-stagger));
}
@keyframes txa-reveal-up {
	from { transform: translateY(110%); }
	to   { transform: translateY(0); }
}
@keyframes txa-reveal-up-out {
	from { transform: translateY(0); }
	to   { transform: translateY(-110%); }
}

/* ---------- blur-in ---------- */
[data-txa-preset="blur-in"] .txa-char,
[data-txa-preset="blur-in"] .txa-word,
[data-txa-preset="blur-in"] .txa-line {
	opacity: 0;
	filter: blur(12px);
}
[data-txa-preset="blur-in"].is-animated .txa-char,
[data-txa-preset="blur-in"].is-animated .txa-word,
[data-txa-preset="blur-in"].is-animated .txa-line {
	animation: txa-blur-in var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--txa-delay) + var(--i) * var(--txa-stagger));
}
[data-txa-preset="blur-in"].is-out .txa-char,
[data-txa-preset="blur-in"].is-out .txa-word,
[data-txa-preset="blur-in"].is-out .txa-line {
	animation: txa-blur-out var(--txa-duration) var(--txa-easing) both;
	animation-delay: calc(var(--i) * var(--txa-stagger));
}
@keyframes txa-blur-in  { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes txa-blur-out { from { opacity: 1; filter: blur(0); }    to { opacity: 0; filter: blur(12px); } }

/* ---------- wave ---------- */
[data-txa-preset="wave"] .txa-char {
	transform: translateY(0);
}
[data-txa-preset="wave"].is-animated .txa-char {
	animation: txa-wave var(--txa-duration) var(--txa-easing) infinite alternate;
	animation-delay: calc(var(--txa-delay) + var(--i) * var(--txa-stagger));
}
@keyframes txa-wave {
	from { transform: translateY(0.15em); }
	to   { transform: translateY(-0.35em); }
}

/* ---------- glitch ---------- */
[data-txa-preset="glitch"] {
	position: relative;
	color: var(--txa-color-1);
}
[data-txa-preset="glitch"]::before,
[data-txa-preset="glitch"]::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
}
[data-txa-preset="glitch"].is-animated::before {
	color: var(--txa-color-2);
	mix-blend-mode: screen;
	opacity: 0.85;
	animation: txa-glitch-1 var(--txa-duration) infinite linear alternate-reverse;
}
[data-txa-preset="glitch"].is-animated::after {
	color: var(--txa-color-3);
	mix-blend-mode: screen;
	opacity: 0.85;
	animation: txa-glitch-2 var(--txa-duration) infinite linear alternate-reverse;
}
@keyframes txa-glitch-1 {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(-2px, 1px); }
	40%  { transform: translate(-1px, -1px); }
	60%  { transform: translate(2px, 1px); }
	80%  { transform: translate(1px, -2px); }
	100% { transform: translate(0, 0); }
}
@keyframes txa-glitch-2 {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(2px, -1px); }
	40%  { transform: translate(1px, 1px); }
	60%  { transform: translate(-2px, -1px); }
	80%  { transform: translate(-1px, 2px); }
	100% { transform: translate(0, 0); }
}

/* ---------- gradient-shimmer ---------- */
[data-txa-preset="gradient-shimmer"] {
	background-image: linear-gradient(
		90deg,
		var(--txa-color-1) 0%,
		var(--txa-color-2) 50%,
		var(--txa-color-3) 100%
	);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
[data-txa-preset="gradient-shimmer"].is-animated {
	animation: txa-shimmer var(--txa-duration) var(--txa-easing) infinite;
}
@keyframes txa-shimmer {
	0%   { background-position: 200% center; }
	100% { background-position: 0% center; }
}

/* ---------- typewriter ---------- */
[data-txa-preset="typewriter"] .txa-char {
	opacity: 0;
}
[data-txa-preset="typewriter"] .txa-char.is-shown {
	opacity: 1;
}
[data-txa-preset="typewriter"] .txa-caret {
	display: inline-block;
	width: var(--txa-caret-width);
	height: 1em;
	background: var(--txa-color-1);
	vertical-align: text-bottom;
	margin-left: 0.05em;
	transform: translateY(0.1em);
}
[data-txa-preset="typewriter"].is-typed .txa-caret {
	animation: txa-blink 1s step-end infinite;
}
@keyframes txa-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}
