/**
 * A camada Everest.
 *
 * O ceu nao se mexe: e o fundo da caixa, e a caixa fica no fluxo da pagina como
 * qualquer outra seccao. Quem sobe e a montanha, e o que ela cobre da seccao de
 * cima e a silhueta dela. A primeira versao prendia a seccao de cima e deslizava
 * a caixa inteira por cima dela: o topo do degrade virava uma linha recta a
 * cortar as fotos, e era isso que estava feio.
 *
 * A altura da caixa vem da propria imagem, que esta no fluxo. Uma altura fixa
 * cortava o bico assim que a janela passava dos 1670px, porque a imagem cresce
 * com a largura e a caixa nao.
 *
 * O paralaxe sao duas copias da mesma imagem. A de tras aparece inteira; a da
 * frente e recortada por `--els-ev-linha`, a fronteira da massa dianteira, e
 * sobe mais. Recortar a imagem em vez de a redesenhar em vectores mantem os
 * pixeis originais, com os degrades e a trilha a ponteado como o designer os
 * fez - e nao ha cor nenhuma inventada por mim.
 *
 * O progresso do scroll chega em `--els-ev-p`, escrito pelo els-everest.js. Por
 * omissao vale 0, que e a composicao parada do desenho: sem JavaScript, ou com
 * movimento reduzido, a seccao fica exactamente como estava antes disto.
 */

/* ---------------------------------------------------------------- o prender */

/*
 * `overflow` num ancestral desliga `position: sticky` sem aviso nenhum, e o
 * site tem um snippet de codigo do Elementor, "Lock horizontal scroll bar", com
 * `html, body { overflow-x: hidden !important }`. O `clip` corta na mesma, mas
 * nao cria um contentor de rolagem. So faz falta com o prender ligado, que hoje
 * vem desligado, mas fica aqui, que e onde se percebe porque existe.
 */
@supports (overflow-x: clip) {
	html:root,
	html:root > body {
		overflow-x: clip !important;
	}
}

@supports selector(:has(*)) {
	.elementor > .e-con:has(+ .e-con .els-ev--prende) {
		position: sticky;
		top: 0;
		z-index: 0;
	}

	.elementor > .e-con:has(.els-ev--prende),
	.elementor > .e-con:has(.els-ev--prende) ~ .e-con {
		position: relative;
		z-index: 1;
	}
}

/* ------------------------------------------------------------------- caixa */

.elementor-widget-els_everest {
	align-self: stretch;
	width: 100%;
}

.els-ev {
	--els-ev-p: 0;          /* progresso do scroll, 0 a 1, escrito pelo JS */
	--els-ev-ceu: 140px;    /* quanto ceu fica acima da montanha */
	--els-ev-baixa: 36px;   /* quanto o bico nasce abaixo do fim da seccao de cima */
	--els-ev-puxa: -70px;   /* negativo: a seccao seguinte encosta abaixo da imagem, ja no chao */
	--els-ev-chao: 220px;   /* quanto chao se desenha por baixo da imagem */
	--els-ev-zoom: 100%;    /* largura da montanha em relacao a faixa */
	--els-ev-sobe: 150px;   /* quanto a montanha sobe alem do scroll */
	--els-ev-fundo: 0.30;   /* quanto sobe a camada do fundo */
	--els-ev-medio: 0.62;   /* e a do meio, aquela cinzenta */
	--els-ev-luz: 1.1;      /* e a luz acompanha o cume */
	--els-ev-luz-cor: 254, 228, 192;  /* a luz e da cor do ceu, nao branca */
	--els-ev-luz-forca: 0.95;         /* quanto ela pesa no seu ponto mais forte */
	--els-ev-c1: #fee4c0;
	--els-ev-c2: #fadcd7;
	--els-ev-degrade: 260px;/* em quantos pixeis o ceu passa de uma cor a outra */
	--els-ev-base: #d0e7f6; /* a cor do fundo da ilustracao, igual a da seccao seguinte */

	position: relative;
	width: 100%;
	padding-block-start: var(--els-ev-ceu);

	/*
	 * A imagem e a original, sem um pixel mexido. O chao por baixo dela e
	 * desenhado aqui, em CSS, comecando exactamente nas cores da ultima linha da
	 * imagem e chegando a cor da seccao seguinte em 60px. A seccao seguinte
	 * encosta 70px abaixo da imagem, ja dentro da cor lisa: a mesma cor dos dois
	 * lados, sem emenda. Encostar por cima do desenho era o que dava a linha
	 * recta a atravessar a montanha, e retocar a imagem para resolver isso
	 * comia as cristas de baixo.
	 */
	margin-block-end: calc( -1 * var(--els-ev-puxa) );
	/*
	 * Deixa a montanha sair por cima e o chao sair por baixo, e corta os lados.
	 * `overflow: hidden` cortava o bico; sem corte nenhum, o chao escorria para
	 * dentro da seccao seguinte.
	 */
	clip-path: inset( -100vh 0 calc( -1 * var(--els-ev-chao) ) 0 );
}

.els-ev--sem-ceu {
	background: none;
}

/*
 * O ceu.
 *
 * Nao e o fundo da caixa: e uma camada com o topo agarrado ao fim da seccao
 * presa. Enquanto ela esta parada, o fim dela nao se mexe no ecra, por isso o
 * ceu tambem nao - e a montanha que sobe por dentro dele. Foi isto que faltou
 * nas tres tentativas anteriores: com o ceu a viajar com a caixa, o topo dele
 * passava por cima das fotos e lia-se como um corte; sem ceu nenhum, o topo
 * transparente da ilustracao deixava ver o branco do documento.
 *
 * Acima do topo do ceu esta o fim da seccao presa, que ja acaba nesta mesma cor.
 * A emenda cai exactamente ai, e por isso nao se ve.
 *
 * O degrade conta-se em pixeis a partir do topo, nao em percentagem: como o
 * topo esta preso ao ecra, as cores ficam no mesmo sitio enquanto a caixa sobe.
 */
.els-ev__ceu {
	position: absolute;
	inset-inline: 0;
	inset-block: var(--els-ev-ceu-topo, var(--els-ev-ceu)) 0;
	z-index: 0;
	background: linear-gradient( 180deg, var(--els-ev-c1) 0, var(--els-ev-c2) var(--els-ev-degrade) );
}

.els-ev--sem-ceu .els-ev__ceu {
	display: none;
}

/*
 * A margem negativa sobrepoe esta faixa a seccao de cima, para que o topo
 * transparente da ilustracao caia sobre ela e nao sobre o fundo do documento.
 */
.els-ev--prende {
	margin-block-start: calc( var(--els-ev-baixa) - var(--els-ev-ceu) );
}

/* ------------------------------------------------------------------ palco */

/*
 * O palco esta no fluxo: e ele que da altura a caixa. Com `--els-ev-zoom` acima
 * de 100% fica mais largo do que a caixa e sobra para os lados, que o clip-path
 * corta - e assim que o bico continua a ler-se num telemovel.
 */
.els-ev__palco {
	position: relative;
	z-index: 1;
	width: var(--els-ev-zoom);
	margin-inline-start: 50%;
	translate: -50% 0;
}

/*
 * Tres copias da mesma imagem, cada uma a subir a sua velocidade.
 *
 * A separacao nao e um recorte: e uma mascara em degrade. Recortar uma imagem
 * achatada nao funciona - por baixo de cada forma nao ha informacao nenhuma, e
 * a fronteira que se invente aparece sempre, ora como degrau ora como linha
 * recta. Com degrade, onde uma camada se apaga a de tras ja esta inteira por
 * baixo: nao ha buraco para tapar nem aresta para ver.
 *
 * As zonas de passagem caem em terreno liso, por baixo da trilha a ponteado.
 * A trilha e o unico desenho de contraste forte da ilustracao: se uma passagem
 * a apanhar, ela aparece duas vezes, uma por camada, com o desfasamento entre
 * elas. Medida na imagem, a trilha ocupa de 5,9% a 31,9% da altura - por isso a
 * primeira passagem so comeca aos 35%, e a segunda aos 46,5%.
 *
 * O desenho acaba aos 54,3% da imagem; dai para baixo e a base prolongada.
 */
.els-ev__tras,
.els-ev__meio,
.els-ev__frente {
	will-change: translate;
}

.els-ev__tras {
	position: relative;
	z-index: 1;
	translate: 0 calc( -1 * var(--els-ev-sobe) * var(--els-ev-p) * var(--els-ev-fundo) );
}

.els-ev__meio,
.els-ev__frente {
	position: absolute;
	inset: 0;
}

.els-ev__meio {
	z-index: 2;
	translate: 0 calc( -1 * var(--els-ev-sobe) * var(--els-ev-p) * var(--els-ev-medio) );
	-webkit-mask-image: linear-gradient( 180deg, rgba(0,0,0,0) 35%, #000 44% );
	mask-image: linear-gradient( 180deg, rgba(0,0,0,0) 35%, #000 44% );
}

.els-ev__frente {
	z-index: 3;
	translate: 0 calc( -1 * var(--els-ev-sobe) * var(--els-ev-p) );
	-webkit-mask-image: linear-gradient( 180deg, rgba(0,0,0,0) 46.5%, #000 54% );
	mask-image: linear-gradient( 180deg, rgba(0,0,0,0) 46.5%, #000 54% );
}

/*
 * Sem camadas, a ilustracao sobe inteira - e sobe o curso todo, nao a fraccao
 * da camada de tras, que so faz sentido quando ha camadas a compensar por cima.
 */
.els-ev--sem-camadas .els-ev__meio,
.els-ev--sem-camadas .els-ev__frente {
	display: none;
}

.els-ev--sem-camadas .els-ev__tras {
	translate: 0 calc( -1 * var(--els-ev-sobe) * var(--els-ev-p) );
}

.els-ev img {
	display: block;
	width: 100%;
	max-width: none;   /* .elementor img { max-width: 100% } ganha a uma classe so */
	height: auto;
}

/* --------------------------------------------------------------------- chao */

/*
 * O chao por baixo da ilustracao.
 *
 * As paradas horizontais sao as cores medidas na ultima linha da imagem, de 12
 * em 12 por cento: assim a juncao com a imagem nao tem degrau nenhum, nem
 * sequer na ponta esquerda, que e mais clara que o resto. Por cima delas, um
 * degrade vertical leva tudo a cor da seccao seguinte em 60px.
 *
 * Anda com a imagem, porque e filho dela.
 */
.els-ev__tras::after {
	content: "";
	position: absolute;
	inset-inline: -50vw;
	inset-block-start: calc( 100% - 1px );
	height: 100vh;
	background:
		linear-gradient( 180deg, rgba( 208, 231, 246, 0 ) 0, var(--els-ev-base) 60px ),
		linear-gradient( 90deg,
			#d5edfc 0%, #d0e7f6 8%, #cfe8f6 17%, #d2e7f8 25%, #d0e7f7 33%,
			#d0e7f7 42%, #d0e7f6 50%, #d0e7f7 58%, #d0e7f7 67%, #cee7f4 75%,
			#cee7f5 83%, #d0e5f2 92%, #d3eaf6 100% );
}

/* --------------------------------------------------------------------- luz */

/*
 * A luz fica ATRAS da montanha e ocupa a largura toda dela.
 *
 * Atras: `z-index: 0` dentro do palco, por baixo das duas camadas da
 * ilustracao. So se ve onde o desenho e transparente, que e o ceu por cima dos
 * cumes - e por isso le-se como o sol a nascer por tras da serra. A primeira
 * versao estava por cima de tudo e estreita, e nao passava de uma mancha
 * pousada em cima do desenho, a apagar as fotos da seccao presa.
 *
 * Largura toda: um degrade vertical, nao uma elipse. Um clarao redondo no meio
 * marca um centro que a montanha nao tem.
 *
 * O topo chega a transparente muito antes do fim, para nao haver aresta
 * nenhuma a denunciar a caixa.
 */
.els-ev__luz {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( var(--els-ev-luz-cor), 0 ) 0,
		rgba( var(--els-ev-luz-cor), calc( var(--els-ev-luz-forca) * 0.35 ) ) 30%,
		rgba( var(--els-ev-luz-cor), var(--els-ev-luz-forca) ) 62%,
		rgba( var(--els-ev-luz-cor), var(--els-ev-luz-forca) ) 100%
	);
	translate: 0 calc( -1 * var(--els-ev-sobe) * var(--els-ev-p) * var(--els-ev-luz) );
	will-change: translate;
}

/* ------------------------------------------------------------- respiradouro */

/*
 * As animacoes de entrada do site escondem os filhos directos das seccoes ate
 * entrarem no ecra. Esta caixa ja tem a sua propria entrada, e apanhar as duas
 * dava um salto de opacidade a meio da subida.
 */
html.els-anim .elementor > .elementor-element > .elementor-widget-els_everest {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-ev__tras,
	.els-ev__luz,
	.els-ev__frente {
		translate: none;
		will-change: auto;
	}
}

/* ------------------------------- navegadores sem rotate/translate soltos */
/* Chrome < 104 nao conhece `translate` como propriedade: a montanha ficava
   deslocada metade da largura para a direita e sem o movimento. O mesmo em
   `transform`, so para esses navegadores. */
@supports not (translate: 0) {
	.els-ev__palco {
		transform: translateX(-50%);
	}
	.els-ev__tras {
		transform: translateY(calc(-1 * var(--els-ev-sobe) * var(--els-ev-p) * var(--els-ev-fundo)));
	}
	.els-ev__meio {
		transform: translateY(calc(-1 * var(--els-ev-sobe) * var(--els-ev-p) * var(--els-ev-medio)));
	}
	.els-ev__frente,
	.els-ev--sem-camadas .els-ev__tras {
		transform: translateY(calc(-1 * var(--els-ev-sobe) * var(--els-ev-p)));
	}
	.els-ev__luz {
		transform: translateY(calc(-1 * var(--els-ev-sobe) * var(--els-ev-p) * var(--els-ev-luz)));
	}
}