/**
 * Animated Heading — título com animação de entrada e botão embutido.
 *
 * A tipografia vem toda do painel (ou do Kit): aqui só há estrutura,
 * animação e o botão em pílula.
 *
 * @package Brz_Elements
 * @since   1.4.0
 */

.brz-heading__title {
	margin: 0;
	color: inherit;
}

/* Cópia para leitor de tela: some da tela quando a versão dividida existe. */
[data-brz-split-ready="yes"] > .brz-heading__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.brz-heading__word,
.brz-heading__char {
	display: inline-block;
}

.brz-heading__word {
	white-space: nowrap;
}

.brz-heading__line {
	display: block;
	perspective: 400px;
}

/* A última linha fica inline para o botão continuar ao lado dela. */
.brz-heading__line:last-child {
	display: inline-block;
}

.brz-heading__line-inner {
	display: inline-block;
	transform-origin: 50% 0 -50px;
}

/* Entrada ---------------------------------------------------------------
 *
 * As classes is-brz-animated e is-brz-visible são adicionadas pelo
 * brz-reveal.js, nunca pelo PHP: sem JS o título nasce visível.
 */

.brz-heading--fade.is-brz-animated .brz-heading__title {
	opacity: 0;
	transform: translateY(50px);
}

.brz-heading--fade.is-brz-animated.is-brz-visible .brz-heading__title {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Entre o brz-reveal marcar o título como animado e o brz-heading.js
   dividi-lo (a divisão espera as fontes), o texto inteiro apareceria e
   sumiria em seguida. Fica escondido nesse intervalo — e, se a divisão
   nunca acontecer, a animação de segurança o devolve depois de 3s. */
.brz-heading--chars.is-brz-animated [data-brz-split]:not([data-brz-split-ready]),
.brz-heading--lines.is-brz-animated [data-brz-split]:not([data-brz-split-ready]) {
	opacity: 0;
	animation: brz-heading-failsafe 0s linear 3s forwards;
}

@keyframes brz-heading-failsafe {
	to {
		opacity: 1;
	}
}

/* Letra a letra: cada letra vem 20px da direita, 50ms depois da anterior. */
.brz-heading--chars.is-brz-animated .brz-heading__char {
	opacity: 0;
	transform: translateX(20px);
}

.brz-heading--chars.is-brz-animated.is-brz-visible .brz-heading__char {
	opacity: 1;
	transform: none;
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
	transition-delay: calc(0.1s + var(--i, 0) * 0.05s);
}

/* Linha a linha: cada linha gira de -80° para a posição, 100ms depois da anterior. */
.brz-heading--lines.is-brz-animated .brz-heading__line-inner {
	opacity: 0;
	transform: rotateX(-80deg);
}

.brz-heading--lines.is-brz-animated.is-brz-visible .brz-heading__line-inner {
	opacity: 1;
	transform: none;
	transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-delay: calc(0.3s + var(--i, 0) * 0.1s);
}

.brz-heading.is-brz-animated .brz-heading__button {
	opacity: 0;
}

.brz-heading.is-brz-animated.is-brz-visible .brz-heading__button {
	opacity: 1;
	transition: opacity 0.6s ease 0.6s;
}

/* Botão em pílula ------------------------------------------------------ */

.brz-heading__button {
	display: inline-flex;
	align-items: center;
	margin-left: 0.2em;
	color: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	vertical-align: middle;
	transform: translateY(-14px);
}

/* Blindagem contra o a:hover global do tema (ver brz-link-text.css). */
.brz-heading__button:hover,
.brz-heading__button:focus,
.brz-heading__button:focus-visible {
	color: inherit;
}

.brz-heading__button-text,
.brz-heading__button-icon {
	border: 1px solid currentColor;
	border-radius: 50px;
	transition: transform 0.3s;
}

.brz-heading__button-text {
	padding: 9px 25px;
	font-family: "DM Sans", sans-serif;
}

.brz-heading__button-icon {
	display: inline-flex;
	padding: 9px 11px;
}

.brz-heading__button-icon i,
.brz-heading__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	rotate: -30deg;
}

.brz-heading__button:hover .brz-heading__button-text,
.brz-heading__button:focus-visible .brz-heading__button-text {
	transform: rotate(-20deg);
}

.brz-heading__button:hover .brz-heading__button-icon,
.brz-heading__button:focus-visible .brz-heading__button-icon {
	transform: translateX(-7px);
}

@media (max-width: 1199px) {
	.brz-heading__button {
		display: flex;
		width: fit-content;
		margin: 16px 0 0;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brz-heading__button-text,
	.brz-heading__button-icon {
		transition: none;
	}
}

.brz-heading__empty {
	padding: 24px;
	border: 1px dashed currentColor;
	text-align: center;
	opacity: 0.6;
}