/**
 * A borda de montanha que sobe por cima da primeira seccao.
 *
 * So se liga com `body.els-cobre`, que o includes/borda-montanha.php poe nas
 * paginas escolhidas. O heroi e a seccao de topo que contem a divisoria
 * `everest_mountains_botton_section1`; e dai que tudo e encontrado, sem ids de
 * elementos, para valer igual em paginas e em templates do Theme Builder.
 */

/*
 * `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 sem
 * criar um contentor de rolagem.
 */
@supports (overflow-x: clip) {
	html:root,
	html:root > body.els-cobre {
		overflow-x: clip !important;
	}
}

/*
 * Sem `:has()` nada disto se aplica, e a pagina fica exactamente como estava:
 * heroi a rolar, divisoria no sitio de sempre.
 */
@supports selector(:has(*)) {

	/* o heroi fica preso; o els-borda.js acerta o `top` quando ele e mais alto que o ecra */
	body.els-cobre .elementor > .e-con:has(img[src*="everest_mountains_botton"]) {
		position: sticky;
		top: 0;
		z-index: 0;
	}

	/* e todas as seccoes a seguir passam por cima dele */
	body.els-cobre .elementor > .e-con:has(img[src*="everest_mountains_botton"]) ~ .e-con {
		position: relative;
		z-index: 1;
	}

	/*
	 * A divisoria sai do heroi. Se ficasse la, ficava presa com ele, e o que
	 * subia por cima das fotos era a borda recta da seccao seguinte.
	 * `visibility` e nao `display`: ela esta em absoluto, mas assim nao ha
	 * nenhuma hipotese de mexer na altura do heroi.
	 */
	body.els-cobre .elementor > .e-con:has(img[src*="everest_mountains_botton"]) img[src*="everest_mountains_botton"] {
		visibility: hidden;
	}

	/*
	 * E passa a ser a borda de cima da seccao seguinte, com o mesmo ficheiro e
	 * na mesma posicao: 5px a entrar na seccao, que e o que o Elementor tinha.
	 * Como e filha da seccao, sobe com ela, sem JavaScript nenhum a acompanhar
	 * o scroll - e por isso nao treme.
	 *
	 * `::after` e nao `::before`: o Elementor usa o `::before` das seccoes para
	 * a camada de sobreposicao do fundo.
	 *
	 * A caixa e mais alta do que a montanha: por cima dela esta a luz. O
	 * desenho ocupa so a faixa de baixo, com a altura e o modo de ajuste
	 * copiados da divisoria original pelo els-borda.js.
	 */
	body.els-cobre .elementor > .e-con:has(img[src*="everest_mountains_botton"]) + .e-con::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: calc( 100% - 5px );
		height: calc( var(--els-borda-altura) + var(--els-luz-altura) );
		background: var(--els-borda) center bottom / var(--els-borda-tamanho, 100% var(--els-borda-altura)) no-repeat;
		/*
		 * A luz e a sombra do proprio desenho, atirada para cima: acompanha a
		 * crista ponto a ponto, dos cumes aos vales e as pontas rasas.
		 *
		 * Ja foi uma faixa (um gradiente a largura toda) e falhou das duas
		 * maneiras. Na forca maxima ate a base, via-se a faixa a ser cortada em
		 * seco onde a montanha e rasa: uma linha recta. A apagar-se antes da
		 * base, os vales e as pontas - que ficam abaixo desse ponto - ficavam
		 * sem luz nenhuma e via-se o heroi por tras, em triangulos e tiras.
		 * Uma faixa recta nunca assenta num recorte; a sombra do recorte assenta.
		 *
		 * Duas sombras: uma curta, colada a crista, e uma larga, que e o clarao.
		 * O `clip-path` corta o que a sombra espalharia para baixo, por cima da
		 * seccao; para cima fica livre. Corta 2px acima do fim da caixa, e nao
		 * no fim: a ultima linha do desenho cai num meio pixel, fica meio
		 * transparente, e a sombra aparecia por ela - uma linha fina cor de
		 * pessego a atravessar a pagina, 5px dentro da seccao. A caixa entra 5px
		 * na seccao, por isso os 2px que saem sao branco sobre branco.
		 */
		filter:
			drop-shadow( 0 calc( var(--els-luz-altura) * -0.03 ) calc( var(--els-luz-altura) * 0.07 ) rgba( var(--els-luz-cor), var(--els-luz-forca) ) )
			drop-shadow( 0 calc( var(--els-luz-altura) * -0.16 ) calc( var(--els-luz-altura) * 0.22 ) rgba( var(--els-luz-cor), var(--els-luz-forca) ) );
		clip-path: inset( calc( var(--els-luz-altura) * -3 ) 0 2px 0 );
		pointer-events: none;
	}

	/*
	 * A luz: a mesma da Home, na cor do ceu. So se ve por cima da crista - por
	 * baixo esta o desenho, que e solido - e por isso le-se como luz por tras
	 * da serra, e sobe com ela. `--els-luz-altura` e a escala das duas sombras.
	 */
	body.els-cobre .elementor > .e-con:has(img[src*="everest_mountains_botton"]) + .e-con {
		--els-luz-cor: 254, 228, 192;
		--els-luz-forca: 0.75;
		--els-luz-altura: 180px;
	}

	@media (max-width: 767px) {
		body.els-cobre .elementor > .e-con:has(img[src*="everest_mountains_botton"]) + .e-con {
			--els-luz-altura: 120px;
		}
	}

	/* a divisoria branca tem 1440x79, a azul 1440x76 */
	/*
	 * A altura da borda sem JavaScript: a proporcao do ficheiro sobre a largura
	 * da janela, que e a largura da seccao. O els-borda.js substitui-a pela
	 * medida exacta da divisoria original.
	 */
	body.els-cobre .elementor > .e-con:has(img[src*="section1_FFFFFF"]) + .e-con {
		--els-borda: var(--els-borda-branca);
		--els-borda-altura: calc( 100vw * 79 / 1440 );
	}

	body.els-cobre .elementor > .e-con:has(img[src*="section1_D0E7F6"]) + .e-con {
		--els-borda: var(--els-borda-azul);
		--els-borda-altura: calc( 100vw * 76 / 1440 );
	}
}

/* com movimento reduzido nada fica preso; a pagina rola como sempre rolou */
@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	body.els-cobre .elementor > .e-con:has(img[src*="everest_mountains_botton"]) {
		position: relative;
	}
}