.cea-animated-button-wrap {
	display: flex;
	width: 100%;
}

.cea-animated-button,
.cea-animated-button *,
.cea-animated-button::before,
.cea-animated-button::after,
.cea-animated-button *::before,
.cea-animated-button *::after {
	box-sizing: border-box;
}

.cea-animated-button {
	-webkit-tap-highlight-color: transparent;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: 0;
	text-decoration: none !important;
	vertical-align: middle;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.2;
}

.cea-animated-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Botón 1 — Glitch / Chitchat. Adaptado del efecto suministrado de Uiverse.io / Galahhad. */
.cea-animated-button--glitch-text {
	--cea-b1-bg: #292929;
	--cea-b1-hover-bg: #333333;
	--cea-b1-text: #ffffff;
	--cea-b1-hover-text: #fac921;
	--cea-b1-py: 15px;
	--cea-b1-px: 20px;
	--cea-b1-letter-spacing: 0.1rem;
	--cea-b1-radius: 0px;
	--cea-b1-border-color: transparent;
	--cea-b1-border-width: 0px;
	--cea-b1-transition: 300ms;
	--cea-b1-animation-duration: 1200ms;
	padding: var(--cea-b1-py) var(--cea-b1-px);
	background: var(--cea-b1-bg);
	color: var(--cea-b1-text);
	border: var(--cea-b1-border-width) solid var(--cea-b1-border-color);
	border-radius: var(--cea-b1-radius);
	overflow: hidden;
	font-family: Menlo, "Roboto Mono", monospace;
	font-weight: 600;
	transition: background-color var(--cea-b1-transition), color var(--cea-b1-transition), transform var(--cea-b1-transition);
}

.cea-animated-button--glitch-text .cea-animated-button__glitch-label {
	position: relative;
	display: inline-grid;
	box-sizing: border-box;
	letter-spacing: var(--cea-b1-letter-spacing);
	transition: color var(--cea-b1-transition);
	isolation: isolate;
}

/*
 * The hidden duplicate reserves the exact width of the original phrase.
 * This prevents long labels from changing the button width while JavaScript
 * scrambles every visible character during the glitch.
 */
.cea-animated-button--glitch-text .cea-animated-button__glitch-label::after {
	content: attr(data-text);
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
	white-space: normal;
}

.cea-animated-button--glitch-text .cea-animated-button__glitch-visual {
	position: absolute;
	inset: 0;
	display: block;
	white-space: normal;
	min-width: 0;
}

.cea-animated-button--glitch-text:hover,
.cea-animated-button--glitch-text:focus-visible {
	background: var(--cea-b1-hover-bg);
}

.cea-animated-button--glitch-text:hover .cea-animated-button__glitch-label,
.cea-animated-button--glitch-text:focus-visible .cea-animated-button__glitch-label {
	color: var(--cea-b1-hover-text);
}

.cea-animated-button--glitch-text.cea-is-glitching .cea-animated-button__glitch-visual {
	animation: cea-button-full-glitch var(--cea-b1-animation-duration) steps(2, end) both;
}

@keyframes cea-button-full-glitch {
	0% {
		transform: translate3d(-2px, 0, 0) skewX(-2deg);
		text-shadow: 2px 0 rgba(255, 0, 76, .8), -2px 0 rgba(0, 229, 255, .75);
	}
	12% {
		transform: translate3d(3px, -1px, 0) skewX(2deg);
		text-shadow: -3px 0 rgba(255, 0, 76, .7), 2px 0 rgba(0, 229, 255, .7);
	}
	28% {
		transform: translate3d(-1px, 1px, 0) skewX(-1deg);
		text-shadow: 2px 0 rgba(255, 0, 76, .55), -1px 0 rgba(0, 229, 255, .7);
	}
	44% {
		transform: translate3d(2px, 0, 0) skewX(1deg);
		text-shadow: -2px 0 rgba(255, 0, 76, .55), 3px 0 rgba(0, 229, 255, .55);
	}
	62% {
		transform: translate3d(-2px, 0, 0);
		text-shadow: 1px 0 rgba(255, 0, 76, .4), -2px 0 rgba(0, 229, 255, .45);
	}
	80% {
		transform: translate3d(1px, 0, 0);
		text-shadow: -1px 0 rgba(255, 0, 76, .25), 1px 0 rgba(0, 229, 255, .3);
	}
	100% {
		transform: none;
		text-shadow: none;
	}
}

/* Botón 2 — Shine. Adaptado del efecto suministrado de Uiverse.io / neerajbaniwal. */
.cea-animated-button--shine-text {
	--cea-b2-bg: transparent;
	--cea-b2-hover-bg: var(--cea-b2-bg);
	--cea-b2-color-start: #9f9f9f;
	--cea-b2-color-highlight: #ffffff;
	--cea-b2-color-end: #868686;
	--cea-b2-py: 12px;
	--cea-b2-px: 48px;
	--cea-b2-letter-spacing: 0px;
	--cea-b2-border-color: transparent;
	--cea-b2-border-width: 0px;
	--cea-b2-radius: 0px;
	--cea-b2-duration: 3000ms;
	--cea-b2-distance: 180px;
	--cea-b2-transition: 300ms;
	padding: var(--cea-b2-py) var(--cea-b2-px);
	background: var(--cea-b2-bg);
	border: var(--cea-b2-border-width) solid var(--cea-b2-border-color);
	border-radius: var(--cea-b2-radius);
	color: var(--cea-b2-color-start);
	overflow: hidden;
	white-space: nowrap;
	transition: background-color var(--cea-b2-transition), border-color var(--cea-b2-transition), transform var(--cea-b2-transition);
}

.cea-animated-button--shine-text:hover,
.cea-animated-button--shine-text:focus-visible {
	background: var(--cea-b2-hover-bg);
}

.cea-animated-button--shine-text .cea-animated-button__shine-label {
	display: inline-block;
	letter-spacing: var(--cea-b2-letter-spacing);
	color: var(--cea-b2-color-start);
	background: linear-gradient(
		to right,
		var(--cea-b2-color-start) 0,
		var(--cea-b2-color-highlight) 10%,
		var(--cea-b2-color-end) 20%
	);
	background-position: 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-size-adjust: none;
}

.cea-animated-button--shine-continuous .cea-animated-button__shine-label {
	animation: cea-button-shine var(--cea-b2-duration) infinite linear;
	animation-fill-mode: forwards;
}

.cea-animated-button--shine-hover .cea-animated-button__shine-label {
	animation: none;
}

.cea-animated-button--shine-hover:hover .cea-animated-button__shine-label,
.cea-animated-button--shine-hover:focus-visible .cea-animated-button__shine-label {
	animation: cea-button-shine var(--cea-b2-duration) linear both;
}

@keyframes cea-button-shine {
	0% {
		background-position: 0 0;
	}
	60% {
		background-position: var(--cea-b2-distance) 0;
	}
	100% {
		background-position: var(--cea-b2-distance) 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cea-animated-button,
	.cea-animated-button *,
	.cea-animated-button::before,
	.cea-animated-button::after,
	.cea-animated-button *::before,
	.cea-animated-button *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}