/**
 * Entrada dos blocos conforme se rola a pagina.
 *
 * COMO ISTO SE SEGURA
 *
 * O estado escondido esta atras de `html.els-anim`, classe que um script de
 * duas linhas no <head> poe antes da primeira pintura. Se o ficheiro principal
 * nao se anunciar em tres segundos, o mesmo script tira a classe e a pagina
 * aparece inteira, sem animacao. Sem JavaScript a classe nunca chega a existir.
 *
 * O escondido so vale enquanto o elemento nao tem `els-in`. Quando o JS lha
 * poe, a regra deixa de se aplicar e o elemento volta aos estilos dele: o CSS
 * de entrada nao fica a mandar em nada depois. Isto importa porque botoes e
 * cards tem os seus proprios `translate` e transicoes de hover, e um estado
 * final fixo aqui ganhava-lhes para sempre.
 *
 * O jeito de cada tipo entrar - quanto sobe, se cresce, se desfoca - vem em
 * variaveis, e nao em regras proprias. Assim nao ha guerra de especificidade
 * entre a regra que esconde e as variacoes, e as excepcoes ficam todas num
 * sitio so.
 *
 * A LISTA DE ALVOS AQUI TEM DE BATER COM A DO els-anim.js.
 *
 * `translate`, `scale` e `filter` sao propriedades independentes e nao
 * `transform`: os elementos atomicos do Elementor V4 escrevem `transform` nas
 * props deles e anulariam o nosso.
 */

:root {
	--els-anim-dist: 36px;
	--els-anim-dur: 1s;
	--els-anim-dur-foto: 1.4s;
	--els-anim-curva: cubic-bezier( .16, 1, .3, 1 );
}

/* as fotos chegam um pouco maiores e assentam no sitio */
.e-image-base,
.elementor-widget-image {
	--els-anim-sobe: 24px;
	--els-anim-escala: 1.08;
}

/* os titulos entram desfocados e ganham foco */
.e-heading-base {
	--els-anim-foco: blur( 8px );
}

/* quem pede menos movimento nunca ve nada escondido */
@media all /* reduzir movimento ignorado a pedido do cliente, ver docs 4 sec. 8 */ {

	/*
	 * Os alvos: os blocos de cada seccao e, dentro deles, titulos, textos,
	 * botoes, imagens, icones, widgets e os cards das grelhas.
	 *
	 * Nunca escondidos: a montanha da Home, que tem a sua propria entrada, e a
	 * divisoria de montanha das paginas internas, que e uma borda e nao conteudo.
	 * Sem `:has()` a regra inteira cai e simplesmente nao ha animacao, que e a
	 * rede de seguranca certa para um browser antigo.
	 */
	html.els-anim :is(
		.elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-element > *,
		.elementor:not(.elementor-location-header):not(.elementor-location-footer) :is(
			.e-heading-base,
			.e-paragraph-base,
			.e-button-base,
			.e-image-base,
			.e-svg-base,
			.elementor-widget
		),
		.els-linkcards__grid > li,
		.els-blog__grid > li
	):not(.els-in):not(.elementor-widget-els_everest):not(:has(img[src*="everest_mountains_botton"])) {
		opacity: 0;
		translate: 0 var(--els-anim-sobe, var(--els-anim-dist));
		scale: var(--els-anim-escala, 1);
		filter: var(--els-anim-foco, none);
	}

	/*
	 * A transicao so existe enquanto o elemento esta a entrar: no fim, o
	 * els-anim.js tira o `data-els-anim` e o elemento recupera as transicoes
	 * dele, as de hover incluidas.
	 */
	html.els-anim [data-els-anim] {
		transition-property: opacity, translate, scale, filter;
		transition-duration: var(--els-anim-dur);
		transition-timing-function: var(--els-anim-curva);
		transition-delay: var(--els-anim-atraso, 0ms);
	}

	html.els-anim [data-els-anim="foto"] {
		transition-duration: var(--els-anim-dur-foto);
	}
}