/*------------------------------------*\
	WPLAMA ANIMACE
\*------------------------------------*/

/*
 * Zapíná se přidáním CSS třídy modulu v Divi:
 * Nastavení modulu → Advanced (Pokročilé) → CSS Class (CSS třída)
 *
 *   wpl-anim-letters    text se vykreslí postupně po písmenech
 *   wpl-anim-zoom-bg    obrázek na pozadí se při najetí myší přiblíží
 */


/*------------------------------------*\
	TEXT PO PÍSMENECH, wpl-anim-letters
\*------------------------------------*/

/*
 * Text schováme jen do chvíle, než ho skript rozdělí na písmena, jinak by
 * na okamžik probliknul celý. Třídu wpl-anim-js přidává na <html> skript
 * v hlavičce, takže bez JavaScriptu se tohle pravidlo vůbec neuplatní
 * a text je normálně vidět.
 */
.wpl-anim-js .wpl-anim-letters:not(.wpl-anim-ready) {
	visibility: hidden;
}

.wpl-anim-letter {
	opacity: 0;
}

.wpl-anim-letter.is-shown {
	animation: wplAnimLetterIn var(--wpl-anim-duration, 300ms) ease forwards;
}

@keyframes wplAnimLetterIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Uživatel s vypnutými animacemi v systému vidí text rovnou. */
@media (prefers-reduced-motion: reduce) {
	.wpl-anim-letter {
		opacity: 1;
		animation: none !important;
	}
}


/*------------------------------------*\
	ZOOM POZADÍ PŘI HOVERU, wpl-anim-zoom-bg
\*------------------------------------*/

/*
 * Přiblíží se jen obrázek na pozadí, prvek ani text se nehýbou.
 * Nic nepíšeme do CSS natvrdo, pseudo-prvek si celé pozadí převezme
 * z modulu přes inherit. Nastavení tedy zůstává v Divi a po výměně
 * obrázku nebo barvy není potřeba do CSS sahat.
 *
 * Kopírujeme i barvu pozadí a režim míchání, protože Divi jimi obrázek
 * podbarvuje (Pozadí → barva + prolnutí). Kdyby pseudo-prvek vykreslil
 * jen samotný obrázek, podbarvení by zmizelo.
 */
.wpl-anim-zoom-bg {
	position: relative;
	overflow: hidden;
}

.wpl-anim-zoom-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: inherit;
	background-image: inherit;
	background-position: inherit;
	background-repeat: inherit;
	background-size: inherit;
	background-blend-mode: inherit;
	transform: scale(1);
	transition: transform var(--wpl-zoom-duration, 700ms) ease;
}

.wpl-anim-zoom-bg:hover::before,
.wpl-anim-zoom-bg:focus-within::before {
	transform: scale(var(--wpl-zoom-scale, 1.08));
}

/* Pojistka, aby obsah modulu zůstal nad obrázkem. */
.wpl-anim-zoom-bg > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wpl-anim-zoom-bg::before {
		transition: none;
	}
	.wpl-anim-zoom-bg:hover::before,
	.wpl-anim-zoom-bg:focus-within::before {
		transform: scale(1);
	}
}