/**
 * OŽIVENÍ ŘÁDKU VÝHOD NA HOMEPAGE (2026-10-17)
 *
 * Tři výhody pod hero při najetí myší / ťuknutí krátce zareagují - srdíčko
 * tlukne a vypustí srdíčka, fajfka se dopíše a vypustí fajfky, cenovka se
 * rozhoupe a vypustí symboly %. Spouští to assets/js/vyhody-animace.js třídou `je-reakce` na SVG
 * ikony a vkládá částice .mz-vyhoda-castice. Popis celé věci a proč je to
 * udělané takhle: inc/vyhody-animace.php. Načítá se jen na homepage.
 *
 * Všechny pohyby jsou v @media (prefers-reduced-motion: no-preference) -
 * kdo má zapnuté „omezit pohyb“, uvidí statické ikony jako dřív.
 */

/* Výhoda (ikona + text) je kotva pro absolutně pozicované částice. */
.mz-vyhody > .wp-block-group {
	position: relative;
}

/* ------------------------------------------------------------------ *
 * Částice (srdíčko / fajfka / procento), které vyletí z ikony
 * Barvu (color) dosazuje skript z atributu stroke ikony; tady je jen
 * záloha ve stejné zelené, jakou mají ikony v šabloně. Bez animace
 * jsou průhledné, takže by nikdy nezůstaly viset na stránce.
 * ------------------------------------------------------------------ */
.mz-vyhoda-castice {
	position: absolute;
	z-index: 1;
	display: block;
	color: #5E9482;
	opacity: 0;
	pointer-events: none;
	translate: -50% -50%;
}

.mz-vyhoda-castice svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Srdíčko: plné v barvě ikony s bílým lemem (tentýž tvar jako srdíčka
   z banneru Pro maminku; lem je tam krémový kvůli růžové tašce, tady
   bílý jako pozadí stránky - odděluje srdíčko od obrysu ikony). */
.mz-vyhoda-castice--srdicko svg {
	fill: currentColor;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linejoin: round;
	paint-order: stroke;
}

/* Fajfka a procento (vylétají z cenovky): jen tah, pod ním širší bílý lem. */
.mz-vyhoda-castice--fajfka svg,
.mz-vyhoda-castice--procento svg {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mz-vyhoda-castice--fajfka .mz-vyhoda-castice__lem {
	stroke: #fff;
	stroke-width: 7.5;
}

.mz-vyhoda-castice--fajfka .mz-vyhoda-castice__tah {
	stroke: currentColor;
	stroke-width: 4;
}

/* Procento má kroužky o poloměru 2,6 - tlustší tah by je zalil. */
.mz-vyhoda-castice--procento .mz-vyhoda-castice__lem {
	stroke: #fff;
	stroke-width: 6.4;
}

.mz-vyhoda-castice--procento .mz-vyhoda-castice__tah {
	stroke: currentColor;
	stroke-width: 2.8;
}

/* Body otáčení animovaných částí ikon (platí i bez animace, nic nemění):
   - srdíčko se zvětšuje ze svého středu (fill-box = jeho vlastní obrys),
   - cenovka visí za dírku: střed kroužku v souřadnicích ikony 24 × 24
     (circle cx 16.3 cy 7.7 v templates/front-page.html - při změně
     ikony změnit i tady). */
.mz-vyhoda-srdce {
	transform-box: fill-box;
	transform-origin: center;
}

.mz-vyhoda-cenovka {
	transform-box: view-box;
	transform-origin: 16.3px 7.7px;
}

@media (prefers-reduced-motion: no-preference) {

	/* Let částice: vyskočí z ikony, rozletí se vějířem nahoru (cíl
	   --mz-castice-dx / -dy a natočení dává skript každé jinak) a zmizí.
	   Stejné tempo a křivka jako srdíčka v banneru Pro maminku. */
	.mz-vyhoda-castice {
		animation: mz-vyhoda-castice-let 1.4s cubic-bezier(0.22, 0.8, 0.4, 1) both;
	}

	@keyframes mz-vyhoda-castice-let {
		0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(var(--mz-castice-r0, 0deg)); }
		16%  { opacity: 1; transform: translate(calc(var(--mz-castice-dx, 0px) * 0.15), calc(var(--mz-castice-dy, -30px) * 0.15)) scale(1) rotate(var(--mz-castice-r0, 0deg)); }
		70%  { opacity: 0.9; }
		100% { opacity: 0; transform: translate(var(--mz-castice-dx, 0px), var(--mz-castice-dy, -30px)) scale(0.8) rotate(var(--mz-castice-r1, 0deg)); }
	}

	/* Testováno mámou: srdíčko v bublině dvakrát tlukne (velký a menší
	   úder), částice vyletí s prvním úderem. */
	.mz-vyhoda-ikona.je-reakce .mz-vyhoda-srdce {
		animation: mz-vyhoda-tlukot 0.8s ease-out;
	}

	@keyframes mz-vyhoda-tlukot {
		0%   { transform: scale(1); }
		16%  { transform: scale(1.32); }
		32%  { transform: scale(0.94); }
		50%  { transform: scale(1.16); }
		70%  { transform: scale(1); }
		100% { transform: scale(1); }
	}

	/* Zdravotní nezávadnost: fajfka zmizí a znovu se „dopíše“ tahem od
	   kraje (pathLength="1" v SVG, takže stačí čárkování 1). Na prvním
	   snímku je i průhledná, jinak by kulatá koncovka tahu blikla tečkou. */
	.mz-vyhoda-ikona.je-reakce .mz-vyhoda-fajfka {
		stroke-dasharray: 1;
		animation: mz-vyhoda-fajfka 0.5s cubic-bezier(0.55, 0, 0.3, 1) both;
	}

	@keyframes mz-vyhoda-fajfka {
		0%   { stroke-dashoffset: 1; opacity: 0; }
		12%  { opacity: 1; }
		100% { stroke-dashoffset: 0; opacity: 1; }
	}

	/* Srovnání cen: cenovka se rozhoupe za dírku a dozní - jako když na ni
	   někdo ve vitríně ťukne - a v prvním zhoupnutí z ní vyletí symboly %
	   (skript). Do 17. 10. 2026 se houpala jen o ±12° a bez částic; vedle
	   srdíček a fajfek to vypadalo, že se vůbec nehýbe (zadavatelka). */
	.mz-vyhoda-ikona.je-reakce .mz-vyhoda-cenovka {
		animation: mz-vyhoda-cenovka 1.3s ease-in-out;
	}

	@keyframes mz-vyhoda-cenovka {
		0%   { transform: rotate(0deg); }
		14%  { transform: rotate(-24deg); }
		32%  { transform: rotate(16deg); }
		50%  { transform: rotate(-9deg); }
		68%  { transform: rotate(4deg); }
		84%  { transform: rotate(-1.5deg); }
		100% { transform: rotate(0deg); }
	}
}