/* ====================================================================== *
 * ANIMACE HERO SEKCE NA HOMEPAGE (2026-10-15) - viz inc/hero-animace.php
 *
 * Načítá se JEN na homepage. Všechny animace běží jednou po načtení stránky
 * a pak se už nic nehýbe; animuje se výhradně průhlednost, posun (transform)
 * a délka čáry SVG (stroke-dashoffset) - nic, co by přepočítávalo rozložení.
 *
 * Časová osa (ms od načtení):
 *   100-700   malý nadpis se prolne a stáhnou se mu rozestupy písmen
 *   200-1250  claim se píše po písmenech (čas nese každé písmeno v proměnné
 *             --d z PHP, psaní řídí assets/js/hero-psani.js)
 *   ~650      podnadpis DOJEDE spolu s tečkou za „mámou.“ (vyjíždí 0,6 s)
 *   ~1250     tlačítka DOJEDOU spolu s tečkou za „Zodpovědně.“ a v tu chvíli
 *             se začne kreslit rámeček fotky (0,9 s), světlo pak 0,4 s zhasíná
 *   (navazování řídí hero-psani.js třídami mz-hero--podnadpis / --tlacitka /
 *   --ram na skupině .mz-hero; bez skriptu jedou pevné časy 0,8 / 1,0 / 0,25 s)
 *   konec     kurzor za claimem třikrát blikne a zmizí
 *
 * Společná křivka pohybu je stejná jako u podpisu na detailu produktu
 * (cubic-bezier(.22,.61,.36,1)), aby celý web mluvil jedním pohybem.
 *
 * VYPNUTO (vše vidět hned, bez pohybu):
 *   - prefers-reduced-motion: reduce (nastavení systému),
 *   - html.mz-hero-videno = člověk přišel z jiné stránky webu nebo tlačítkem
 *     Zpět (třídu přidává skript v <head>, viz mz_hero_animace_rozhodni).
 * ====================================================================== */

/* --- 1. Malý nadpis nad claimem ------------------------------------- */

.mz-hero .wp-block-column > p:first-child {
	opacity: 0;
	animation: mz-hero-label 0.6s 0.1s ease-out forwards;
}

@keyframes mz-hero-label {
	from {
		opacity: 0;
		letter-spacing: 6px;
	}
	to {
		opacity: 1;
		letter-spacing: 2px; /* = hodnota, kterou má odstavec v editoru */
	}
}

/* --- 2. Claim psaný po písmenech ------------------------------------- */

/* Písmena zabírají místo od začátku (jen nejsou vidět), takže se text při
   psaní nikam neposouvá ani nezalamuje jinak. Schovaná jsou JEN pod třídou
   html.mz-hero-js (přidá ji skript v <head> při prvním zobrazení); ukazuje je
   skript hero-psani.js třídou `je-napsane` - skokem, bez prolnutí, přesně
   jako znak na obrazovce. Bez JavaScriptu je claim vidět celý. */
html.mz-hero-js .mz-hero-claim .mz-pismeno {
	position: relative; /* kotva pro kurzor */
	opacity: 0;
	/* Pojistka: kdyby se hero-psani.js nenačetl, písmena se po 3,5 s
	   prolnou sama. Když skript běží, jsou už dávno vidět a nic se nestane. */
	animation: mz-hero-pojistka 0.3s 3.5s ease-out forwards;
}

html.mz-hero-js .mz-hero-claim .mz-pismeno.je-napsane {
	opacity: 1;
	animation: none;
}

@keyframes mz-hero-pojistka {
	to {
		opacity: 1;
	}
}

/* Kurzor = tenká korálová čárka, kterou skript přesouvá za právě napsané
   písmeno (vkládá ji dovnitř jeho <span>). Je absolutně pozicovaný, takže
   nezabírá místo a text se kvůli němu neposouvá.
   VÝŠKA: stejně vysoký jako velká písmena - od vršku verzálky po účaří (o pár
   pixelů pod něj). Kotví se k SPODKU řádkového boxu, protože u Playfairu je
   nad písmeny hodně prázdného místa (box 1,33 em, písmena 0,71 em): kotvení
   shora (původní top 0.1em) posadilo kurzor o 9 px výš než text a končil nad
   účařím. Změřeno: box 44 px, kurzor 241-267 px, verzálka 241-265 px. */
.mz-hero-kurzor {
	position: absolute;
	right: -3px;
	bottom: 0.19em;
	height: 0.78em;
	width: 2px;
	background: var(--wp--preset--color--koralova-syta);
}

/* Po dopsání kurzor třikrát blikne (1,2 s na bliknutí) a skript ho odstraní.
   Trvale blikající kurzor by rušil a držel procesor v chodu. steps(1, end)
   drží hodnotu snímku až do dalšího: 0-50 % svítí, 50-100 % je zhasnutý. */
.mz-hero-kurzor--blik {
	animation: mz-hero-kurzor-blik 1.2s steps(1, end) 3 forwards;
}

@keyframes mz-hero-kurzor-blik {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* --- 3. Podnadpis a tlačítka vyjedou odspodu ------------------------- */

/* Dva režimy:
   - BEZ skriptu (html nemá třídu mz-hero-js): vyjedou na pevných časech
     0,8 s / 1,0 s;
   - SE skriptem (html.mz-hero-js): čekají (animation: none), dokud jim
     hero-psani.js nedá signál třídou na skupině `.mz-hero` - podnadpis
     dojede přesně s tečkou za „mámou.“ (třída mz-hero--podnadpis 600 ms před
     ní), tlačítka s tečkou za „Zodpovědně.“ (mz-hero--tlacitka). Kdyby skript
     signál nikdy nedal, pojistka je ukáže po 3,5 s. */
.mz-hero .mz-hero-claim + p,
.mz-hero .wp-block-buttons {
	opacity: 0;
	transform: translateY(10px);
	animation: mz-hero-vyjeti 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.mz-hero .mz-hero-claim + p {
	animation-delay: 0.8s;
}

.mz-hero .wp-block-buttons {
	animation-delay: 1s;
}

html.mz-hero-js .mz-hero .mz-hero-claim + p,
html.mz-hero-js .mz-hero .wp-block-buttons {
	animation: mz-hero-pojistka 0.3s 3.5s ease-out forwards;
}

html.mz-hero-js .mz-hero.mz-hero--podnadpis .mz-hero-claim + p,
html.mz-hero-js .mz-hero.mz-hero--tlacitka .wp-block-buttons {
	animation: mz-hero-vyjeti 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes mz-hero-vyjeti {
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- 4. Rámeček fotky obkreslený světlem ----------------------------- */

/* Rámeček dnes kreslí border na kruhu. Při animaci se border zprůhlední
   a místo něj se kreslí SVG kružnice přesně v jeho dráze (viz render.php
   bloku hero-foto): růžová čára se obkreslí od vrchu po směru hodinových
   ručiček a před jejím čelem běží krátký korálový „světelný“ úsek, který
   po dokreslení zhasne. Výsledek = přesně dnešní rámeček.
   KDY: bez skriptu od 0,25 s; se skriptem (html.mz-hero-js) čeká na třídu
   mz-hero--ram, kterou hero-psani.js dá skupině `.mz-hero` v okamžiku
   posledního písmene claimu - kolečko se kreslí, až když je vše dopsané
   (přání zadavatelky). Pojistka bez signálu: kreslí se po 3,5 s. */
.mz-hero-foto--kresli .mz-hero-foto__kruh {
	border-color: transparent;
	overflow: visible; /* SVG leží přes border, tedy mimo padding box */
}

.mz-hero-foto__ram {
	position: absolute;
	inset: -8px; /* přesně přes 8px border */
	width: calc(100% + 16px);
	height: calc(100% + 16px);
	transform: rotate(-90deg); /* kreslení začíná nahoře, ne vpravo */
	pointer-events: none;
	overflow: visible;
}

.mz-hero-foto__ram circle {
	fill: none;
	stroke-width: 8;
}

/* Vlastní rámeček: obkreslí se celý a zůstane. pathLength="100" v SVG dělá
   z dasharray/dashoffset procenta obvodu bez ohledu na skutečný poloměr. */
.mz-hero-foto__ram-cara {
	stroke: #f6d9d4; /* = border-color kruhu ve style.css */
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation:
		mz-hero-ram 0.9s 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards,
		mz-hero-ram-skryt 0.01s 1.15s forwards;
}

/* Po dokreslení se vrátí SKUTEČNÝ border kruhu a SVG čára zmizí, takže
   konečný stav je přesně původní rámeček. ⚠️ Proč: začátek a konec SVG
   čáry se nahoře jen dotýkají a na mobilu tam při zaokrouhlení zůstávala
   subpixelová bílá škvíra (kruh vypadal nedokončený - hlásila zadavatelka
   15. 10. 2026). Border žádný šev nemá. */
.mz-hero-foto--kresli .mz-hero-foto__kruh {
	animation: mz-hero-pojistka-ram 0.01s 1.15s forwards;
}

/* Se skriptem: čára čeká (žádná animace) a rozjede se až třídou mz-hero--ram.
   ⚠️ Nesmí se jen měnit animation-delay běžící animace - změna zpoždění
   neposune její start, takže by při signálu skočila rovnou na konec. Proto
   `none` → nová pojmenovaná animace (ta startuje v okamžiku přidání třídy). */
html.mz-hero-js .mz-hero-foto__ram-cara {
	animation: none;
}

html.mz-hero-js .mz-hero--ram .mz-hero-foto__ram-cara {
	animation:
		mz-hero-ram 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards,
		mz-hero-ram-skryt 0.01s 0.9s forwards;
}

html.mz-hero-js .mz-hero--ram .mz-hero-foto--kresli .mz-hero-foto__kruh {
	animation: mz-hero-pojistka-ram 0.01s 0.9s forwards;
}

@keyframes mz-hero-ram-skryt {
	to {
		opacity: 0;
	}
}

/* Pojistka bez signálu: kdyby skript rámeček nikdy nespustil, border kruhu
   se po 3,5 s prolne zpátky do růžové. Jakmile signál přijde, pravidlo
   přestane platit a kreslí se SVG. */
html.mz-hero-js .mz-hero:not(.mz-hero--ram) .mz-hero-foto--kresli .mz-hero-foto__kruh {
	animation: mz-hero-pojistka-ram 0.3s 3.5s ease-out forwards;
}

@keyframes mz-hero-pojistka-ram {
	to {
		border-color: #f6d9d4;
	}
}

/* Světelné čelo: krátký úsek (6 % obvodu) těsně před koncem kreslené čáry,
   plus širší měkčí „záře“ pod ním. Oba po dokreslení 0,4 s zhasínají.
   ⚠️ Dokud kreslení nezačne, jsou NEVIDITELNÉ (opacity 0): úsek stojí na
   startu nahoře a díky zakulaceným koncům čáry (linecap round) by z něj
   koukal barevný obdélníček ještě před animací - zadavatelka ho hlásila.
   Viditelnost zapíná až první snímek kreslicí animace (from v keyframes),
   zhasínání ji na konci zase sundá. Záře má vlastní sílu přes proměnnou. */
.mz-hero-foto__ram-svetlo,
.mz-hero-foto__ram-zare {
	stroke: var(--wp--preset--color--koralova-syta);
	stroke-linecap: round;
	stroke-dasharray: 6 94;
	stroke-dashoffset: 106;
	opacity: 0;
	--mz-ram-svetlo-op: 1;
	animation:
		mz-hero-svetlo 0.9s 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards,
		mz-hero-zhasnuti 0.4s 1.15s ease-out forwards;
}

html.mz-hero-js .mz-hero-foto__ram-svetlo,
html.mz-hero-js .mz-hero-foto__ram-zare {
	animation: none;
}

html.mz-hero-js .mz-hero--ram .mz-hero-foto__ram-svetlo,
html.mz-hero-js .mz-hero--ram .mz-hero-foto__ram-zare {
	animation:
		mz-hero-svetlo 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards,
		mz-hero-zhasnuti 0.4s 0.9s ease-out forwards; /* kreslení, pak zhasnutí */
}

.mz-hero-foto__ram-zare {
	stroke-width: 18;
	--mz-ram-svetlo-op: 0.28;
}

@keyframes mz-hero-ram {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes mz-hero-svetlo {
	from {
		opacity: var(--mz-ram-svetlo-op, 1);
		stroke-dashoffset: 106;
	}
	to {
		opacity: var(--mz-ram-svetlo-op, 1);
		stroke-dashoffset: 6;
	}
}

@keyframes mz-hero-zhasnuti {
	to {
		opacity: 0;
	}
}

/* --- Vypnutí animací ------------------------------------------------- */

/* Návrat z jiné stránky webu nebo tlačítkem Zpět (třída ze skriptu v <head>) → vše hned. */
html.mz-hero-videno .mz-hero .wp-block-column > p:first-child,
html.mz-hero-videno .mz-hero .mz-hero-claim + p,
html.mz-hero-videno .mz-hero .wp-block-buttons {
	animation: none;
	opacity: 1;
	transform: none;
}

html.mz-hero-videno .mz-hero-foto--kresli .mz-hero-foto__kruh {
	border-color: #f6d9d4;
}

html.mz-hero-videno .mz-hero-foto__ram {
	display: none;
}

/* Systémové „omezit pohyb“ → totéž. */
@media (prefers-reduced-motion: reduce) {
	.mz-hero .wp-block-column > p:first-child,
	.mz-hero .mz-hero-claim + p,
	.mz-hero .wp-block-buttons {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* Písmena claimu schovává jen třída mz-hero-js, kterou skript v <head>
	   při omezeném pohybu vůbec nepřidá - tady není co vypínat. */

	.mz-hero-foto--kresli .mz-hero-foto__kruh {
		border-color: #f6d9d4;
	}

	.mz-hero-foto__ram {
		display: none;
	}
}