/* ==========================================================================
   ANIMÁCIE

   Striedmo. Prvky sa pri prvom zobrazení jemne zdvihnú a objavia —
   nič neposkakuje, nič sa neotáča, nič sa neopakuje.

   Skryté sú LEN vtedy, keď beží skript a keď návštevník animácie nemá
   vypnuté. Bez JavaScriptu je obsah normálne viditeľný — preto sa
   počiatočný stav pridáva triedou, nie predvolene.
   ========================================================================== */

.cpx-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.55s var(--cpx-ease),
		transform 0.55s var(--cpx-ease);
	transition-delay: var(--cpx-reveal-delay, 0s);
	will-change: opacity, transform;
}

.cpx-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Po odrolovaní hlavička stmavne. Tieň by na priesvitnom skle pôsobil
 * ako cudzí prvok — namiesto neho pribudne krytie a výraznejšia linka.
 */
.cpx-header {
	transition:
		background-color var(--cpx-duration) var(--cpx-ease),
		border-color var(--cpx-duration) var(--cpx-ease);
}

.cpx-header.is-scrolled {
	background: var(--cpx-surface-nav-solid);
	border-bottom-color: var(--cpx-border-subtle);
}

@media (prefers-reduced-motion: reduce) {
	.cpx-reveal,
	.cpx-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}