/**
 * OŽIVENÍ STRÁNKY SEZNAMU PŘÁNÍ (2026-10-17)
 *
 * Načítá se jen na stránce /seznam-prani/ (inc/seznam-prani.php,
 * mz_prani_styly_stranky), základ stránky a tlačítek je dál ve style.css.
 * Co tu je:
 *   1. hlavička stránky = úvodní text + kreslený dárek s visačkou,
 *   2. dárek: víko se nadzvedne a vyletí srdíčka (prázdný se zakolébe),
 *   3. karty naskakují jedna po druhé, odebraná karta se zmenší a zmizí,
 *   4. tlačítko „Zkopírovat odkaz“ po zkopírování,
 *   5. prázdný seznam.
 * Třídy je-reakce / je-prazdny / je-houpani / je-odchod / je-hotovo
 * přidává assets/js/seznam-prani.js. Všechny pohyby jsou v
 * @media (prefers-reduced-motion: no-preference) - kdo má zapnuté
 * „omezit pohyb“, vidí stránku klidnou jako dřív.
 */

/* ------------------------------------------------------------------ *
 * 1. Hlavička: úvod vlevo, dárek vpravo
 * Velikost dárku řídí --mz-darek (šířka obrázku), visačka a odsazení se
 * od ní odvíjí. Na telefonu dárek obtéká text zprava (float), proto je
 * v HTML před odstavcem.
 * ------------------------------------------------------------------ */
.mz-prani__hlava {
	--mz-darek: 150px;
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.mz-prani__hlava .mz-prani__uvod {
	margin: 0;
}

.mz-prani-darek {
	position: relative;
	flex: 0 0 auto;
	order: 2;
	/* Místo vpravo navíc pro visačku, která visí vedle krabice. */
	width: calc(var(--mz-darek) + 34px);
	/* Text drží odstup od nadpisu jako dřív a dárek vyjede o kus výš,
	   do volného místa vedle nadpisu stránky. */
	margin: -48px 8px 0 auto;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mz-prani-darek__svg {
	display: block;
	width: var(--mz-darek);
	height: auto;
	overflow: visible;
}

@media (max-width: 600px) {
	.mz-prani__hlava {
		--mz-darek: 92px;
		display: flow-root;
	}

	.mz-prani-darek {
		float: right;
		margin: 0 -4px 6px 12px;
	}
}

/* Body otáčení (platí i bez animace, nic nemění). Souřadnice jsou
   v jednotkách obrázku 120 × 112 (viewBox v mz_prani_darek_html):
   víko se otvírá kolem levého spodního rohu, krabice se mačká ke dnu,
   celý dárek se kolébá kolem středu dna. */
.mz-prani-darek__viko {
	transform-box: view-box;
	transform-origin: 13px 59px;
}

.mz-prani-darek__telo,
.mz-prani-darek__cely {
	transform-box: view-box;
	transform-origin: 60px 104px;
}

/* Srdíčka jsou bez animace průhledná, takže nikdy nezůstanou viset. */
.mz-prani-darek__srdce {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

/* ------------------------------------------------------------------ *
 * Visačka s počtem: visí na provázku z pravého horního rohu krabice.
 * Obal má nulovou šířku a stojí přesně v bodě úvazu (99/120 šířky,
 * 60/120 šířky odshora), takže se houpe kolem něj.
 * ------------------------------------------------------------------ */
.mz-prani-darek__visacka {
	--mz-provazek: 14px;
	position: absolute;
	left: calc(var(--mz-darek) * 0.825);
	top: calc(var(--mz-darek) * 0.5);
	width: 0;
	height: 0;
	transform-origin: 0 0;
	rotate: -6deg;
}

.mz-prani-darek__visacka[hidden] {
	display: none;
}

/* Provázek: vede z úvazu až do dírky štítku (proto je NAD štítkem).
   Délka = provázek nad štítkem + rámeček 2 px + odsazení dírky 5 px +
   polovina dírky 3 px. */
.mz-prani-darek__visacka::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: -1px;
	top: 0;
	width: 2px;
	height: calc(var(--mz-provazek) + 10px);
	border-radius: 1px;
	background: #2C5547;
}

/* Štítek visí tak, že dírka (26 % jeho šířky) je přesně pod úvazem;
   většina štítku tak visí vedle krabice, ne přes ni. */
.mz-prani-darek__stitek {
	position: absolute;
	top: var(--mz-provazek);
	left: 0;
	translate: -26% 0;
	padding: 14px 9px 5px;
	border: 2px solid #2C5547;
	border-radius: 7px;
	background: var(--wp--preset--color--kremova);
	color: var(--wp--preset--color--koralova-tmava);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(62, 62, 64, 0.08);
}

/* Dírka štítku, kterou prochází provázek. */
.mz-prani-darek__stitek::before {
	content: "";
	position: absolute;
	left: 26%;
	top: 5px;
	width: 6px;
	height: 6px;
	box-sizing: border-box;
	translate: -50% 0;
	border: 1.5px solid #2C5547;
	border-radius: 50%;
	background: var(--wp--preset--color--bila);
}

/* Telefon: menší dárek, kratší provázek a drobnější štítek. */
@media (max-width: 600px) {
	.mz-prani-darek__visacka {
		--mz-provazek: 10px;
	}

	.mz-prani-darek__stitek {
		padding: 13px 7px 4px;
		font-size: 11px;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Prázdný seznam: krémová karta s čárkovaným okrajem uprostřed.
 * (Bez display - jinak by přebilo atribut hidden.)
 * ------------------------------------------------------------------ */
.mz-prani__prazdny {
	margin: 24px 0;
	padding: 28px 24px;
	border: 2px dashed #f0d6cf;
	border-radius: 16px;
	background: var(--wp--preset--color--kremova);
	text-align: center;
}

.mz-prani__prazdny p {
	margin: 0 auto;
	max-width: 460px;
}

.mz-prani__prazdny p + p {
	margin-top: 16px;
}

/* ------------------------------------------------------------------ *
 * 4. Zkopírovat odkaz: po zkopírování na chvíli mátové „Zkopírováno ✓“.
 * ------------------------------------------------------------------ */
.mz-prani__sdilet--kopirovat.je-hotovo,
.mz-prani__sdilet--kopirovat.je-hotovo:hover,
.mz-prani__sdilet--kopirovat.je-hotovo:focus-visible {
	border-color: var(--wp--preset--color--mata);
	background: var(--wp--preset--color--mata-svetla);
	color: var(--wp--preset--color--mata-tmava);
}

/* Odebraná karta je během odchodu neklikací (dvojklik by ji vrátil). */
.mz-prani__polozka.je-odchod {
	pointer-events: none;
}

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

	/* ------------------------------------------------------------------ *
	 * 2. Dárek
	 * ------------------------------------------------------------------ */

	/* Víko vyskočí, pootevře se doleva a zase dosedne s malým odskokem. */
	.mz-prani-darek.je-reakce .mz-prani-darek__viko {
		animation: mz-prani-viko 1.1s cubic-bezier(0.3, 0.7, 0.4, 1) both;
	}

	@keyframes mz-prani-viko {
		0%   { transform: translate(0, 0) rotate(0); }
		18%  { transform: translate(-2px, -15px) rotate(-12deg); }
		45%  { transform: translate(-1px, -11px) rotate(-8deg); }
		68%  { transform: translate(0, -1px) rotate(1.5deg); }
		82%  { transform: translate(0, -3px) rotate(-0.5deg); }
		100% { transform: translate(0, 0) rotate(0); }
	}

	/* Krabice se na začátku krátce přikrčí (jako když se z ní něco odrazí). */
	.mz-prani-darek.je-reakce .mz-prani-darek__telo {
		animation: mz-prani-telo 0.6s ease-out both;
	}

	@keyframes mz-prani-telo {
		0%   { transform: scale(1, 1); }
		14%  { transform: scale(1.04, 0.93); }
		34%  { transform: scale(0.98, 1.03); }
		55%  { transform: scale(1, 1); }
		100% { transform: scale(1, 1); }
	}

	/* Srdíčka vyletí z otevřené krabice vějířem nahoru a zmizí
	   (stejná křivka jako srdíčka z tašky v banneru Pro maminku). */
	.mz-prani-darek.je-reakce .mz-prani-darek__srdce {
		animation: mz-prani-srdce 1.25s cubic-bezier(0.22, 0.8, 0.4, 1) both;
	}

	.mz-prani-darek.je-reakce .mz-prani-darek__srdce--1 {
		--mz-dx: -30px;
		--mz-dy: -50px;
		--mz-r: -22deg;
		animation-delay: 0.1s;
	}

	.mz-prani-darek.je-reakce .mz-prani-darek__srdce--2 {
		--mz-dx: 2px;
		--mz-dy: -64px;
		--mz-r: 6deg;
		animation-delay: 0.2s;
	}

	.mz-prani-darek.je-reakce .mz-prani-darek__srdce--3 {
		--mz-dx: 32px;
		--mz-dy: -48px;
		--mz-r: 20deg;
		animation-delay: 0.3s;
	}

	@keyframes mz-prani-srdce {
		0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0); }
		15%  { opacity: 1; transform: translate(calc(var(--mz-dx) * 0.2), calc(var(--mz-dy) * 0.3)) scale(1) rotate(0); }
		70%  { opacity: 0.95; }
		100% { opacity: 0; transform: translate(var(--mz-dx), var(--mz-dy)) scale(0.85) rotate(var(--mz-r)); }
	}

	/* Prázdný dárek: nic z něj nevyletí, jen se zakolébe a víko nakoukne. */
	.mz-prani-darek.je-prazdny.je-reakce .mz-prani-darek__srdce {
		animation: none;
	}

	.mz-prani-darek.je-prazdny.je-reakce .mz-prani-darek__telo {
		animation: none;
	}

	.mz-prani-darek.je-prazdny.je-reakce .mz-prani-darek__cely {
		animation: mz-prani-kolebani 0.9s ease-in-out both;
	}

	.mz-prani-darek.je-prazdny.je-reakce .mz-prani-darek__viko {
		animation: mz-prani-viko-nakouk 0.9s ease-in-out both;
	}

	@keyframes mz-prani-kolebani {
		0%   { transform: rotate(0); }
		20%  { transform: rotate(-6deg); }
		45%  { transform: rotate(5deg); }
		68%  { transform: rotate(-3deg); }
		86%  { transform: rotate(1deg); }
		100% { transform: rotate(0); }
	}

	@keyframes mz-prani-viko-nakouk {
		0%, 100% { transform: translate(0, 0) rotate(0); }
		30%  { transform: translate(0, -5px) rotate(-4deg); }
		55%  { transform: translate(0, 0) rotate(0); }
	}

	/* Visačka se zhoupne s otevřením dárku a při změně počtu. */
	.mz-prani-darek.je-reakce .mz-prani-darek__visacka,
	.mz-prani-darek__visacka.je-houpani {
		animation: mz-prani-visacka 1.3s ease-in-out;
	}

	@keyframes mz-prani-visacka {
		0%   { rotate: -6deg; }
		15%  { rotate: 14deg; }
		34%  { rotate: -16deg; }
		52%  { rotate: 8deg; }
		70%  { rotate: -10deg; }
		86%  { rotate: -4deg; }
		100% { rotate: -6deg; }
	}

	/* Číslo na visačce při změně krátce povyskočí. */
	.mz-prani-darek__visacka.je-houpani .mz-prani-darek__stitek {
		animation: mz-prani-stitek 0.45s ease-out;
	}

	@keyframes mz-prani-stitek {
		0%   { scale: 1; }
		35%  { scale: 1.18; }
		100% { scale: 1; }
	}

	/* ------------------------------------------------------------------ *
	 * 3. Karty
	 * ------------------------------------------------------------------ */

	/* Naskočí zespodu jedna po druhé (--i = pořadí z PHP). Výplň jen
	   „backwards“: po doběhnutí na kartě nezůstane žádný transform, takže
	   se nepere s posunem při odebrání sousední karty. */
	.mz-prani__polozka {
		animation: mz-prani-karta 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
		animation-delay: calc(0.08s + min(var(--i, 0), 11) * 0.07s);
	}

	@keyframes mz-prani-karta {
		0%   { opacity: 0; transform: translateY(26px) scale(0.97); }
		100% { opacity: 1; transform: none; }
	}

	/* Odebraná karta se zmenší a zmizí; ostatní pak plynule sjedou na
	   uvolněné místo (posun počítá skript, viz odeberKartu). */
	.mz-prani__polozka.je-odchod {
		opacity: 0;
		transform: scale(0.9);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	/* Zkopírováno: tlačítko krátce povyskočí. */
	.mz-prani__sdilet--kopirovat.je-hotovo {
		animation: mz-prani-hotovo 0.35s ease-out;
	}

	@keyframes mz-prani-hotovo {
		0%   { transform: scale(1); }
		40%  { transform: scale(1.07); }
		100% { transform: scale(1); }
	}
}