/**
 * hachitec blocks - Texto rotativo / typewriter
 * Estilos compartidos entre el editor y el frontend.
 */

.hachitec-rotating-text {
	--hachitec-rt-color: currentColor;
}

/*
 * La tipografia se aplica al wrapper (los supports de Gutenberg). Las partes
 * internas la heredan de forma explicita para que ninguna regla del tema que
 * apunte a spans dentro de encabezados les meta otro tamaño o familia.
 */
.hachitec-rotating-text__prefix,
.hachitec-rotating-text__suffix,
.hachitec-rotating-text__rotator,
.hachitec-rotating-text__sizer,
.hachitec-rotating-text__live,
.hachitec-rotating-text__word,
.hachitec-rotating-text__cursor {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.hachitec-rotating-text.has-text-align-left {
	text-align: left;
}

.hachitec-rotating-text.has-text-align-center {
	text-align: center;
}

.hachitec-rotating-text.has-text-align-right {
	text-align: right;
}

/*
 * El sizer y la linea viva comparten la misma celda de grid: el sizer reserva
 * el ancho de la palabra mas larga (mas el cursor) y la linea viva se dibuja
 * encima. Palabra y cursor van juntos en la linea viva, uno al lado del otro,
 * para que el cursor acompañe al texto mientras se escribe.
 */
.hachitec-rotating-text__rotator {
	display: inline-grid;
	align-items: baseline;
	vertical-align: baseline;
}

.hachitec-rotating-text__sizer,
.hachitec-rotating-text__live {
	grid-area: 1 / 1;
	white-space: pre;
}

.hachitec-rotating-text__sizer {
	visibility: hidden;
	pointer-events: none;
}

.hachitec-rotating-text__live {
	justify-self: start;
}

.hachitec-rotating-text__word {
	color: var(--hachitec-rt-color);
}

.hachitec-rotating-text__cursor {
	color: var(--hachitec-rt-color);
	font-weight: 400;
	margin-left: 0.08em;
	user-select: none;
}

.hachitec-rotating-text.has-cursor-blink .hachitec-rotating-text__cursor {
	animation: hachitec-rt-blink 1s steps(1, end) infinite;
}

/* El cursor del sizer solo ocupa lugar: no tiene por que parpadear. */
.hachitec-rotating-text__sizer .hachitec-rotating-text__cursor {
	animation: none !important;
}

@keyframes hachitec-rt-blink {
	0%,
	49% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: 0;
	}
}

/* Desvanecido */
.hachitec-rotating-text.is-mode-fade .hachitec-rotating-text__word {
	opacity: 1;
	transition: opacity 300ms ease;
}

.hachitec-rotating-text.is-mode-fade.is-out .hachitec-rotating-text__word {
	opacity: 0;
}

/* Deslizamiento */
.hachitec-rotating-text.is-mode-slide .hachitec-rotating-text__live {
	overflow: hidden;
}

.hachitec-rotating-text.is-mode-slide .hachitec-rotating-text__word {
	display: inline-block;
	opacity: 1;
	transform: translateY(0);
	transition: transform 300ms ease, opacity 300ms ease;
}

.hachitec-rotating-text.is-mode-slide.is-out .hachitec-rotating-text__word {
	opacity: 0;
	transform: translateY(-0.6em);
}

/*
 * Con prefers-reduced-motion el bloque no tipea ni desplaza, pero sigue
 * cambiando de palabra con un fundido suave: un fundido de opacidad no genera
 * movimiento y evita que el bloque parezca roto. Se aplica solo si el bloque
 * tiene activado "respetar reduccion de movimiento".
 */
@media (prefers-reduced-motion: reduce) {
	.hachitec-rotating-text.respects-reduced-motion .hachitec-rotating-text__word {
		transform: none !important;
	}

	/* Sin tipeo el cursor no representa nada: se va del todo. */
	.hachitec-rotating-text.respects-reduced-motion .hachitec-rotating-text__cursor {
		display: none !important;
	}
}

.hachitec-rotating-text.is-reduced-motion .hachitec-rotating-text__word {
	transform: none;
	transition: opacity 300ms ease;
}

.hachitec-rotating-text.is-reduced-motion.is-out .hachitec-rotating-text__word {
	opacity: 0;
}

.hachitec-rotating-text.is-reduced-motion .hachitec-rotating-text__cursor {
	display: none;
}