/**
 * skp — nabíhání prvků při scrollování
 *
 * Systém stojí na struktuře, kterou Divi generuje na každé stránce:
 * sekce > řádek > sloupec > moduly. JS proto nemusí nic značkovat v obsahu,
 * jen přidá třídu .skp-in na řádek, který vjel do viewportu. Díky tomu
 * animace platí i pro stránky, které teprve vzniknou.
 *
 * Zpoždění se skládá ze dvou složek, obou čistě v CSS přes :nth-child():
 *   --skp-col-delay  pořadí sloupce v řádku (mřížka nabíhá zleva doprava)
 *   --skp-mod-delay  pořadí modulu ve sloupci (nadpis, pak text, pak tlačítko)
 *
 * Míra pohybu odpovídá dialu motion 0.3 z design kontraktu: jen prolnutí
 * a krátký posun zdola, žádné rotace, odrazy ani zvětšování.
 */

:root {
	--skp-reveal-time: 550ms;
	--skp-reveal-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--skp-reveal-shift: 18px;
}

/*
	Skrytý výchozí stav visí na třídě .skp-anim, kterou přidává reveal.js
	hned na začátku svého běhu. Bez JS (nebo při vypnutém pohybu) se třída
	neobjeví a stránka je normálně vidět — obsah nikdy nezůstane schovaný.

	Code moduly jsou vyloučené záměrně: nesou kreslené ikony a radar,
	které mají vlastní animaci a nemá smysl je prolínat podruhé.
*/
html.skp-anim .et_pb_post_content .et_pb_row > .et_pb_column > .et_pb_module:not( .et_pb_code ) {
	opacity: 0;
	transform: translateY( var( --skp-reveal-shift ) );
	transition:
		opacity var( --skp-reveal-time ) var( --skp-reveal-ease ),
		transform var( --skp-reveal-time ) var( --skp-reveal-ease );
	transition-delay: calc( var( --skp-col-delay, 0ms ) + var( --skp-mod-delay, 0ms ) );
	will-change: opacity, transform;
}

html.skp-anim .et_pb_post_content .et_pb_row.skp-in > .et_pb_column > .et_pb_module:not( .et_pb_code ) {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Mřížka nabíhá zleva doprava. */
html.skp-anim .et_pb_post_content .et_pb_row > .et_pb_column:nth-child( 2 ) > .et_pb_module {
	--skp-col-delay: 90ms;
}

html.skp-anim .et_pb_post_content .et_pb_row > .et_pb_column:nth-child( 3 ) > .et_pb_module {
	--skp-col-delay: 180ms;
}

html.skp-anim .et_pb_post_content .et_pb_row > .et_pb_column:nth-child( 4 ) > .et_pb_module {
	--skp-col-delay: 270ms;
}

html.skp-anim .et_pb_post_content .et_pb_row > .et_pb_column:nth-child( 5 ) > .et_pb_module {
	--skp-col-delay: 360ms;
}

/* Uvnitř sloupce jde obsah po sobě: nadpisek, nadpis, text, tlačítko. */
html.skp-anim .et_pb_post_content .et_pb_column > .et_pb_module:nth-child( 2 ) {
	--skp-mod-delay: 70ms;
}

html.skp-anim .et_pb_post_content .et_pb_column > .et_pb_module:nth-child( 3 ) {
	--skp-mod-delay: 140ms;
}

html.skp-anim .et_pb_post_content .et_pb_column > .et_pb_module:nth-child( 4 ) {
	--skp-mod-delay: 210ms;
}

html.skp-anim .et_pb_post_content .et_pb_column > .et_pb_module:nth-child( 5 ) {
	--skp-mod-delay: 280ms;
}

/*
	Hero: nadpis a perex se neanimují.

	Jsou to kandidáti na LCP a prolnutí by tuhle metriku odložilo o celou
	dobu animace. Zbytek hera (tlačítka, odznak, boční panel) nabíhá normálně,
	takže sekce nepůsobí staticky, ale první vykreslení textu se nezdrží.
*/
html.skp-anim .et_pb_post_content .et_builder_inner_content > .et_pb_section:first-child .et_pb_row > .et_pb_column:first-child > .et_pb_module:nth-child( -n+2 ) {
	opacity: 1;
	transform: none;
	transition: none;
}

/*
	Na telefonu sloupce stackují pod sebe, takže zpoždění podle pořadí
	sloupce by znamenalo čekání na prvek, který je zrovna na řadě.
	Posun je zároveň menší, protože se prvky odkrývají po jednom.
*/
@media ( max-width: 767px ) {

	:root {
		--skp-reveal-shift: 12px;
	}

	/*
		:nth-child(n) nic nefiltruje, jen dorovnává specificitu na pravidla
		výše — ta mají navíc :nth-child() u sloupce a bez tohoto dorovnání
		by zpoždění vyhrála i na telefonu.
	*/
	html.skp-anim .et_pb_post_content .et_pb_row > .et_pb_column:nth-child( n ) > .et_pb_module:nth-child( n ) {
		--skp-col-delay: 0ms;
	}
}

/*
	Sticky hlavička dá po odscrollování najevo, že se plave nad obsahem.
	Je to box-shadow, ne border — nemění výšku hlavičky a nekoliduje
	s okrajem, který si hlavička nese z Divi.
*/
.et-l--header {
	transition: box-shadow 250ms ease;
}

html.skp-scrolled .et-l--header {
	box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.07 );
}

/*
	Pojistka pro vypnutý pohyb. reveal.js třídu .skp-anim v takovém případě
	vůbec nepřidá, tohle pravidlo pokrývá i situaci, kdy si návštěvník
	nastavení změní až s načtenou stránkou.
*/
@media ( prefers-reduced-motion: reduce ) {

	html.skp-anim .et_pb_post_content .et_pb_row > .et_pb_column > .et_pb_module {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}