/*
 * Camada de movimento — o par de assets/js/animations.js.
 *
 * Carregada SÓ NO FRONT, por inc/enqueue.php. Não entre com ela no array de
 * inc/styles.php: aquele array alimenta add_editor_style() (inc/setup.php), e o
 * pre-hide abaixo esconderia o conteúdo da Home dentro do editor — o cliente abriria
 * Páginas → Home e veria uma tela em branco.
 *
 * TUDO aqui pende de `html.almar-js`, classe que o script inline de inc/enqueue.php só
 * escreve quando o visitante não pediu movimento reduzido, e que ele mesmo REMOVE se o
 * animations.js não confirmar a inicialização em 3s. Sem JS, com o GSAP bloqueado ou
 * com um erro no diretor, nada disto se aplica e o site renderiza como sempre.
 */

/* ==========================================================================
   1. Pre-hide — o estado inicial de quem vai ser revelado
   ========================================================================== */

/*
 * O GSAP também definiria opacity: 0, mas só quando o script rodasse — e o hero, os
 * serviços e os logos já estariam pintados. O flash apareceria justamente acima da
 * dobra. Estas regras chegam com o CSS, antes do primeiro paint.
 *
 * Só opacidade: o deslocamento (y) fica com o GSAP. Com o elemento já invisível, não
 * há flash de posição, e o CSS não precisa saber a coreografia.
 *
 * O valor sai de --almar-oculto em vez de ser 0 fixo. Custom properties HERDAM: basta o
 * cliente escrever `almar-sem-animacao` numa seção para que ela e tudo dentro dela
 * resolvam para 1, e o pre-hide se desligue ali. É o que evita um `!important` num
 * seletor descendente universal, que apagaria de quebra o opacity: 0.75 dos logos de
 * clientes e o 0.7 do resumo dos cases.
 */
html.almar-js .almar-hero__conteudo > *,
html.almar-js .almar-post-hero__conteudo > *,
html.almar-js .almar-servico,
html.almar-js .almar-clientes__grade .wp-block-image,
html.almar-js .almar-indicador,
html.almar-js .almar-depoimento,
html.almar-js .almar-etapa,
html.almar-js .almar-socio,
html.almar-js .almar-equipe__origem,
html.almar-js .wp-block-post-template:not(.almar-carrossel) > li,
html.almar-js .almar-arquivo__intro > :not(.wp-block-separator),
/*
 * O :not(.instagram-media) é vital. O embed do Instagram é um <blockquote class="instagram-media">
 * que o embed.js TROCA por um <iframe class="instagram-media"> depois do load — e esse iframe
 * novo, filho direto do conteúdo, herdaria este opacity: 0 sem nunca passar pelo reveal (que é
 * `once`), ficando invisível para sempre. Fora da camada de animação, o embed renderiza sozinho.
 * O mesmo :not() está no seletor do revelar(), em animations.js.
 */
html.almar-js .almar-post__corpo .wp-block-post-content > *:not(.instagram-media),
html.almar-js .almar-contato__info > *,
html.almar-js .almar-form__campo,
html.almar-js .almar-form__botao {
	opacity: var(--almar-oculto, 0);
}

/*
 * O :not(.almar-carrossel) não é preciosismo. Os slides do hero do blog TAMBÉM são
 * <li> de um core/post-template; sem a exclusão, o reveal em cascata escreveria
 * `opacity: 1` inline nos três e o hero apareceria com os destaques empilhados — o
 * carrossel controla a opacidade dos slides pelo CSS, e o GSAP venceria a regra.
 * O mesmo seletor está no revelar() de assets/js/animations.js.
 */

/*
 * As ondas abrem do centro com um wipe. clip-path, e não scaleX: o separador é um <hr>
 * de 64x24px que desenha as ondas em background-image — escalar a caixa esmagaria o SVG.
 */
html.almar-js .wp-block-separator.is-style-almar-ondas,
html.almar-js .wp-block-separator.is-style-almar-ondas-claro {
	clip-path: var(--almar-recorte, inset(0% 50% 0% 50%));
}

/*
 * Opt-out do cliente: campo "Classe(s) CSS adicional(is)" da barra lateral do bloco.
 * Só reata os dois valores acima, por herança — não toca em mais nada. O JS filtra os
 * mesmos elementos com el.closest('.almar-sem-animacao'), então eles também não ganham
 * tween nenhum.
 */
html.almar-js .almar-sem-animacao {
	--almar-oculto: 1;
	--almar-recorte: none;
}

/* ==========================================================================
   2. Hero — deriva lenta na foto de fundo
   ========================================================================== */

/*
 * Ken Burns só no slide ativo, e só quando o carrossel está de pé ([data-carousel-ready]
 * = 2+ imagens). A animação reinicia sozinha a cada troca, porque a regra passa a valer
 * quando o hero-carousel.js move a classe .is-active.
 *
 * O recorte fica por conta do overflow: hidden do .almar-hero.
 */
html.almar-js .almar-hero__slides[data-carousel-ready] > .wp-block-image.is-active img {
	animation: almar-deriva 8s ease-out forwards;
}

@keyframes almar-deriva {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.08);
	}
}

/* ==========================================================================
   2b. Hero do blog — a mesma deriva, e o conteúdo reentrando a cada troca
   ========================================================================== */

/*
 * Aqui o movimento é CSS, não GSAP, e a razão é a troca de slide: a coreografia
 * precisa RECOMEÇAR toda vez que o hero-carousel.js move a classe .is-active — uma
 * animação presa a `.is-active` faz isso de graça, e o GSAP só faria com um hook no
 * carrossel.
 *
 * Tudo pende de [data-carousel-ready], que o carrossel só escreve quando de fato
 * assumiu o controle (2+ slides, sem movimento reduzido). Sem ele — um único destaque,
 * JS desligado, movimento reduzido — nada disto se aplica e o slide aparece estático,
 * pelo `:first-child { opacity: 1 }` do templates/blog.css.
 */
html.almar-js .almar-blog-hero__slides[data-carousel-ready] > li.is-active .almar-blog-hero__capa img {
	animation: almar-deriva 8s ease-out forwards;
}

html.almar-js .almar-blog-hero__slides[data-carousel-ready] > li .almar-blog-hero__conteudo > * {
	opacity: var(--almar-oculto, 0);
}

html.almar-js .almar-blog-hero__slides[data-carousel-ready] > li.is-active .almar-blog-hero__conteudo > * {
	animation: almar-entrada 0.8s ease-out forwards;
}

/* A cascata: chips → título → "Leia mais". */
html.almar-js .almar-blog-hero__slides[data-carousel-ready] > li.is-active .almar-blog-hero__conteudo > :nth-child(2) {
	animation-delay: 0.12s;
}

html.almar-js .almar-blog-hero__slides[data-carousel-ready] > li.is-active .almar-blog-hero__conteudo > :nth-child(3) {
	animation-delay: 0.24s;
}

@keyframes almar-entrada {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   3. Números — folga para o parallax e largura estável na contagem
   ========================================================================== */

/*
 * O JS desloca a foto em ±6% da altura dela. Sem folga, o movimento abriria uma faixa
 * vazia no topo e no pé: a coluna tem overflow: hidden e a <figure> é absolute inset: 0.
 * 120% de altura com -10% de topo dá 10% de sobra de cada lado — mais do que o
 * deslocamento consome.
 */
html.almar-js .almar-numeros__foto img {
	position: relative;
	height: 120%;
	top: -10%;
}

/*
 * Sem tabular-nums a largura de cada dígito muda durante a contagem e o número treme.
 * RF16 pede que trocar o valor não mexa no layout — vale também para os valores
 * intermediários que a animação inventa.
 */
html.almar-js .almar-numeros__valor {
	font-variant-numeric: tabular-nums;
	font-size: clamp(18px, 1vw + 14px, 44px) !important;
}

/* ==========================================================================
   4. Como trabalhamos — a linha que se desenha entre as etapas
   ========================================================================== */

/*
 * Abaixo de 768px a grade vira uma coluna (como-trabalhamos.css) e uma linha horizontal
 * perde o sentido; o JS também desliga o scrub nessa faixa, via gsap.matchMedia().
 */
@media (min-width: 768px) {
	html.almar-js .almar-processo__grade {
		position: relative;
		--almar-linha: 0;
	}

	/*
	 * O GSAP anima a variável --almar-linha; é o único jeito de mover um pseudo-elemento.
	 * A linha cobre de 10% a 90% da grade — os centros dos cinco círculos, em colunas de
	 * 20% (10%, 30%, 50%, 70%, 90%). É dessa geometria que o JS deriva quando acender
	 * cada círculo.
	 */
	html.almar-js .almar-processo__grade::before {
		content: "";
		position: absolute;
		top: 24px;
		left: 10%;
		right: 10%;
		height: 1px;
		z-index: 0;
		pointer-events: none;
		background-color: var(--wp--preset--color--teal-destaque);
		opacity: 0.4;
		transform: scaleX(var(--almar-linha));
		transform-origin: left center;
	}

	html.almar-js .almar-etapa {
		position: relative;
		z-index: 1;
	}
}

/*
 * O círculo ganha fundo sólido para a linha não o atravessar por dentro — ele é
 * transparente com borda, no como-trabalhamos.css.
 */
html.almar-js .almar-etapa .almar-etapa__numero {
	background-color: var(--wp--preset--color--fundo-principal);
	transition: background-color 0.45s ease, color 0.45s ease, transform 0.45s ease;
}

html.almar-js .almar-etapa .almar-etapa__numero.is-ativa {
	background-color: var(--wp--preset--color--teal-destaque);
	color: var(--wp--preset--color--fundo-principal);
	transform: scale(1.08);
}

@media (min-width: 2080px) {
	/* Círculo de 56px: o centro desce 4px. */
	html.almar-js .almar-processo__grade::before {
		top: 28px;
	}
}

/* ==========================================================================
   5. Hover — CSS puro, sem GSAP
   ========================================================================== */

/*
 * O GSAP cuida de entrada e scroll; hover é estado, e estado é CSS. Todo reveal termina
 * com clearProps: 'transform', devolvendo o transform ao CSS — sem isso o inline do
 * GSAP venceria o :hover.
 *
 * Os logos de clientes (clientes.css) e a capa dos cases (cases.css) já tinham hover.
 * Aqui entram os que não tinham: serviço, depoimento, etapa e a seta do CTA.
 */

html.almar-js .almar-servico {
	transition: transform 0.35s ease;
}

html.almar-js .almar-servico:hover,
html.almar-js .almar-servico:focus-within {
	transform: translateY(-6px);
}

html.almar-js .almar-servico .wp-block-image img,
html.almar-js .almar-servico__titulo {
	transition: transform 0.35s ease, color 0.3s ease;
}

html.almar-js .almar-servico:hover .wp-block-image img,
html.almar-js .almar-servico:focus-within .wp-block-image img {
	transform: scale(1.1);
}

html.almar-js .almar-servico:hover .almar-servico__titulo,
html.almar-js .almar-servico:focus-within .almar-servico__titulo {
	color: var(--wp--preset--color--teal-destaque);
}

html.almar-js .almar-depoimento {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

html.almar-js .almar-depoimento:hover,
html.almar-js .almar-depoimento:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgb(6 26 43 / 0.16);
}

html.almar-js .almar-etapa:hover .almar-etapa__numero,
html.almar-js .almar-etapa:focus-within .almar-etapa__numero {
	background-color: var(--wp--preset--color--teal-destaque);
	color: var(--wp--preset--color--fundo-principal);
	transform: scale(1.08);
}

/* A seta do CTA avança no hover — o botão já tinha a máscara, faltava o movimento. */
html.almar-js .wp-block-button.is-style-almar-cta .wp-block-button__link::after {
	transition: transform 0.3s ease;
}

html.almar-js .wp-block-button.is-style-almar-cta .wp-block-button__link:hover::after,
html.almar-js .wp-block-button.is-style-almar-cta .wp-block-button__link:focus-visible::after {
	transform: translateX(4px);
}

/* ==========================================================================
   6. Movimento reduzido
   ========================================================================== */

/*
 * O script inline nem escreve .almar-js quando a preferência é `reduce`, então quase
 * nada aqui chegaria a valer. Esta rede existe para o caso de o visitante mudar a
 * preferência com a página já aberta: as animações contínuas param na hora, sem exigir
 * reload.
 */
@media (prefers-reduced-motion: reduce) {
	html.almar-js .almar-hero__slides[data-carousel-ready] > .wp-block-image.is-active img {
		animation: none;
	}

	/* Nada de opacity: 0 aqui — sem animação para devolvê-la, o destaque nunca apareceria. */
	html.almar-js .almar-blog-hero__slides[data-carousel-ready] > li .almar-blog-hero__conteudo > * {
		opacity: 1;
		animation: none;
	}

	html.almar-js .almar-blog-hero__slides[data-carousel-ready] > li.is-active .almar-blog-hero__capa img {
		animation: none;
	}

	html.almar-js .almar-processo__grade::before {
		transform: scaleX(1);
	}

	html.almar-js .almar-servico,
	html.almar-js .almar-depoimento,
	html.almar-js .almar-servico .wp-block-image img,
	html.almar-js .almar-etapa .almar-etapa__numero,
	html.almar-js .wp-block-button.is-style-almar-cta .wp-block-button__link::after {
		transition: none;
	}

	html.almar-js .almar-servico:hover,
	html.almar-js .almar-servico:focus-within,
	html.almar-js .almar-depoimento:hover,
	html.almar-js .almar-depoimento:focus-within {
		transform: none;
	}

	html.almar-js .almar-servico:hover .wp-block-image img,
	html.almar-js .almar-servico:focus-within .wp-block-image img,
	html.almar-js .almar-etapa:hover .almar-etapa__numero,
	html.almar-js .almar-etapa:focus-within .almar-etapa__numero,
	html.almar-js .wp-block-button.is-style-almar-cta .wp-block-button__link:hover::after {
		transform: none;
	}
}