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

   Striedmo a v jednom jazyku: veci sa objavujú zdola nahor, fotky sa
   pritom takmer nebadateľne dosadnú z väčšieho rozmeru. Nič neposkakuje,
   nič sa neotáča, nič sa neopakuje. Cieľom je, aby si pohyb nevšimol —
   len aby stránka pôsobila pokojne a drahšie.

   Prvky sú skryté LEN vtedy, keď beží skript. Bez JavaScriptu je obsah
   normálne viditeľný — preto počiatočný stav pridáva trieda, nie CSS
   predvolene. Výnimkou je hero: to je nad ohybom, animuje sa hneď pri
   načítaní a skript naň netreba.
   ========================================================================== */

@keyframes shs-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes shs-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*
 * Fotka na pozadí hero sekcie sa počas prvých sekúnd takmer nebadateľne
 * dosadne. Je to jediný pohyb, ktorý beží dlhšie než pol sekundy.
 */
@keyframes shs-settle {
	from {
		transform: scale(1.06);
	}

	to {
		transform: none;
	}
}

/* ---- Objavenie pri rolovaní --------------------------------------------- */

.shs-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.7s var(--shs-ease),
		transform 0.7s var(--shs-ease);
	transition-delay: var(--shs-reveal-delay, 0s);
}

/* Fotky sa nedvíhajú, ale dosadajú — inak by sa hýbal celý rám obrázka. */
.shs-reveal--media {
	transform: scale(1.03);
}

/*
 * Bez `will-change`: pri päťdesiatich prvkoch naraz by si prehliadač
 * pre každý založil vlastnú vrstvu a na slabšom stroji to skôr uškodí,
 * než pomôže.
 */
.shs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---- Úvodná obrazovka --------------------------------------------------- */

.shs-hero__photo {
	animation: shs-settle 2.6s var(--shs-ease) both;
}

.shs-header__row,
.shs-header__rule {
	animation: shs-fade 0.9s var(--shs-ease) both;
}

.shs-hero__eyebrow {
	animation: shs-rise 0.8s var(--shs-ease) 0.1s both;
}

.shs-hero__title {
	animation: shs-rise 0.8s var(--shs-ease) 0.2s both;
}

.shs-hero__text {
	animation: shs-rise 0.8s var(--shs-ease) 0.32s both;
}

.shs-hero__actions {
	animation: shs-rise 0.8s var(--shs-ease) 0.44s both;
}

/*
 * Claim aj ikony sietí sú polohované posunom, preto len prelínanie —
 * animácia posunu by ich vytiahla z miesta.
 */
.shs-hero__claim,
.shs-hero__social {
	animation: shs-fade 1.1s var(--shs-ease) 0.7s both;
}

/* ---- Hlavička ----------------------------------------------------------- */

/*
 * Tieň dáva zmysel len tam, kde hlavička stojí na vlastnom pozadí.
 * Nad hero fotkou by z nej spravil pás navyše.
 */
.shs-header--solid {
	transition: box-shadow var(--shs-duration) var(--shs-ease);
}

.shs-header--solid.is-scrolled {
	box-shadow: 0 1px 16px rgb(0 0 0 / 10%);
}

/* ---- Bez pohybu --------------------------------------------------------- */

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

	.shs-hero__photo,
	.shs-header__row,
	.shs-header__rule,
	.shs-hero__eyebrow,
	.shs-hero__title,
	.shs-hero__text,
	.shs-hero__actions,
	.shs-hero__claim,
	.shs-hero__social {
		animation: none;
	}
}