/**
 * HRAVĚJŠÍ STRÁNKA „MARKÉTIN DOPIS“ (2026-10-17) - styly k inc/dopis-stranka.php.
 *
 * Načítá se JEN na stránce /newsletter/ (verze podle času souboru, MZ_VERZE
 * se kvůli ní nemění). Všechno se váže na třídu `mz-dopis-stranka` na <body>.
 *
 * Sekce mají stejná čísla jako v PHP i ve skriptu, takže jde každý prvek
 * vypnout zvlášť:
 *   0. šířka stránky
 *   1. obálka u úvodu
 *   2. podpis pod úvodem
 *   3. rubriky jako lístky s ohnutým rohem
 *   4. přeškrtnutí v boxu „Co v něm nebude“
 *   5. tlačítko s obálkou a odleskem
 *   6. „První dopis teprve píšu“ - tužka píše po papíře
 *   7. odhalování při rolování (box a karta dole)
 *
 * Skryté výchozí stavy platí jen pod `html.mz-dp-js` (třídu nastaví skript
 * v hlavičce, viz mz_dopis_stranka_trida_html). Bez JavaScriptu a při
 * „omezit pohyb“ je všechno vidět hned a v klidu. Pohyb sám je vždy uvnitř
 * @media (prefers-reduced-motion: no-preference).
 */

/* ------------------------------------------------------------------ *
 * 0. ŠÍŘKA STRÁNKY
 * Stránka je skoro jen text - na šířce 1140 px měly řádky přes 150 znaků
 * a špatně se četly. Nadpis i obsah drží 860 px (Kontakt má 820 px).
 * Pravidlo WordPressu pro „constrained“ rozvržení má nízkou specificitu
 * (:where), takže tohle ho přebije bez !important.
 * ------------------------------------------------------------------ */
.mz-dopis-stranka main > .wp-block-post-title,
.mz-dopis-stranka .wp-block-post-content > * {
	max-width: 860px;
}

/* ------------------------------------------------------------------ *
 * 1. OBÁLKA U ÚVODU
 * Tatáž obálka jako na homepage (inc/obalka-dopis.php, vzhled a animace
 * ve style.css, „Oživení stránek“, část B). Tam ji otevírá najetí na celý
 * box; tady se otevírá třídou `je-otevrena`, kterou přepíná skript
 * (po načtení na chvilku sama, pak po najetí myší / ťuknutí).
 * ⚠️ Pravidla otevřeného stavu jsou proto opsaná z style.css - kdyby se
 * tam měnilo časování obálky, změnit i tady.
 * ------------------------------------------------------------------ */
.mz-dp-uvod {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
}

.mz-dp-uvod__text {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.mz-dp-uvod__text > p {
	margin: 0;
}

.mz-dp-uvod__obalka {
	grid-column: 2;
	grid-row: 1;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mz-dp-uvod__obalka .mz-obalka {
	width: 150px;
}

.mz-dp-uvod__obalka.je-otevrena .mz-obalka__chlopen {
	transform: scaleY(0);
	transition: transform 0.2s ease-in 0s;
}

.mz-dp-uvod__obalka.je-otevrena .mz-obalka__chlopen-zadni {
	transform: scaleY(1);
	transition: transform 0.22s ease-out 0.18s;
}

.mz-dp-uvod__obalka.je-otevrena .mz-obalka__dopis {
	transform: translateY(0);
	transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1) 0.32s;
}

.mz-dp-uvod__obalka.je-otevrena .mz-obalka__srdce {
	animation: mz-obalka-srdce 1.5s ease-out 0.75s both;
}

.mz-dp-uvod__obalka.je-otevrena .mz-obalka__srdce--2 {
	animation-delay: 0.9s;
}

.mz-dp-uvod__obalka.je-otevrena .mz-obalka__srdce--3 {
	animation-delay: 1.05s;
}

/* Telefon: obálka menší vpravo a text ji obtéká (jako dárek na seznamu přání). */
@media (max-width: 600px) {
	.mz-dp-uvod {
		display: block;
	}

	.mz-dp-uvod::after {
		content: "";
		display: block;
		clear: both;
	}

	.mz-dp-uvod__obalka {
		float: right;
		margin: 2px 0 6px 14px;
	}

	.mz-dp-uvod__obalka .mz-obalka {
		width: 92px;
	}
}

/* ------------------------------------------------------------------ *
 * 2. PODPIS POD ÚVODEM
 * Vzhled i „dopisování“ má podpis ze style.css (.mz-podpis*), tady jen
 * rozestup od úvodní věty.
 * ------------------------------------------------------------------ */
.mz-dp-podpis {
	margin-block-start: 16px;
}

/* ------------------------------------------------------------------ *
 * 3. RUBRIKY JAKO LÍSTKY
 * Čtyři barevné lístky 2 × 2 (na telefonu pod sebou). Pravý horní roh je
 * „ohnutý“: místo zaobleného rohu trojúhelník, který z poloviny ukazuje
 * bílou stránku pod lístkem a z poloviny tmavší „rub“ papíru.
 * ------------------------------------------------------------------ */
.mz-dopis-stranka .mz-dp-rubriky {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-block-start: 20px;
	padding: 0;
	list-style: none;
}

.mz-dp-rubrika {
	--mz-dp-roh: 24px;
	--mz-dp-pozadi: var(--wp--preset--color--pudrova);
	--mz-dp-ohyb: #f3d5cd;
	--mz-dp-ikona: var(--wp--preset--color--koralova-tmava);
	--mz-dp-r: -0.7deg;
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin: 0;
	padding: 20px 26px 20px 20px;
	border-radius: 16px 0 16px 16px;
	background: var(--mz-dp-pozadi);
	line-height: 1.55;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mz-dp-rubrika:nth-child(2n) {
	--mz-dp-r: 0.7deg;
}

/* Ohnutý roh. Gradient 225° jde od pravého horního rohu: první polovina
   bílá (stránka pod lístkem), druhá barva „rubu“. */
.mz-dp-rubrika::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: var(--mz-dp-roh);
	height: var(--mz-dp-roh);
	background: linear-gradient(225deg, #fff 50%, var(--mz-dp-ohyb) 50%);
	border-bottom-left-radius: 6px;
	box-shadow: -2px 2px 4px rgba(62, 62, 64, 0.08);
	transition: width 0.3s ease, height 0.3s ease;
}

/* Barvy z palety (stejné trojice jako odznaky a cedulky na O mně). */
.mz-dp-rubrika--mata {
	--mz-dp-pozadi: var(--wp--preset--color--mata-svetla);
	--mz-dp-ohyb: #cfe6dc;
	--mz-dp-ikona: var(--wp--preset--color--mata-tmava);
}

.mz-dp-rubrika--medova {
	--mz-dp-pozadi: #fbf2de;
	--mz-dp-ohyb: #f0dfb4;
	--mz-dp-ikona: #8a6a1f;
}

/* Čtvrtý lístek je bílý s teplým rámečkem (krémová by od pudrové nešla
   rozeznat). Rámeček je vnitřní stín, ne border - lístek by jinak byl
   o 2 px větší než ostatní. */
.mz-dp-rubrika--bila {
	--mz-dp-pozadi: #fff;
	--mz-dp-ohyb: #f6ece9;
	--mz-dp-ikona: var(--wp--preset--color--koralova-syta);
	box-shadow: inset 0 0 0 1px #f0e4e0;
}

.mz-dp-rubrika__ikona {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: var(--mz-dp-ikona);
	box-shadow: 0 4px 12px rgba(62, 62, 64, 0.08);
}

.mz-dp-rubrika--bila .mz-dp-rubrika__ikona {
	background: var(--wp--preset--color--pudrova);
}

.mz-dp-rubrika__ikona svg {
	display: block;
	width: 24px;
	height: 24px;
}

.mz-dp-rubrika__obsah {
	min-width: 0;
	padding-block-start: 2px;
}

.mz-dp-rubrika__titulek {
	display: block;
	margin-block-end: 4px;
	color: var(--wp--preset--color--antracit);
	font-family: var(--wp--preset--font-family--nadpisy);
	font-size: 1.12em;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 700px) {
	.mz-dopis-stranka .mz-dp-rubriky {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.mz-dp-rubrika {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 14px;
		padding: 16px 22px 16px 16px;
	}

	.mz-dp-rubrika__ikona {
		width: 42px;
		height: 42px;
	}

	.mz-dp-rubrika__ikona svg {
		width: 21px;
		height: 21px;
	}
}

/* ------------------------------------------------------------------ *
 * 4. PŘEŠKRTNUTÍ V BOXU „CO V NĚM NEBUDE“
 * Každá vyjmenovaná věc má korálovou čáru (::after), lehce nakřivo jako
 * od ruky. Bez JS je přeškrtnutá hned; se skriptem se čáry nakreslí jedna
 * po druhé, když box dojede do okna.
 * ------------------------------------------------------------------ */
.mz-dp-skrt {
	position: relative;
	white-space: nowrap;
}

.mz-dp-skrt::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	top: 52%;
	height: 2.6px;
	margin-top: -1.3px;
	border-radius: 3px;
	background: var(--wp--preset--color--koralova-syta);
	opacity: 0.9;
	transform-origin: 0 50%;
	transform: rotate(var(--mz-dp-skrt-r, -2deg));
	pointer-events: none;
}

.mz-dp-skrt:nth-of-type(2n)::after {
	--mz-dp-skrt-r: 1.6deg;
}

.mz-dp-js .mz-dp-skrt::after {
	transform: rotate(var(--mz-dp-skrt-r, -2deg)) scaleX(0);
}

.mz-dp-js .mz-dp-nebude.je-videt .mz-dp-skrt::after {
	transform: rotate(var(--mz-dp-skrt-r, -2deg)) scaleX(1);
}

/* ------------------------------------------------------------------ *
 * 5. TLAČÍTKO S OBÁLKOU A ODLESKEM
 * Odlesk je stejný jako na homepage (::after se z-indexem -1 ve vlastní
 * vrstvě tlačítka = nad pozadím, pod textem).
 * ------------------------------------------------------------------ */
.mz-dp-tlacitko .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.mz-dp-tlacitko__ikona {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
}

.mz-dp-tlacitko__ikona svg {
	display: block;
	width: 20px;
	height: 20px;
}

.mz-dp-tlacitko .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 45%;
	background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
	transform: translateX(-130%) skewX(-20deg);
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 6. „PRVNÍ DOPIS TEPRVE PÍŠU“
 * Krémová karta s čárkovaným okrajem (jako prázdný seznam přání) a kreslený
 * list papíru. Bez JS / při „omezit pohyb“ je dopsaný a tužka leží na konci
 * posledního řádku. Se skriptem tužka řádky píše dokola (cyklus 8 s).
 * Souřadnice v keyframes = souřadnice řádků v mz_dopis_stranka_pisu_svg().
 * ------------------------------------------------------------------ */
.mz-dp-pisu {
	/* border-box: šířku 860 px dává karte WordPress (max-width), odsazení
	   a okraj se do ní musí vejít, jinak by karta byla širší než text. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 16px 24px 16px 12px;
	border: 1.5px dashed #ecd2cb;
	border-radius: 16px;
	background: var(--wp--preset--color--kremova);
}

.mz-dp-pisu > p {
	margin: 0;
}

.mz-dp-pisu__obrazek {
	flex: 0 0 auto;
	line-height: 0;
}

.mz-dp-pisu__svg {
	width: 112px;
	height: auto;
	overflow: visible;
	rotate: -4deg;
}

.mz-dp-pisu__radek {
	fill: none;
	stroke: #8fbfad;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.mz-dp-pisu__tuzka {
	transform: translate(66px, 71px);
}

.mz-dp-pisu__srdce {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/* Se skriptem: dokud karta nedojede do okna, je papír prázdný (animace
   pak začne od čistého listu, ne od dopsaného). */
.mz-dp-js .mz-dp-pisu:not(.je-videt) .mz-dp-pisu__radek {
	stroke-dashoffset: 1;
}

.mz-dp-js .mz-dp-pisu:not(.je-videt) .mz-dp-pisu__srdce {
	opacity: 0;
}

@media (max-width: 600px) {
	.mz-dp-pisu {
		flex-direction: column;
		gap: 8px;
		padding: 16px 18px 18px;
		text-align: center;
	}

	.mz-dp-pisu__svg {
		width: 96px;
	}
}

/* ------------------------------------------------------------------ *
 * 7. ODHALOVÁNÍ PŘI ROLOVÁNÍ
 * Třídu `mz-dp-odhal` přidává jen skript, a to jen prvkům, které jsou při
 * načtení pod spodním okrajem okna. Lístky (sekce 3) mají vlastní nástup.
 * ------------------------------------------------------------------ */
.mz-dp-odhal {
	opacity: 0;
	translate: 0 24px;
}

.mz-dp-odhal.je-videt {
	opacity: 1;
	translate: none;
}

.mz-dp-js .mz-dp-rubriky > .mz-dp-rubrika {
	opacity: 0;
	translate: 0 28px;
	scale: 0.96;
}

.mz-dp-js .mz-dp-rubriky.je-videt > .mz-dp-rubrika {
	opacity: 1;
	translate: none;
	scale: none;
}

@media print {
	.mz-dp-odhal,
	.mz-dp-js .mz-dp-rubriky > .mz-dp-rubrika {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
	}
}

/* ================================================================== *
 * POHYB - jen když čtenářka nemá zapnuté „omezit pohyb“
 * ================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* 3. Lístky naskočí jeden po druhém (každý další +120 ms). Přechod
	   `transform` je tu kvůli zvednutí po najetí (bez zpoždění). */
	.mz-dp-js .mz-dp-rubriky > .mz-dp-rubrika {
		transition:
			opacity 0.6s ease calc(var(--i, 0) * 120ms),
			translate 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 120ms),
			scale 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 120ms),
			transform 0.3s ease,
			box-shadow 0.3s ease;
	}

	/* Zvednutí po najetí jen na zařízeních s myší (na dotyku by „viselo“). */
	@media (hover: hover) {
		.mz-dp-rubrika:hover {
			transform: translateY(-4px); /* bez rotate: natočená vrstva rozmazává písmo */
			box-shadow: 0 14px 28px rgba(62, 62, 64, 0.1);
		}

		.mz-dp-rubrika--bila:hover {
			box-shadow: inset 0 0 0 1px #f0e4e0, 0 14px 28px rgba(62, 62, 64, 0.1);
		}

		.mz-dp-rubrika:hover::before {
			width: 32px;
			height: 32px;
		}

		.mz-dp-rubrika:hover .mz-dp-rubrika__ikona svg {
			animation: mz-dp-vrteni 0.6s ease;
		}
	}

	/* Ťuknutí na telefonu (třída je-vrti ze skriptu). */
	.mz-dp-rubrika.je-vrti .mz-dp-rubrika__ikona svg {
		animation: mz-dp-vrteni 0.6s ease;
	}

	@keyframes mz-dp-vrteni {
		0%,
		100% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(-14deg) scale(1.08);
		}
		55% {
			transform: rotate(10deg) scale(1.08);
		}
		80% {
			transform: rotate(-4deg);
		}
	}

	/* 4. Čáry se kreslí zleva doprava jedna po druhé. */
	.mz-dp-js .mz-dp-nebude.je-videt .mz-dp-skrt::after {
		transition: transform 0.42s cubic-bezier(0.6, 0.05, 0.3, 1) calc(0.35s + var(--i, 0) * 0.38s);
	}

	/* 5. Tlačítko: zvednutí, obálka vyletí a odlesk přejede. Po odjetí myši
	   odlesk skočí zpátky bez přechodu, takže příště přejede znovu. */
	.mz-dp-tlacitko .wp-block-button__link:is(:hover, :focus-visible) {
		transform: translateY(-2px);
		box-shadow: 0 8px 18px rgba(176, 75, 71, 0.28);
	}

	.mz-dp-tlacitko .wp-block-button__link:is(:hover, :focus-visible) .mz-dp-tlacitko__ikona {
		animation: mz-dp-let 0.8s ease;
	}

	.mz-dp-tlacitko .wp-block-button__link:is(:hover, :focus-visible)::after,
	.mz-dp-tlacitko.je-odlesk .wp-block-button__link::after {
		transform: translateX(330%) skewX(-20deg);
		transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.1s;
	}

	@keyframes mz-dp-let {
		0% {
			transform: none;
			opacity: 1;
		}
		40% {
			transform: translate(16px, -14px) rotate(-14deg);
			opacity: 0;
		}
		41% {
			transform: translate(-14px, 8px);
			opacity: 0;
		}
		100% {
			transform: none;
			opacity: 1;
		}
	}

	/* 6. Tužka píše. Cyklus 8 s: čtyři řádky (0,3-5,1 s), srdíčko, pauza,
	   všechno se rozplyne a začne se znovu. */
	.mz-dp-js .mz-dp-pisu.je-videt .mz-dp-pisu__tuzka {
		animation: mz-dp-tuzka 8s linear infinite;
	}

	.mz-dp-js .mz-dp-pisu.je-videt .mz-dp-pisu__radek--1 {
		animation: mz-dp-radek-1 8s linear infinite;
	}

	.mz-dp-js .mz-dp-pisu.je-videt .mz-dp-pisu__radek--2 {
		animation: mz-dp-radek-2 8s linear infinite;
	}

	.mz-dp-js .mz-dp-pisu.je-videt .mz-dp-pisu__radek--3 {
		animation: mz-dp-radek-3 8s linear infinite;
	}

	.mz-dp-js .mz-dp-pisu.je-videt .mz-dp-pisu__radek--4 {
		animation: mz-dp-radek-4 8s linear infinite;
	}

	.mz-dp-js .mz-dp-pisu.je-videt .mz-dp-pisu__srdce {
		animation: mz-dp-srdce 8s ease-out infinite;
	}

	@keyframes mz-dp-tuzka {
		0%,
		3.75% {
			transform: translate(38px, 34px);
		}
		17.5% {
			transform: translate(82px, 34px);
		}
		20% {
			transform: translate(38px, 46px);
		}
		33.75% {
			transform: translate(78px, 46px);
		}
		36.25% {
			transform: translate(38px, 58px);
		}
		50% {
			transform: translate(84px, 58px);
		}
		52.5% {
			transform: translate(38px, 70px);
		}
		63.75% {
			transform: translate(64px, 70px);
		}
		70%,
		90% {
			transform: translate(80px, 84px) rotate(10deg);
		}
		100% {
			transform: translate(38px, 34px);
		}
	}

	@keyframes mz-dp-radek-1 {
		0%,
		3.75% {
			stroke-dashoffset: 1;
			opacity: 1;
		}
		17.5%,
		88% {
			stroke-dashoffset: 0;
			opacity: 1;
		}
		94% {
			stroke-dashoffset: 0;
			opacity: 0;
		}
		95%,
		100% {
			stroke-dashoffset: 1;
			opacity: 0;
		}
	}

	@keyframes mz-dp-radek-2 {
		0%,
		20% {
			stroke-dashoffset: 1;
			opacity: 1;
		}
		33.75%,
		88% {
			stroke-dashoffset: 0;
			opacity: 1;
		}
		94% {
			stroke-dashoffset: 0;
			opacity: 0;
		}
		95%,
		100% {
			stroke-dashoffset: 1;
			opacity: 0;
		}
	}

	@keyframes mz-dp-radek-3 {
		0%,
		36.25% {
			stroke-dashoffset: 1;
			opacity: 1;
		}
		50%,
		88% {
			stroke-dashoffset: 0;
			opacity: 1;
		}
		94% {
			stroke-dashoffset: 0;
			opacity: 0;
		}
		95%,
		100% {
			stroke-dashoffset: 1;
			opacity: 0;
		}
	}

	@keyframes mz-dp-radek-4 {
		0%,
		52.5% {
			stroke-dashoffset: 1;
			opacity: 1;
		}
		63.75%,
		88% {
			stroke-dashoffset: 0;
			opacity: 1;
		}
		94% {
			stroke-dashoffset: 0;
			opacity: 0;
		}
		95%,
		100% {
			stroke-dashoffset: 1;
			opacity: 0;
		}
	}

	@keyframes mz-dp-srdce {
		0%,
		64% {
			opacity: 0;
			transform: scale(0);
		}
		67% {
			opacity: 1;
			transform: scale(1.3);
		}
		70%,
		88% {
			opacity: 1;
			transform: scale(1);
		}
		94%,
		100% {
			opacity: 0;
			transform: scale(1);
		}
	}

	/* 7. Odhalení boxu a karty dole. */
	.mz-dp-odhal {
		transition:
			opacity 0.6s ease,
			translate 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
	}
}