/**
 * Zoom Text — texto que se preenche e atravessa a tela na rolagem.
 *
 * Estado padrão (sem JS, editor, movimento reduzido): o título preenchido,
 * centralizado numa seção da altura da tela, parado.
 *
 * Com .is-brz-zoom o brz-zoom-text.js assumiu e escreve o progresso em
 * custom properties; tudo que se move está aqui:
 *
 *   --brzzt-line   0–1 por linha: quanto da linha já se preencheu
 *   --brzzt-zoom   0–1: avanço do zoom (já suavizado)
 *   --brzzt-scale  escala final do zoom
 *   --brzzt-bg     0–1: avanço da troca de fundo
 *
 * @package Brz_Elements
 * @since   1.4.0
 */

.brz-zoom {
	--brzzt-fill: #ffffff;
	--brzzt-empty: #555555;
	--brzzt-end-bg: transparent;
	--brzzt-distance: 1500px;
	position: relative;
}

.brz-zoom__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.brz-zoom__title {
	max-width: 716px;
	margin: 0 auto;
	color: var(--brzzt-fill);
	font-size: 142px;
	line-height: 0.9;
	text-align: center;
}

/* Com o efeito ligado ------------------------------------------------- */

/* O palco fica preso por uma tela inteira mais a distância do efeito (como
   o end: "bottom+=1500" do tema original); a seção cresce esse tanto. */
.brz-zoom.is-brz-zoom {
	height: calc(200vh + var(--brzzt-distance));
	height: calc(200svh + var(--brzzt-distance));
}


/* O fundo final cobre o palco por cima do fundo da seção. */
.brz-zoom.is-brz-zoom .brz-zoom__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--brzzt-end-bg);
	opacity: var(--brzzt-bg, 0);
}

.brz-zoom.is-brz-zoom .brz-zoom__stage {
	position: relative;
	isolation: isolate;
}

/* Rolagem nativa: o navegador prende o palco. */
.brz-zoom.is-brz-zoom-sticky .brz-zoom__stage {
	position: sticky;
	top: 0;
}

/* Dentro de ScrollSmoother: o JS prende o palco por translateY. */
.brz-zoom.is-brz-zoom-manual .brz-zoom__stage {
	will-change: transform;
}

.brz-zoom.is-brz-zoom .brz-zoom__title {
	opacity: calc(1 - var(--brzzt-zoom, 0));
	transform: scale(calc(1 + (var(--brzzt-scale, 40) - 1) * var(--brzzt-zoom, 0)));
	/* Sem will-change: com ele o navegador rasteriza o texto no tamanho
	   original e estica a imagem, e a 40x as letras ficam borradas. */
}

/* Cada linha é um gradiente meio preenchido, meio vazio, recortado pelas
   letras; deslizar o gradiente preenche a linha da esquerda para a direita. */
.brz-zoom__line {
	display: block;
	background-image: linear-gradient(to right, var(--brzzt-fill) 50%, var(--brzzt-empty) 50%);
	background-size: 200% 100%;
	background-position-x: calc(100% - var(--brzzt-line, 1) * 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (max-width: 767px) {
	.brz-zoom__title {
		font-size: 76px;
	}
}

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