/* * ŽIVÁ SCÉNA V BANNERU KATEGORIE (2026-10-16) * ------------------------------------------------------------------ * Styly pro hlavičku kategorie, která má místo jedné ploché fotky SCÉNU * z průhledných vrstev (inc/hlavicka-dekor.php → mz_dekor_scena_html). * Načítá se jen na stránce termu, který scénu má (filemtime verze). * * Co tu je: * A) plátno scény - sedí na pixel tam, kde dřív seděla plochá fotka, * B) nástup vrstev při načtení (každý předmět přijede ze své strany), * C) klidové animace, které běží pořád (girlanda vlaje, měsíc se vznáší, * medvídek dýchá, kočárek péruje), * D) paralaxa při pohybu myši (posun přes CSS proměnné z dekor-scena.js), * E) reakce na najetí / ťuknutí (zatřepání, zhoupnutí, zamávání, zzz, * jízda kočárku s valícími se koly), * F) blikající hvězdičky pod scénou, * G) pády, kutálení a houpání (Hračky), H) Pro maminku, * I) nástup „objeveni“ (vrstva se jen prolne, knoflík pyramidy), * J) kus předmětu vidět jen ve vzduchu (spodní roh zelené kostky). * Kolébání autosedačky podle rychlosti myši tu NENÍ - počítá ho skript * snímek po snímku a zapisuje do vlastnosti `rotate` na vrstvě. * * ⚠️ ROZDĚLENÍ TRANSFORMACÍ, ať se neperou (jedna vlastnost = jeden prvek): * - scéna (.mz-scena) → zoom kategorie přes `transform` (zděděný * z pravidel .mz-vypis-hlavicka__foto ve * style.css) + vycentrování přes `translate`, * - vrstva (.mz-scena__vrstva) → nástup = animace `transform`, * paralaxa = vlastnost `translate`, * kolébání rychlostí myši = vlastnost `rotate`, * - obrázek (.mz-scena__obrazek) → klid i reakce = animace `transform` * (reakce animaci klidu jen dočasně vymění). * Při „omezit pohyb“ (prefers-reduced-motion) se neanimuje nic a scéna je * nehybná jako plochá fotka - všechny animace jsou proto v jednom media dotazu. */ /* ---------- A) Plátno scény ---------- */ /* Obal fotky potřebuje být kotvou pro absolutně umístěné hvězdičky. */ .mz-vypis-hlavicka--scena .mz-vypis-hlavicka__foto-obal { position: relative; } /* Scéna: dědí třídu ploché fotky (zoom 1.25 s těžištěm 50 % 72 %, multiply), ale místo `width:100% + object-fit:cover` je to plátno s PŘESNÝM poměrem 1600:360 vysoké jako sloupec a vycentrované. Je to totéž, co dřív dělal `cover` (sloupec je vždy „nižší" než poměr fotky, takže se fotka vždycky vešla na výšku a ořezaly se jen strany) - jen teď známe souřadnice předmětů v procentech plátna, a můžeme na ně položit reagující plochy. */ .mz-scena { position: relative; display: block; width: auto; height: 100%; aspect-ratio: 1600 / 360; left: 50%; translate: -50% 0; object-fit: initial; } .mz-scena__vrstva { position: absolute; inset: 0; /* Paralaxa: posun dosadí skript do proměnných, bez skriptu je nula. */ translate: var(--mz-px, 0px) var(--mz-py, 0px); transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: translate; } /* Vrstva houpaná rychlostí myši dostává každý snímek nový `rotate` ze skriptu - ať ji má prohlížeč od začátku jako samostatnou vrstvu. */ .mz-scena__vrstva[data-rychlost] { will-change: translate, rotate; } .mz-scena__obrazek { /* Umístěný (relative), aby se kreslil NAD stínem své vrstvy - stín je absolute a prohlížeč umístěné prvky kreslí až po neumístěných, takže obrázek bez position, který se zrovna nehýbe, ležel POD stínem (u Pro maminku tím pod dnem tašek prosvítal šedý pruh). */ position: relative; display: block; width: 100%; height: 100%; /* transform-origin dodává inline styl z manifestu (bod otáčení předmětu). */ } /* Plochy reagující na myš - neviditelné, jen chytají události. */ .mz-scena__oblast { position: absolute; display: block; z-index: 2; } /* ---------- F) Hvězdičky pod scénou ---------- */ .mz-scena-hvezdy { position: absolute; inset: 0; pointer-events: none; } .mz-scena-hvezdy__hvezda { position: absolute; height: auto; opacity: 0.35; translate: -50% -50%; } .mz-scena-hvezdy__hvezda--medova { fill: var(--wp--preset--color--medova); } .mz-scena-hvezdy__hvezda--koralova { fill: var(--wp--preset--color--koralova); } /* ---------- Animace (jen když čtenářka nemá „omezit pohyb") ---------- */ @media (prefers-reduced-motion: no-preference) { /* B) Nástup při načtení: každá vrstva přijede ze své strany, mírně přestřelí a usadí se. Zpoždění roste s pořadím vrstvy (--mz-poradi dodává PHP), takže předměty nastupují jeden po druhém, celkem ~1 s. */ .mz-scena__vrstva { animation: mz-scena-nastup-zdola 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(var(--mz-poradi, 0) * 130ms + 80ms); } .mz-scena__vrstva[data-nastup="shora"] { animation-name: mz-scena-nastup-shora; } .mz-scena__vrstva[data-nastup="zleva"] { animation-name: mz-scena-nastup-zleva; } .mz-scena__vrstva[data-nastup="zprava"] { animation-name: mz-scena-nastup-zprava; } @keyframes mz-scena-nastup-zdola { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes mz-scena-nastup-shora { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } } @keyframes mz-scena-nastup-zleva { from { opacity: 0; transform: translate(-34px, 10px) rotate(-8deg); } to { opacity: 1; transform: none; } } @keyframes mz-scena-nastup-zprava { from { opacity: 0; transform: translate(34px, 8px) rotate(6deg); } to { opacity: 1; transform: none; } } /* C) Klidové animace - pomalé a malé, ať ruší co nejmíň. Začínají po nástupu (zpoždění ~1,2 s), jinak by se předmět hýbal už při příjezdu. */ .mz-scena__obrazek--vlajeni { animation: mz-scena-vlajeni 5s ease-in-out 1.3s infinite; } .mz-scena__obrazek--plavani { animation: mz-scena-plavani 5.5s ease-in-out 1.3s infinite; } .mz-scena__obrazek--dychani { animation: mz-scena-dychani 4s ease-in-out 1.3s infinite; } /* Girlanda: visí na provázku (bod otáčení nahoře), v průvanu se lehce zkosí tam a zpět. */ @keyframes mz-scena-vlajeni { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(1.6deg) translateY(1px); } } /* Měsíc: vznáší se nahoru a dolů a přitom se lehce naklání. */ @keyframes mz-scena-plavani { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-3deg); } } /* Medvídek: dýchá (zvětší se o 1,5 % kolem spodku, kde sedí). */ @keyframes mz-scena-dychani { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, 1.025); } } .mz-scena__obrazek--perovani { animation: mz-scena-perovani 2.8s ease-in-out 1.3s infinite; } /* Kočárek: lehce péruje - korba se o necelé procento „usadí“ k zemi (bod otáčení je na zemi pod kočárkem, takže se hýbe hlavně korba a stříška, kola a spodek stojí). Stejnou animaci má vidlice předního kola, aby s korbou seděla na pixel. */ @keyframes mz-scena-perovani { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.992); } } /* E) Reakce na najetí / ťuknutí: skript dá obrázku třídu je-reakce a data-reakce, tím se klidová animace DOČASNĚ vymění za jednorázovou; po jejím konci (animationend) skript třídu sundá a klid zase běží. Reakce končí v základní poloze, takže navázání nikde neposkočí. Názvy animací MUSÍ začínat „mz-reakce-" - podle toho je skript pozná. */ .mz-scena__obrazek.je-reakce[data-reakce="zatrepani"] { animation: mz-reakce-zatrepani 1.1s ease-in-out both; } .mz-scena__obrazek.je-reakce[data-reakce="houpnuti"] { animation: mz-reakce-houpnuti 1.8s ease-in-out both; } .mz-scena__obrazek.je-reakce[data-reakce="zamavani"] { animation: mz-reakce-zamavani 1s ease-in-out both; } .mz-scena__obrazek.je-reakce[data-reakce="zzz"] { animation: mz-reakce-zzz 1.6s ease-in-out both; } /* Girlanda se zatřepe jako po lusknutí do provázku. */ @keyframes mz-reakce-zatrepani { 0% { transform: skewX(0deg); } 20% { transform: skewX(5deg) translateY(3px); } 40% { transform: skewX(-4deg) translateY(1px); } 60% { transform: skewX(3deg); } 80% { transform: skewX(-1.5deg); } 100% { transform: skewX(0deg); } } /* Postýlka se zhoupne kolem nožiček a dokývá. */ @keyframes mz-reakce-houpnuti { 0% { transform: rotate(0deg); } 20% { transform: rotate(-2.6deg); } 45% { transform: rotate(2.2deg); } 70% { transform: rotate(-1.2deg); } 88% { transform: rotate(0.5deg); } 100% { transform: rotate(0deg); } } /* Medvídek zamává - zakývá se ze strany na stranu a trochu nadskočí. */ @keyframes mz-reakce-zamavani { 0% { transform: rotate(0deg) translateY(0); } 15% { transform: rotate(-7deg) translateY(-4px); } 35% { transform: rotate(8deg) translateY(-5px); } 55% { transform: rotate(-6deg) translateY(-3px); } 75% { transform: rotate(4deg) translateY(-1px); } 100% { transform: rotate(0deg) translateY(0); } } /* Měsíc si při zzz blaženě pohoupe. */ @keyframes mz-reakce-zzz { 0% { transform: rotate(0deg); } 30% { transform: rotate(-6deg) translateY(-3px); } 65% { transform: rotate(3deg) translateY(-1px); } 100% { transform: rotate(0deg); } } /* Kočárek popojede doprava a plynule se vrátí. Reakci dostanou NARAZ všechny vrstvy skupiny (korba, obě kola, vidlice), proto mají stejnou délku, stejné klíčové snímky a stejné zrychlení - posun je tak v každém okamžiku stejný a kola se od korby neodtrhnou. Vzdálenost --mz-jizda (% šířky plátna) dává PHP na scénu podle manifestu. Jízda je jedna hladká křivka tam a zpátky bez zastávky (easeInOutSine, obrat v 48 %), korba se jen po návratu lehce usadí (scaleY kolem bodu na zemi). ⚠️ Časování platí pro KAŽDÝ úsek mezi klíčovými snímky zvlášť, takže v obratu je rychlost nulová a nikde nic neškubne. */ .mz-scena__obrazek.je-reakce[data-reakce="jizda"] { animation: mz-reakce-jizda 3s cubic-bezier(0.37, 0, 0.63, 1) both; } @keyframes mz-reakce-jizda { 0% { transform: translateX(0) scaleY(1); } 48% { transform: translateX(var(--mz-jizda, 2.5%)) scaleY(1); } 92% { transform: translateX(0) scaleY(1); } 96% { transform: translateX(0) scaleY(0.99); } 100% { transform: translateX(0) scaleY(1); } } /* Kola: stejný posun a k tomu otočení o úhel, který odpovídá ujeté dráze (--mz-kolo-uhel = dráha / poloměr, spočítá PHP pro každé kolo zvlášť - menší kolo se otočí víc). Doprava se kolo točí po směru hodinových ručiček, cestou zpátky proti, takže se valí a neklouže. Bod otáčení = střed kola (transform-origin z manifestu). Klíčové snímky posunu (0 / 48 / 92 %) jsou stejné jako u korby. */ .mz-scena__obrazek--kolo.je-reakce[data-reakce="jizda"] { animation-name: mz-reakce-jizda-kolo; } @keyframes mz-reakce-jizda-kolo { 0% { transform: translateX(0) rotate(0deg); } 48% { transform: translateX(var(--mz-jizda, 2.5%)) rotate(var(--mz-kolo-uhel, 0deg)); } 92% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(0) rotate(0deg); } } /* Kola nemají klidovou animaci, takže by je prohlížeč začal kreslit jako samostatnou vrstvu až v první chvíli jízdy - a ten první snímek by škubl. Takhle jsou připravená předem. */ .mz-scena__obrazek--kolo { will-change: transform; } /* Písmenka „z", která skript vypustí z měsíce: stoupají, rostou a mizí. Barva antracit se díky multiply na scéně jemně propíše do pozadí. Každé písmenko letí jinam - cíl (--mz-zzz-dx / --mz-zzz-dy) a délku letu mu dá skript, první zůstane nejníž, třetí vystoupá nejvýš, aby se nenaplácala na sebe. */ .mz-scena__zzz { position: absolute; z-index: 1; font-family: var(--wp--preset--font-family--text, sans-serif); font-weight: 800; line-height: 1; color: var(--wp--preset--color--antracit); opacity: 0; pointer-events: none; animation: mz-scena-zzz-let 1.7s ease-out both; } @keyframes mz-scena-zzz-let { 0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(-10deg); } 20% { opacity: 0.85; } 100% { opacity: 0; transform: translate(var(--mz-zzz-dx, 14px), var(--mz-zzz-dy, -46px)) scale(1.15) rotate(12deg); } } /* F) Hvězdičky se střídavě rozsvěcují (každá s jiným zpožděním z PHP). */ .mz-scena-hvezdy__hvezda { animation: mz-scena-hvezda 3.6s ease-in-out infinite; } @keyframes mz-scena-hvezda { 0%, 100% { opacity: 0.18; scale: 0.7; } 50% { opacity: 0.75; scale: 1.08; } } } /* Na mobilu je scéna v pruhu vysokém 180 px přes celou šířku; paralaxa neběží (není myš), ťuknutí na předmět reakci spustí. Nástup a klid platí. */ @media (max-width: 600px) { .mz-scena-hvezdy__hvezda { scale: 0.8; } } /* ================================================================== * G) PŘEDMĚTY, KTERÉ SE KUTÁLÍ, PADAJÍ A HOUPOU (2026-10-16, Hračky) * ------------------------------------------------------------------ * Pro scény s pohybem víc než jen „přijede a usadí se" (Hračky: koník * se přihoupe, kroužky napadají na tyčku, kostka se překulí, míček se * přikutálí). Klíče manifestu a co z nich PHP udělá (mz_dekor_scena_html): * zpozdeni / trvani → --mz-zpozdeni / --mz-trvani na vrstvě (ms); bez nich * platí dřívější výchozí poradi × 130 ms + 80 ms a 0,9 s, * draha → --mz-draha (odkud předmět přijede, % šířky plátna), * prumer + draha → --mz-otoceni (o kolik se při kutálení otočí: dráha / * poloměr, takže se valí a neklouže), * uhel → --mz-uhel (pootočení na začátku nástupu), * dopad / puvod → --mz-dopad (bod, kolem kterého se při pádu stlačí), * stin → ve vrstvě PŘED předmětem. * Předmět, který se při nástupu otáčí, je zabalený v .mz-scena__predmet: * nástupní otočení jde přes vlastnost `rotate` na obalu, takže se nepere * s klidem a reakcemi obrázku (`transform`) ani s posunem vrstvy. Stín * stojí mimo obal - posune se s vrstvou, ale netočí se. * ================================================================== */ /* Stín na podlaze a obal předmětu leží přes celé plátno jako vrstva. Obrázek předmětu je vůči stínu „nahoře" (oba jsou umístěné, rozhoduje pořadí v HTML: stín je první). */ .mz-scena__stin, .mz-scena__predmet { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .mz-scena__predmet { transform-origin: var(--mz-puvod, 50% 50%); } .mz-scena__stin { transform-origin: var(--mz-dopad, 50% 90%); } /* Výchozí čas nástupu pro všechny animace vrstvy i jejích dětí (stín, obal předmětu): z manifestu, jinak dřívější poradi × 130 ms + 80 ms a 0,9 s. */ .mz-scena__vrstva { --mz-start: var(--mz-zpozdeni, calc(var(--mz-poradi, 0) * 130ms + 80ms)); --mz-delka: var(--mz-trvani, 0.9s); } @media (prefers-reduced-motion: no-preference) { /* Čas nástupu z manifestu (jinak dřívější výchozí hodnoty). */ .mz-scena__vrstva { animation-delay: var(--mz-start); animation-duration: var(--mz-delka); } /* ---------- Nástup „pad": předmět spadne shora, při dopadu se krátce stlačí kolem bodu dopadu (--mz-dopad) a odskočí. 0-60 % pád (zrychluje jako při volném pádu), 60 % DOPAD, 60-72 % stlačení, 72-86 % malý odskok, 86-100 % usazení. ---------- */ .mz-scena__vrstva[data-nastup="pad"] { animation-name: mz-scena-nastup-pad; animation-timing-function: linear; transform-origin: var(--mz-dopad, 50% 90%); } @keyframes mz-scena-nastup-pad { 0% { opacity: 0; transform: translateY(-30%) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } 15% { opacity: 1; } 60% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(0, 0, 0.3, 1); } 72% { transform: translateY(0) scale(1.03, 0.94); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 86% { transform: translateY(-1.2%) scale(0.99, 1.01); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } 100% { opacity: 1; transform: translateY(0) scale(1, 1); } } /* Stín padajícího předmětu nepadá s ním: posouvá se přesně opačně než vrstva (stejné klíčové snímky i zrychlení, takže zůstává na zemi) a jak se předmět blíží, rozsvítí se a doroste. */ .mz-scena__vrstva[data-nastup="pad"] > .mz-scena__stin { animation: mz-scena-pad-stin var(--mz-delka) linear var(--mz-start) both; } @keyframes mz-scena-pad-stin { 0% { opacity: 0; transform: translateY(30%) scale(0.6); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } 60% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0, 0, 0.3, 1); } 72% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 86% { transform: translateY(1.2%) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Pád s pootočením (horní kostka): obal se z --mz-uhel dotočí do klidu přesně v okamžiku dopadu. */ .mz-scena__vrstva[data-nastup="pad"] > .mz-scena__predmet { animation: mz-scena-pad-otoceni var(--mz-delka) linear var(--mz-start) both; } @keyframes mz-scena-pad-otoceni { 0% { rotate: var(--mz-uhel, 0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); } 60% { rotate: 0deg; } 100% { rotate: 0deg; } } /* ---------- Posun z boku (převrácení, přikutálení, připlutí): vrstva přijede z --mz-draha (% šířky plátna), předmět se při tom v obalu otáčí. ---------- */ .mz-scena__vrstva[data-nastup="prevraceni"], .mz-scena__vrstva[data-nastup="prikutaleni"], .mz-scena__vrstva[data-nastup="priplavani"] { animation-name: mz-scena-nastup-z-boku; animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); } @keyframes mz-scena-nastup-z-boku { 0% { opacity: 0; transform: translateX(var(--mz-draha, 0%)); } 12% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } /* Převrácení (spodní kostka): překlopí se o 90° přes spodní hranu (bod otáčení = levá dolní hrana, puvod) a po dopadu se zhoupne zpět. */ .mz-scena__vrstva[data-nastup="prevraceni"] { animation-name: mz-scena-nastup-prevraceni; } @keyframes mz-scena-nastup-prevraceni { 0% { opacity: 0; transform: translateX(var(--mz-draha, 0%)); } 12% { opacity: 1; } 70% { transform: translateX(0); } 100% { opacity: 1; transform: translateX(0); } } .mz-scena__vrstva[data-nastup="prevraceni"] > .mz-scena__predmet { animation: mz-scena-prevraceni var(--mz-delka) linear var(--mz-start) both; } @keyframes mz-scena-prevraceni { 0% { rotate: var(--mz-uhel, -90deg); animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); } 70% { rotate: 0deg; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); } 82% { rotate: -4deg; animation-timing-function: cubic-bezier(0.6, 0, 1, 1); } 92% { rotate: 0deg; animation-timing-function: ease-out; } 96% { rotate: -1deg; animation-timing-function: ease-in; } 100% { rotate: 0deg; } } /* Přikutálení (míček): otočení o --mz-otoceni (dráha / poloměr) ve STEJNÉM čase a se STEJNÝM zrychlením jako posun vrstvy - poměr posunu a otočení je tak v každém okamžiku stejný a míček se valí, neklouže. Zprava doleva = proti směru hodinových ručiček. */ .mz-scena__vrstva[data-nastup="prikutaleni"] > .mz-scena__predmet { animation: mz-scena-prikutaleni var(--mz-delka) cubic-bezier(0.25, 0.6, 0.3, 1) var(--mz-start) both; } @keyframes mz-scena-prikutaleni { from { rotate: var(--mz-otoceni, 0deg); } to { rotate: 0deg; } } /* Připlutí (kachnička): cestou se pohupuje jako na vlnách. */ .mz-scena__vrstva[data-nastup="priplavani"] > .mz-scena__predmet { animation: mz-scena-priplavani var(--mz-delka) ease-in-out var(--mz-start) both; } @keyframes mz-scena-priplavani { 0% { rotate: 7deg; } 28% { rotate: -6deg; } 52% { rotate: 4deg; } 76% { rotate: -2deg; } 100% { rotate: 0deg; } } /* Přihoupání (koník): vrstva se jen objeví a kousek popojede, obal s koníkem přitom dokývá z rozhoupání do klidu kolem místa, kde se houpačka dotýká země (puvod). */ .mz-scena__vrstva[data-nastup="prihoupani"] { animation-name: mz-scena-nastup-prihoupani; animation-timing-function: ease-out; } @keyframes mz-scena-nastup-prihoupani { 0% { opacity: 0; transform: translateX(-1.5%); } 25% { opacity: 1; } 45% { transform: translateX(0); } 100% { opacity: 1; transform: translateX(0); } } .mz-scena__vrstva[data-nastup="prihoupani"] > .mz-scena__predmet { animation: mz-scena-prihoupani var(--mz-delka) ease-in-out var(--mz-start) both; } @keyframes mz-scena-prihoupani { 0% { rotate: -9deg; } 18% { rotate: 8deg; } 38% { rotate: -6deg; } 58% { rotate: 3.5deg; } 78% { rotate: -1.5deg; } 100% { rotate: 0deg; } } /* ---------- Klid: koník se pomalu houpe, kachnička se pohupuje. Začíná po skončení nástupu (--mz-klid-od dává PHP = zpoždění + trvání nástupu). Úsek kolem nuly je nejrychlejší, v krajních polohách se zpomalí (jako kyvadlo), smyčka nikde neškubne. ---------- */ .mz-scena__obrazek--kolebani { animation: mz-scena-kolebani 4.6s linear var(--mz-klid-od, 1.3s) infinite; } @keyframes mz-scena-kolebani { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); } 25% { transform: rotate(3deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 75% { transform: rotate(-3deg); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); } 100% { transform: rotate(0deg); } } .mz-scena__obrazek--pohupovani { animation: mz-scena-pohupovani 3.2s linear var(--mz-klid-od, 1.3s) infinite; } @keyframes mz-scena-pohupovani { 0% { transform: rotate(0deg) translateY(0); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); } 25% { transform: rotate(2.5deg) translateY(-0.4%); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 75% { transform: rotate(-2.5deg) translateY(0.2%); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); } 100% { transform: rotate(0deg) translateY(0); } } /* Po reakci klid naváže hned, bez úvodního zpoždění (třídu po-reakci dá skript obrázku, když reakce doběhne). Reakce i klid začínají i končí v nule, takže se nic neškubne. */ .mz-scena__obrazek--kolebani.po-reakci, .mz-scena__obrazek--pohupovani.po-reakci { animation-delay: 0s; } /* ---------- Reakce Hraček ---------- */ /* Koník se rozhoupe víc (8°) a za ~2 s dokývá zpět do klidu. Začíná z úhlu, ve kterém ho myš zastihla (--mz-uhel-od dosadí skript), takže z klidového houpání neposkočí. */ .mz-scena__obrazek.je-reakce[data-reakce="rozhoupani"] { animation: mz-reakce-rozhoupani 2.2s ease-in-out both; } @keyframes mz-reakce-rozhoupani { 0% { transform: rotate(var(--mz-uhel-od, 0deg)); } 12% { transform: rotate(8deg); } 30% { transform: rotate(-7deg); } 47% { transform: rotate(5deg); } 63% { transform: rotate(-3.5deg); } 78% { transform: rotate(2deg); } 90% { transform: rotate(-0.8deg); } 100% { transform: rotate(0deg); } } /* Stín houpacího koníka se houpe S NÍM (2026-10-17, přání zadavatelky). Ležel na podlaze, takže když se špička houpačky zvedla, stín pod ní zůstal na místě a bylo to vidět. Stín proto dostane přesně tytéž animace jako koník, kolem téhož bodu (--mz-puvod = dotyk houpačky se zemí): nástup (vlastnost rotate), klid (transform, stejný začátek --mz-klid-od dává PHP) a reakci (stejný počáteční úhel --mz-uhel-od dává skript). Stín je jiný prvek než obal a obrázek koníka, takže nástup a klid musí jít jedním seznamem animací (dvě pravidla by se přepsala) - jedna mění rotate, druhá transform, úhly se sečtou stejně jako u obalu s obrázkem. Pořadí pravidel je důležité: po-reakci a reakce stojí ZA nástupem (stejná specificita). */ .mz-scena__vrstva[data-nastup="prihoupani"] > .mz-scena__stin, .mz-scena__stin--kolebani { transform-origin: var(--mz-puvod, 50% 90%); } .mz-scena__vrstva[data-nastup="prihoupani"] > .mz-scena__stin { animation: mz-scena-prihoupani var(--mz-delka) ease-in-out var(--mz-start) both; } .mz-scena__stin--kolebani { animation: mz-scena-kolebani 4.6s linear var(--mz-klid-od, 1.3s) infinite; } .mz-scena__vrstva[data-nastup="prihoupani"] > .mz-scena__stin--kolebani { animation: mz-scena-prihoupani var(--mz-delka) ease-in-out var(--mz-start) both, mz-scena-kolebani 4.6s linear var(--mz-klid-od, 1.3s) infinite; } /* Po reakci jen klid od nuly (nástup se nesmí přehrát znovu). */ .mz-scena__vrstva > .mz-scena__stin--kolebani.po-reakci { animation: mz-scena-kolebani 4.6s linear 0s infinite; } .mz-scena__vrstva > .mz-scena__stin.je-reakce[data-reakce="rozhoupani"] { animation: mz-reakce-rozhoupani 2.2s ease-in-out both; } /* Míček popojede doprava a vrátí se. Otočení odpovídá ujeté dráze (--mz-popojeti-uhel = dráha / poloměr), tam po směru hodinových ručiček, zpátky proti - valí se. Stín jede s ním (bez otočení). */ .mz-scena__obrazek.je-reakce[data-reakce="popojeti"] { animation: mz-reakce-popojeti 1.3s linear both; } @keyframes mz-reakce-popojeti { 0% { transform: translateX(0) rotate(0deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 45% { transform: translateX(var(--mz-popojeti, 1%)) rotate(var(--mz-popojeti-uhel, 0deg)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 100% { transform: translateX(0) rotate(0deg); } } .mz-scena__stin.je-reakce[data-reakce="popojeti"] { animation: mz-reakce-popojeti-stin 1.3s linear both; } @keyframes mz-reakce-popojeti-stin { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 45% { transform: translateX(var(--mz-popojeti, 1%)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 100% { transform: translateX(0); } } /* Kachnička se zakolébá (kolem spodku, puvod). Do 2026-10-17 se reakce jmenovala „kvak" a skript k ní vypouštěl bublinu s textem „kvák" - zadavatelka ho nechtěla, takže zůstal jen pohyb. */ .mz-scena__obrazek.je-reakce[data-reakce="zakolebani"] { animation: mz-reakce-zakolebani 1s ease-in-out both; } @keyframes mz-reakce-zakolebani { 0% { transform: rotate(var(--mz-uhel-od, 0deg)); } 15% { transform: rotate(-9deg) translateY(-1%); } 35% { transform: rotate(7deg); } 55% { transform: rotate(-4.5deg); } 75% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } } /* Kroužky pyramidy poskočí jeden po druhém odspodu nahoru (vlnu řídí skript - každému kroužku přidá třídu o kousek později). */ .mz-scena__obrazek.je-reakce[data-reakce="poskoceni"] { animation: mz-reakce-poskoceni 0.5s linear both; } @keyframes mz-reakce-poskoceni { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 40% { transform: translateY(-2.2%); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 70% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-0.4%); animation-timing-function: ease-in; } 100% { transform: translateY(0); } } /* Horní kostka nadskočí, ve vzduchu se pootočí a dosedne ROVNĚ (66 %), pak se stejně jako při úvodu (nástup „pad“) stlačí a malinko odskočí. Do 2026-10-17 dosedala natočená o 15° a půl vteřiny se srovnávala - kontaktní stín pod ní je ale kus fotky a leží rovně, takže s natočenou kostkou neseděl a „objevil se“ až po srovnání (zadavatelka: při prvním pádu je to přesně, po kliknutí ne). */ .mz-scena__obrazek.je-reakce[data-reakce="nadskoceni"] { animation: mz-reakce-nadskoceni 0.8s linear both; } @keyframes mz-reakce-nadskoceni { 0% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 36% { transform: translateY(-5%) rotate(8deg) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } 66% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(0, 0, 0.3, 1); } 74% { transform: translateY(0) rotate(0deg) scale(1.03, 0.94); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 88% { transform: translateY(-1.2%) rotate(0deg) scale(0.99, 1.01); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } 100% { transform: translateY(0) rotate(0deg) scale(1, 1); } } /* Kontaktní stín pod horní kostkou při nadskočení: jako při úvodu - když kostka vyletí, zeslábne a zmenší se k místu dopadu, při dopadu je zpátky celý (66 %) a stlačí se spolu s kostkou. Při odskoku zůstane ležet (kostka se od něj o kousek zvedne). Červená plocha pod ním je v řezu domalovaná, takže tam při zeslábnutí není díra. */ .mz-scena__stin.je-reakce[data-reakce="nadskoceni"] { animation: mz-reakce-nadskoceni-stin 0.8s linear both; } @keyframes mz-reakce-nadskoceni-stin { 0% { opacity: 1; transform: scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 36% { opacity: 0.3; transform: scale(0.75, 0.75); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } 66% { opacity: 1; transform: scale(1, 1); animation-timing-function: cubic-bezier(0, 0, 0.3, 1); } 74% { opacity: 1; transform: scale(1.03, 0.94); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 88% { opacity: 1; transform: scale(0.99, 1.01); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } 100% { opacity: 1; transform: scale(1, 1); } } } /* ================================================================== * H) PRO MAMINKU (2026-10-16): taška s popruhem, taštička, komínek * ------------------------------------------------------------------ * Nástup „pad" (všechno spadne shora a dosedne se stlačením) a stín, který * při pádu i poskoku zůstává na zemi, jsou ze sekce G. Tady je navíc: * klid kyv-popruhu → popruh se po dopadu tašky rozkývá kolem bodu * „osa" (pod přezkou) a pak se jen nepatrně pohupuje, * reakce nadzvednuti → taška i s popruhem se za ucha natáhne nahoru * a dosedne; z jejího srdíčka vyletí srdíčka (skript), * poskok → taštička dvakrát poskočí, její stín zůstane na * zemi, malinko se zmenší a při pádu doroste, * kopnuti → bačkůrky zakopou, * srdíčka (.mz-scena__srdicko), která vypustí skript - jednou při úvodu, * hned jak taška dosedne, a pak při každé reakci tašky. * KYV KOLEM OSY: obrázek popruhu má bod otáčení na dně tašky (stejný jako * taška, aby s ní při nadzvednutí seděl na pixel), proto je otočení kolem * osy zapsané jako posun k ose, otočení a posun zpět. --mz-osa-x / -y = * osa minus bod otáčení v % plátna (dodává PHP z manifestu). * ================================================================== */ /* Srdíčko: korálové s krémovým obrysem jako srdíčko na tašce (holé korálové by na růžové tašce zaniklo). Viditelné jen s animací níž. */ .mz-scena__srdicko { position: absolute; z-index: 1; display: block; color: var(--wp--preset--color--koralova-syta); opacity: 0; pointer-events: none; translate: -50% -50%; } .mz-scena__srdicko svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; stroke: var(--wp--preset--color--kremova); stroke-width: 2.4; stroke-linejoin: round; paint-order: stroke; } @media (prefers-reduced-motion: no-preference) { /* Popruh: první kyv začne v okamžiku dopadu tašky (60 % jejího pádu), doznívá 1,4 s a pak přejde v pomalé pohupování. */ .mz-scena__obrazek--kyv-popruhu { --mz-popruh-dopad: calc(var(--mz-zpozdeni, 0ms) + var(--mz-trvani, 900ms) * 0.6); animation: mz-scena-kyv-popruhu-dopad 1.4s ease-out var(--mz-popruh-dopad) backwards, mz-scena-kyv-popruhu 6.5s ease-in-out calc(var(--mz-popruh-dopad) + 1.4s) infinite; } /* Po reakci (třídu dá skript) už jen tiché pohupování, dopad se neopakuje. */ .mz-scena__obrazek--kyv-popruhu.po-reakci { animation: mz-scena-kyv-popruhu 6.5s ease-in-out infinite; } @keyframes mz-scena-kyv-popruhu-dopad { 0% { transform: none; } 18% { transform: translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(1.7deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 42% { transform: translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-1.1deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 64% { transform: translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0.6deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 84% { transform: translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-0.25deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 100% { transform: none; } } @keyframes mz-scena-kyv-popruhu { 0%, 100% { transform: none; } 25% { transform: translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0.45deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 75% { transform: translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-0.45deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } } /* Velká taška se nadzvedne za ucha: natáhne se nahoru (dno zůstává na zemi, bod otáčení = dno) a dosedne se stlačením. Reakci dostane celá skupina naráz (taška i popruh). */ .mz-scena__obrazek.je-reakce[data-reakce="nadzvednuti"] { animation: mz-reakce-nadzvednuti 1.1s ease-in-out both; } @keyframes mz-reakce-nadzvednuti { 0% { transform: none; } 22% { transform: scale(0.985, 1.055); } 40% { transform: scale(0.995, 1.03); } 56% { transform: scale(1.025, 0.955); } 72% { transform: scale(0.995, 1.012); } 86% { transform: scale(1.004, 0.996); } 100% { transform: none; } } /* Stín velké tašky při natažení malinko zesvětlá, při dosednutí ztmavne. */ .mz-scena__stin.je-reakce[data-reakce="nadzvednuti"] { animation: mz-reakce-nadzvednuti-stin 1.1s ease-in-out both; } @keyframes mz-reakce-nadzvednuti-stin { 0% { opacity: 1; } 22% { opacity: 0.7; } 40% { opacity: 0.85; } 56% { opacity: 1; } 100% { opacity: 1; } } /* Stín taštičky na velké tašce: taška začne padat čistá, po 0,11 s pádu se objeví a během pádu zůstává světlý; plně ztmavne až v okamžiku dopadu (60 % nástupu). Po první reakci už jen zůstává, nástup se nepřehrává. */ .mz-scena[data-scena="pro-maminku"] .mz-scena__obrazek[src*="velka-taska-zastineni"]:not(.je-reakce):not(.po-reakci) { animation: mz-maminku-zastineni var(--mz-delka) linear var(--mz-start) both; } @keyframes mz-maminku-zastineni { 0%, 15% { opacity: 0; } 52% { opacity: 0.2; animation-timing-function: ease-in-out; } 68%, 100% { opacity: 1; } } /* Popruh dostane přesně stejné natažení (sedí s taškou na pixel) a k tomu se při dosednutí zakývá kolem své osy. */ .mz-scena__obrazek--kyv-popruhu.je-reakce[data-reakce="nadzvednuti"] { animation-name: mz-reakce-nadzvednuti-popruh; } @keyframes mz-reakce-nadzvednuti-popruh { 0% { transform: none; } 22% { transform: scale(0.985, 1.055) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-0.6deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 40% { transform: scale(0.995, 1.03) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0.4deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 56% { transform: scale(1.025, 0.955) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(1.4deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 72% { transform: scale(0.995, 1.012) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-0.9deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 86% { transform: scale(1.004, 0.996) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0.35deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 100% { transform: none; } } /* Malá taštička poskočí dvakrát s útlumem: přikrčí se, vyskočí, dopadne se stlačením, menší skok, usadí se. Bod otáčení = střed dna. */ .mz-scena__obrazek.je-reakce[data-reakce="poskok"] { animation: mz-reakce-poskok 1.15s linear both; } @keyframes mz-reakce-poskok { 0% { transform: none; animation-timing-function: ease-out; } 10% { transform: scale(1.04, 0.95); animation-timing-function: ease-out; } 32% { transform: translateY(-4.5%) scale(0.98, 1.03); animation-timing-function: ease-in; } 50% { transform: translateY(0) scale(1.05, 0.93); animation-timing-function: ease-out; } 62% { transform: translateY(-1.6%) scale(0.99, 1.01); animation-timing-function: ease-in; } 74% { transform: translateY(0) scale(1.025, 0.965); animation-timing-function: ease-out; } 86% { transform: scale(0.995, 1.005); animation-timing-function: ease-in-out; } 100% { transform: none; } } /* Její stín zůstane na zemi: když taštička vyskočí, malinko se zmenší a zesvětlá, a už během pádu zase doroste (stejná délka i časy jako poskok, ease-in jako pád taštičky); při dopadu se s ní nepatrně rozšíří. Bod změny velikosti = střed dna taštičky (--mz-dopad). Zmenšení je jen malé a jde to díky měkkým okrajům stínů (skript řezu, 2026-10-17): dřív měl zmenšený stín kolem sebe světlou obrysovou čáru holé podlahy, teď se okraj prolíná do bílé a spoj se stínem velké tašky je prolnutý. Pravidlo stojí ZA nástupem stínu ze sekce G (stejná specificita), takže ho po dobu reakce přebije. */ .mz-scena__stin.je-reakce[data-reakce="poskok"] { animation: mz-reakce-stin-poskok 1.15s linear both; } /* U Pro maminku se stín taštičky zmenšuje k LEVÉMU konci (x 872 = 54,5 % plátna), ne ke středu taštičky: vlevo navazuje na stín velké tašky, takže kdyby se posunul doprava, otevřel by se na spoji bílý proužek. Zmenší se tak hlavně pravý konec, který se ztrácí do bílé. Svisle zůstává bod u dna taštičky. */ .mz-scena[data-scena="pro-maminku"] .mz-scena__stin.je-reakce[data-reakce="poskok"] { transform-origin: 54.5% 84.4%; } @keyframes mz-reakce-stin-poskok { 0% { opacity: 1; transform: none; animation-timing-function: ease-out; } 10% { opacity: 1; transform: scale(1.02, 1); animation-timing-function: ease-out; } 32% { opacity: 0.55; transform: scale(0.9, 0.92); animation-timing-function: ease-in; } 50% { opacity: 1; transform: scale(1.03, 1); animation-timing-function: ease-out; } 62% { opacity: 0.8; transform: scale(0.96, 0.97); animation-timing-function: ease-in; } 74% { opacity: 1; transform: scale(1.015, 1); animation-timing-function: ease-out; } 86% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } /* Po reakci se nástup stínu NESMÍ přehrát znovu (vrácená animace by začala od začátku a stín by znovu „dopadal"). Skript dá stínu po reakci třídu po-reakci; konec nástupu je klidová poloha, takže „žádná animace" vypadá stejně. */ .mz-scena__vrstva[data-nastup="pad"] > .mz-scena__stin.po-reakci { animation: none; } /* Bačkůrky zakopou: zhoupnou se na jednu a na druhou stranu kolem středu podrážek a pokaždé lehce nadskočí, ať se nezabořují do látky. */ .mz-scena__obrazek.je-reakce[data-reakce="kopnuti"] { animation: mz-reakce-kopnuti 1s ease-in-out both; } @keyframes mz-reakce-kopnuti { 0% { transform: none; } 16% { transform: translateY(-1.2%) rotate(-5deg); } 32% { transform: translateY(0) rotate(0deg); } 48% { transform: translateY(-1%) rotate(4deg); } 64% { transform: translateY(0) rotate(0deg); } 78% { transform: translateY(-0.4%) rotate(-1.5deg); } 100% { transform: none; } } /* Stín bačkůrek na ručníku (backurky-stin.png = měkká skvrna bez tvaru, 2026-11-03): když botičky vyskočí, zesvětlá, a jak padají, zase ztmavne (stejné časy jako mz-reakce-kopnuti, při dopadu je plný). Při úvodu stín NEzůstává na zemi jako u taštičky: leží na ručníku, který padá spolu s botičkami, takže padá s vrstvou bez vlastní animace (ani při reakci nesmí naskočit nástup „pad“ stínu). Jiný stín na ručníku scéna nemá, proto výběr podle souboru. */ .mz-scena__vrstva[data-nastup="pad"] > .mz-scena__stin[src*="backurky-stin"] { animation: none; } .mz-scena__vrstva[data-nastup="pad"] > .mz-scena__stin[src*="backurky-stin"].je-reakce { animation: mz-reakce-kopnuti-stin 1s ease-in-out both; } @keyframes mz-reakce-kopnuti-stin { 0% { opacity: 1; } 16% { opacity: 0.45; } 32% { opacity: 1; } 48% { opacity: 0.5; } 64% { opacity: 1; } 78% { opacity: 0.75; } 100% { opacity: 1; } } /* Srdíčka z tašky: vyskočí ze srdíčka na tašce, rozletí se vějířem nahoru (cíl --mz-srdce-dx / -dy a natočení dává skript každému jinak, ať se nepřekrývají) a zmizí. */ .mz-scena__srdicko { animation: mz-scena-srdicko-let 1.4s cubic-bezier(0.22, 0.8, 0.4, 1) both; } @keyframes mz-scena-srdicko-let { 0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(var(--mz-srdce-r0, 0deg)); } 16% { opacity: 1; transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.15), calc(var(--mz-srdce-dy, -40px) * 0.15)) scale(1) rotate(var(--mz-srdce-r0, 0deg)); } 70% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--mz-srdce-dx, 0px), var(--mz-srdce-dy, -40px)) scale(0.8) rotate(var(--mz-srdce-r1, 0deg)); } } } /* ================================================================== * I) NÁSTUP „OBJEVENI" (2026-10-17, Hračky): vrstva se nikam nepohne, * jen je do svého času neviditelná a pak se krátce prolne. * * K čemu: knoflík na vrcholu tyčky pyramidy je o kousek širší než tyčka * a u paty má korálový nádech od kroužku. Když byl vidět už při padání * kroužků, vypadal vršek tyčky jako „špička“ (nahlásila zadavatelka). * Knoflík má proto vlastní vrstvu a ukáže se až ve chvíli, kdy poslední * (korálový) kroužek dosedne; do té doby je vidět jen rovná tyčka, kterou * má podstavec domalovanou pod knoflíkem. Čas a délku prolnutí dává * manifest (zpozdeni / trvani → --mz-start / --mz-delka, sekce G), knoflík * se pak hýbe jen paralaxou jako podstavec a kroužky. * ================================================================== */ @media (prefers-reduced-motion: no-preference) { .mz-scena__vrstva[data-nastup="objeveni"] { animation-name: mz-scena-nastup-objeveni; animation-timing-function: ease-out; } @keyframes mz-scena-nastup-objeveni { from { opacity: 0; } to { opacity: 1; } } } /* ================================================================== * J) KUS PŘEDMĚTU JEN VE VZDUCHU (2026-10-17, Hračky): vrstva s klíčem * manifestu `jen_ve_vzduchu` (třída mz-scena__vrstva--ve-vzduchu). * * Zelená kostka stojí na fotce na rohu na červené kostce, takže její * spodní špička je zabořená v kontaktním stínu a ve vrstvě končí rovně * useknutá. Ve vzduchu jí „chyběl kousek úplně dole“ (nahlásila * zadavatelka). Domyšlený spodní roh je zvláštní vrstva ve SKUPINĚ * s kostkou (letí s ní na pixel stejně): v klidu je schovaná - stojící * kostka tak zůstane přesně jako na fotce - a ukáže se jen během pádu * při úvodu (do dopadu, tedy 60 % nástupu „pad“) a během nadskočení * (od odlepení do dopadu, 3-65 % reakce). Při „omezit pohyb“ zůstane * schovaná, kostka tam stojí. * ================================================================== */ .mz-scena__vrstva--ve-vzduchu .mz-scena__obrazek { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .mz-scena__vrstva--ve-vzduchu[data-nastup="pad"] .mz-scena__obrazek { animation: mz-scena-ve-vzduchu-pad var(--mz-delka) linear var(--mz-start) both; } /* Po reakci se viditelnost z nástupu NESMÍ přehrát znovu. */ .mz-scena__vrstva--ve-vzduchu .mz-scena__obrazek.po-reakci { animation: none; } /* Stejný pohyb jako kostka (mz-reakce-nadskoceni, sekce G) a navíc viditelnost jen ve vzduchu. Obě animace trvají stejně, konec reakce pozná skript podle té první (název začíná mz-reakce-). */ .mz-scena__vrstva--ve-vzduchu .mz-scena__obrazek.je-reakce[data-reakce="nadskoceni"] { animation: mz-reakce-nadskoceni 0.8s linear both, mz-scena-ve-vzduchu-nadskoceni 0.8s linear both; } @keyframes mz-scena-ve-vzduchu-pad { 0%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } } @keyframes mz-scena-ve-vzduchu-nadskoceni { 0% { opacity: 0; } 3%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } } } /* ================================================================== * KRMENÍ A PŘÍKRMY (2026-10-17, podkategorie Výbavičky a pomůcek): * bryndák, přísavná miska se lžičkou, dřevěná lžička, sítko, dvě skleničky * s příkrmem, mrkve a hruška. * ------------------------------------------------------------------ * Většina pohybů je ze společných sekcí: nástupy pad / shora / zdola / * zleva (mrkve padají spolu s hruškou, ať mezi nimi není vidět řez), * klid pohupovani (hruška), reakce zatrepani (bryndák se * zavlní jako želé), nadzvednuti (přísavná miska se natáhne a cvakne * zpátky), houpnuti (lžička), poskok (mrkve) a zakolebani (hruška). * Tady je jen to, co scéna má navíc: * reakce krmeni-proseti → sítko se nadzvedne, několikrát rychle zatřepe * ze strany na stranu jako při prosívání, * dosedne a lehce odskočí; skript k tomu * vypustí drobky (částice krmeni-drobky), * krmeni-cinknuti → sklenička se nakloní doprava kolem pravého * dolního rohu (puvod), ťukne a dokývá. Plocha * skleniček ji přes klíč `vlna` spustí na růžové * a o 130 ms později na zelené: růžová ťukne do * zelené a ta se po ťuknutí zhoupne. Skript ve * chvíli ťuknutí vypustí jiskřičky (krmeni-jiskry), * částice jiskřičky a drobky - tvar, zpoždění a směr dává skript * (dekor-scena.js, CASTICE), tady barva a pohyb. Obě mají * základní třídu srdíčka (sekce H) a vlastní třídu navíc. * Místa, která pohyb odkryje (spodek bryndáku za miskou, kraj růžové * skleničky za zelenou, roh zelené skleničky a okraj hrušky za mrkvemi), * jsou ve vrstvách domalovaná (skripty/dekor-vrstvy-rez-krmeni-a-prikrmy.py). * ⚠️ Scéna se celá násobí s barvou pruhu (mix-blend-mode multiply), takže * bílá částice by zmizela - proto jsou jiskřičky medové, ne bílé. * ================================================================== */ /* Jiskřičky: medové čtyřcípé hvězdičky jako třpytky Plenek. */ .mz-scena__srdicko.mz-scena__krmeni-jiskra { color: var(--wp--preset--color--medova); } .mz-scena__srdicko.mz-scena__krmeni-jiskra svg { stroke-width: 1.6; } /* Drobky příkrmu: mrkvový (výchozí), hruškový a hráškový. Barva je z fotky (mrkev), hruška a hrášek z palety. */ .mz-scena__srdicko.mz-scena__krmeni-drobek { color: #e58a3c; } .mz-scena__srdicko.mz-scena__krmeni-drobek--hruska { color: var(--wp--preset--color--medova); } .mz-scena__srdicko.mz-scena__krmeni-drobek--hrasek { color: var(--wp--preset--color--mata); } .mz-scena__srdicko.mz-scena__krmeni-drobek svg { stroke-width: 1.2; } @media (prefers-reduced-motion: no-preference) { /* Sítko: bod otáčení = dno sítka (puvod). Nadzvedne se o necelé 2 % výšky plátna, pak se kolébá ze strany na stranu (posun o 0,22 % šířky = 3,5 px plátna a natočení), dosedne se stlačením a lehce odskočí. Všechny snímky mají stejný seznam funkcí (translate, rotate, scale), ať se mezi nimi plynule přechází. */ .mz-scena__obrazek.je-reakce[data-reakce="krmeni-proseti"] { animation: mz-reakce-krmeni-proseti 1.2s ease-in-out both; } @keyframes mz-reakce-krmeni-proseti { 0% { transform: translate(0, 0) rotate(0deg) scale(1, 1); } 14% { transform: translate(0, -1.8%) rotate(-2deg) scale(1, 1); } 22% { transform: translate(-0.22%, -1.9%) rotate(-0.6deg) scale(1, 1); } 30% { transform: translate(0.22%, -1.9%) rotate(-2.6deg) scale(1, 1); } 38% { transform: translate(-0.22%, -1.9%) rotate(-0.6deg) scale(1, 1); } 46% { transform: translate(0.22%, -1.9%) rotate(-2.6deg) scale(1, 1); } 54% { transform: translate(-0.18%, -1.9%) rotate(-0.8deg) scale(1, 1); } 62% { transform: translate(0.14%, -1.85%) rotate(-2.2deg) scale(1, 1); } 72% { transform: translate(0, -1.7%) rotate(-1.5deg) scale(1, 1); animation-timing-function: ease-in; } 84% { transform: translate(0, 0) rotate(0deg) scale(1.012, 0.985); animation-timing-function: ease-out; } 92% { transform: translate(0, -0.35%) rotate(0deg) scale(1, 1); animation-timing-function: ease-in; } 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); } } /* Sklenička se nakloní doprava (ťuk v 15 %, kladný úhel = po směru hodinových ručiček kolem pravého dolního rohu, takže se levý spodek nadzvedne a vršek přitlačí ke skleničce vpravo) a dokývá. */ .mz-scena__obrazek.je-reakce[data-reakce="krmeni-cinknuti"] { animation: mz-reakce-krmeni-cinknuti 0.95s linear both; } @keyframes mz-reakce-krmeni-cinknuti { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6); } 15% { transform: rotate(5deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 34% { transform: rotate(-1.6deg); animation-timing-function: ease-in-out; } 52% { transform: rotate(1deg); animation-timing-function: ease-in-out; } 70% { transform: rotate(-0.4deg); animation-timing-function: ease-in-out; } 100% { transform: rotate(0deg); } } /* Jiskřička blikne: rychle vyskočí z místa dotyku, zvětší se a za necelou vteřinu zhasne kousek dál (cíl dává skript). */ .mz-scena__srdicko.mz-scena__krmeni-jiskra { animation: mz-scena-krmeni-jiskra 0.75s cubic-bezier(0.2, 0.8, 0.4, 1) both; } @keyframes mz-scena-krmeni-jiskra { 0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(var(--mz-srdce-r0, 0deg)); } 25% { opacity: 1; transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.45), calc(var(--mz-srdce-dy, -20px) * 0.45)) scale(1.15) rotate(var(--mz-srdce-r0, 0deg)); } 60% { opacity: 0.95; transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.8), calc(var(--mz-srdce-dy, -20px) * 0.8)) scale(0.85) rotate(var(--mz-srdce-r1, 0deg)); } 100% { opacity: 0; transform: translate(var(--mz-srdce-dx, 0px), var(--mz-srdce-dy, -20px)) scale(0.4) rotate(var(--mz-srdce-r1, 0deg)); } } /* Drobek propadne sítkem: vypadne, zrychluje dolů jako při pádu (kladné dy dává skript), trochu se odkutálí do strany a zmizí. */ .mz-scena__srdicko.mz-scena__krmeni-drobek { animation: mz-scena-krmeni-drobek 0.7s cubic-bezier(0.5, 0, 0.9, 0.6) both; } @keyframes mz-scena-krmeni-drobek { 0% { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(0deg); } 15% { opacity: 1; transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.1), calc(var(--mz-srdce-dy, 20px) * 0.05)) scale(1) rotate(0deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--mz-srdce-dx, 0px), var(--mz-srdce-dy, 20px)) scale(0.9) rotate(var(--mz-srdce-r1, 0deg)); } } /* Mrkve a hruška se překrývají a řez mezi nimi (místo, kde mrkve zajíždějí pod hrušku) je při velkém pohybu vidět. Proto mají v tomhle banneru jen drobné verze společných pohybů (zadavatelka 21. 10. 2026, dvakrát zmenšené): mrkve poskočí asi o osminu výšky obecného poskoku, hruška se při najetí zakolébá nejvýš o 1,2° a v klidu se pohupuje o 0,4°. */ .mz-scena[data-scena="krmeni-a-prikrmy"] .mz-scena__obrazek.je-reakce[data-reakce="poskok"] { animation: mz-reakce-krmeni-poskok-male 0.8s linear both; } @keyframes mz-reakce-krmeni-poskok-male { 0% { transform: none; animation-timing-function: ease-out; } 12% { transform: scale(1.008, 0.992); animation-timing-function: ease-out; } 36% { transform: translateY(-0.55%) scale(0.998, 1.004); animation-timing-function: ease-in; } 56% { transform: translateY(0) scale(1.008, 0.99); animation-timing-function: ease-out; } 70% { transform: translateY(-0.2%); animation-timing-function: ease-in; } 84% { transform: translateY(0) scale(1.003, 0.997); animation-timing-function: ease-in-out; } 100% { transform: none; } } .mz-scena[data-scena="krmeni-a-prikrmy"] .mz-scena__obrazek.je-reakce[data-reakce="zakolebani"] { animation: mz-reakce-krmeni-zakolebani-male 0.9s ease-in-out both; } @keyframes mz-reakce-krmeni-zakolebani-male { 0% { transform: rotate(var(--mz-uhel-od, 0deg)); } 18% { transform: rotate(-1.2deg); } 40% { transform: rotate(0.85deg); } 60% { transform: rotate(-0.45deg); } 80% { transform: rotate(0.2deg); } 100% { transform: rotate(0deg); } } .mz-scena[data-scena="krmeni-a-prikrmy"] .mz-scena__obrazek--pohupovani { animation-name: mz-scena-krmeni-pohupovani-male; } @keyframes mz-scena-krmeni-pohupovani-male { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); } 25% { transform: rotate(0.4deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 75% { transform: rotate(-0.4deg); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); } 100% { transform: rotate(0deg); } } } /* ================================================================== * KOUPÁNÍ A PÉČE (2026-10-17, podkategorie Výbavičky a pomůcek) * ------------------------------------------------------------------ * Scéna: mátová vanička s přehozenou osuškou (ouška kapuce jsou vlastní * vrstvy), růžová a mátová lahvička (hlavička pumpičky je vlastní vrstva), * kachnička, žínka s nůžtičkami a kartáček (manifest dekor-vrstvy/ * koupani-a-pece/vrstvy.json). Nástupy jsou ze sekcí B a G (zdola, * zleva, zprava, pad), klidové animace scéna nemá. Tady je navíc: * reakce koupani-bubliny → vanička se nehýbe, jen z ní vystoupají * mýdlové bublinky (skript, CASTICE); * animace je „prázdná“ a slouží jen k tomu, * aby se bublinky nesypaly znovu dřív, * než doletí, * koupani-zavrteni → ouško se zavrtí kolem kořínku (puvod); * plocha nad kapucí ho přes `vlna` spustí * na obou ouškách, o kousek po sobě, * koupani-pumpa → hlavička pumpičky se zmáčkne dolů (krček * zajede za uzávěr) a pruží zpátky; * z hubičky vyletí pěna, * koupani-zmacknuti → kachnička se dvakrát zmáčkne jako gumová * hračka v dlani (od 18. 10. 2026 místo * otáčení koupani-rozhlednuti), * koupani-cvaknuti → nůžtičky dvakrát cvaknou (pootočí se * kolem šroubku a vrátí se), * koupani-kartacovani → kartáček párkrát přejede podél rukojeti * sem a tam (osa rukojeti míří doprava dolů: * 5 px plátna = 0,24 % šířky a 0,9 % výšky). * bublinky (.mz-scena__bublina) - mátový kroužek s odleskem, stoupají * s mírným kolébáním a nahoře prasknou; pěna z pumpičky je menší * a rychlejší (--pena). * Všechny reakce začínají i končí v základní poloze. Místa, která pohyb * odkryje (vnitřek vaničky za oušky, osuška za lahvičkami a pumpičkami, * spodek růžové lahvičky, žínka pod kachničkou, nůžtičkami a kartáčkem), * jsou ve vrstvách domalovaná (skripty/dekor-vrstvy-rez-koupani-a-pece.py). * ================================================================== */ /* Mýdlová bublinka: mátový kroužek s průsvitnou výplní a obloučkem odlesku (tvar dává skript). Scéna se násobí s barvou pruhu, takže bílá by zmizela - proto mátová. */ .mz-scena__srdicko.mz-scena__bublina { color: var(--wp--preset--color--mata); } .mz-scena__srdicko.mz-scena__bublina svg { fill: rgba(143, 191, 173, 0.16); stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; paint-order: normal; } @media (prefers-reduced-motion: no-preference) { /* Vanička: „prázdná“ reakce (nic se nehýbe) - jen drží třídu je-reakce po dobu letu bublinek, aby je další najetí nevypustilo znovu hned. */ .mz-scena__obrazek.je-reakce[data-reakce="koupani-bubliny"] { animation: mz-reakce-koupani-bubliny 1.6s linear both; } @keyframes mz-reakce-koupani-bubliny { from, to { transform: none; } } /* Ouško se zavrtí kolem středu spodku, kde sedí na kapuci (puvod), a dokývá. Nejvýš o 10°, jinak by se od kapuce odtrhlo. */ .mz-scena__obrazek.je-reakce[data-reakce="koupani-zavrteni"] { animation: mz-reakce-koupani-zavrteni 0.9s ease-in-out both; } @keyframes mz-reakce-koupani-zavrteni { 0% { transform: none; } 16% { transform: rotate(-10deg); } 36% { transform: rotate(7deg); } 56% { transform: rotate(-4deg); } 76% { transform: rotate(1.5deg); } 100% { transform: none; } } /* Hlavička pumpičky se zmáčkne dolů jako opravdová pumpička: sjede o výšku krčku (3 px plátna = 0,83 % výšky) a krček zajede za uzávěr (vrstva hlavičky leží ZA lahvičkou), chvilku podrží, pustí se a pruží zpátky. Výš než v klidu nejde - nad uzávěrem by se ukázala mezera. (Do 18. 10. 2026 sjížděla o 4 px PŘES uzávěr.) */ .mz-scena__obrazek.je-reakce[data-reakce="koupani-pumpa"] { animation: mz-reakce-koupani-pumpa 0.9s ease-in-out both; } @keyframes mz-reakce-koupani-pumpa { 0% { transform: none; animation-timing-function: ease-in; } 16% { transform: translateY(0.83%); } 40% { transform: translateY(0.83%); animation-timing-function: ease-out; } 62% { transform: none; } 72% { transform: translateY(0.18%); } 84% { transform: none; } 100% { transform: none; } } /* Kachnička se zmáčkne jako gumová hračka v dlani: dvakrát se rozplácne do šířky a stlačí k zemi (kolem středu dna, puvod), povyroste a usadí se. (Do 18. 10. 2026 se otáčela, zadavatelka chtěla realističtější pohyb.) */ .mz-scena__obrazek.je-reakce[data-reakce="koupani-zmacknuti"] { animation: mz-reakce-koupani-zmacknuti 1.1s ease-in-out both; } @keyframes mz-reakce-koupani-zmacknuti { 0% { transform: none; } 13% { transform: scale(1.08, 0.86); } 22% { transform: scale(1.08, 0.86); } 33% { transform: scale(0.97, 1.05); } 43% { transform: scale(1.01, 0.99); } 54% { transform: scale(1.07, 0.88); } 62% { transform: scale(1.07, 0.88); } 74% { transform: scale(0.98, 1.04); } 86% { transform: scale(1.005, 0.995); } 100% { transform: none; } } /* Nůžtičky dvakrát cvaknou - pootočí se kolem šroubku a vrátí se. */ .mz-scena__obrazek.je-reakce[data-reakce="koupani-cvaknuti"] { animation: mz-reakce-koupani-cvaknuti 0.7s ease-in-out both; } @keyframes mz-reakce-koupani-cvaknuti { 0% { transform: none; } 15% { transform: rotate(-9deg); } 32% { transform: none; } 48% { transform: rotate(-7deg); } 66% { transform: none; } 100% { transform: none; } } /* Kartáček přejede podél rukojeti sem a tam (nahoru doleva a dolů doprava), pokaždé o kus méně. */ .mz-scena__obrazek.je-reakce[data-reakce="koupani-kartacovani"] { animation: mz-reakce-koupani-kartacovani 1s ease-in-out both; } @keyframes mz-reakce-koupani-kartacovani { 0% { transform: none; } 18% { transform: translate(-0.24%, -0.9%); } 40% { transform: translate(0.24%, 0.9%); } 60% { transform: translate(-0.17%, -0.65%); } 80% { transform: translate(0.1%, 0.4%); } 100% { transform: none; } } /* Bublinka stoupá s mírným kolébáním do stran a nahoře praskne (zvětší se a zmizí). Cíl letu dává skript (--mz-srdce-dx / -dy). */ .mz-scena__srdicko.mz-scena__bublina { animation: mz-scena-koupani-bublina 1.9s cubic-bezier(0.3, 0.5, 0.5, 1) both; } .mz-scena__srdicko.mz-scena__bublina--pena { animation-duration: 1.1s; } @keyframes mz-scena-koupani-bublina { 0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(var(--mz-srdce-r0, 0deg)); } 14% { opacity: 0.95; transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.12), calc(var(--mz-srdce-dy, -40px) * 0.15)) scale(1) rotate(var(--mz-srdce-r0, 0deg)); } 40% { transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.45 + 3px), calc(var(--mz-srdce-dy, -40px) * 0.45)) scale(1); } 66% { transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.75 - 3px), calc(var(--mz-srdce-dy, -40px) * 0.75)) scale(1); } 86% { opacity: 0.9; transform: translate(calc(var(--mz-srdce-dx, 0px) * 0.95), calc(var(--mz-srdce-dy, -40px) * 0.95)) scale(1) rotate(var(--mz-srdce-r1, 0deg)); } 100% { opacity: 0; transform: translate(var(--mz-srdce-dx, 0px), var(--mz-srdce-dy, -40px)) scale(1.45) rotate(var(--mz-srdce-r1, 0deg)); } } } /* ================================================================== * LEZENÍ A POHYB (2026-10-17, podkategorie Výbavičky a pomůcek): * Piklerův trojúhelník se skluzavkou, hrazdička se třemi plstěnými * hračkami (stromek, lev, duha) a plstěný míček. * ------------------------------------------------------------------ * Ze starších sekcí používá nástup `prevraceni` (skluzavka se přiklopí * kolem háčku, sekce G), `zdola` (hrazdička) a reakce `rozhoupani` (hračky, * sekce G) a `popojeti` (míček). Nové hodnoty (povolené v PHP): * nástup lezeni-rozlozeni → trojúhelník se roztáhne ze složeného stavu * (vrstva se prolne, obrázek se rozšíří kolem * bodu otáčení mezi patkami), * lezeni-zhoupnuti → hračka se objeví rozhoupaná a dokývá kolem * uzlíku pod kroužkem, * lezeni-sjezd → míček se objeví nahoře na skluzavce, sjede * po ní a dokutálí se na své místo, * klid lezeni-kyv → hračka se pořád nepatrně kývá (±1,8°), * reakce lezeni-sjezd → míček zmizí, objeví se nahoře na skluzavce * a sjede znovu (spouští ho plocha trojúhelníku * a skluzavky přes vlnu v manifestu), * lezeni-zatoceni → lev se zatočí na provázku (scaleX = kosinus * úhlu otočení kolem svislé osy) a dokývá. * DRÁHA MÍČKU je změřená na fotce (skript řezu dekor-vrstvy-rez-lezeni.py): * posuny jsou v % plátna (translate na vrstvě / obrázku přes celé plátno se * počítá z jejich rozměru = plátna), takže sedí na každé velikosti banneru. * nahoře na skluzavce střed míčku (728; 210,5) px = posun -12,656 % / -23,611 % * konec skluzavky (826; 290,7) px = posun -6,531 % / -1,333 % * klid (930,5; 295,5) px = žádný posun * Otočení míčku = ujetá dráha / poloměr (11,75 px): po skluzavce 126,6 px, * po zemi 104,6 px, celkem 1127,6° (na konci skluzavky zbývá 510,1°), * po směru hodinových ručiček (míček se valí doprava). Po skluzavce * zrychluje, po zemi zpomaluje; rychlost v místě, kde skluzavka končí, * na sebe navazuje (konec jedné křivky a začátek druhé mají stejný sklon). * Míček se otáčí vlastností `rotate` obrázku (nástup) nebo v jeho * `transform` (reakce) - posun nástupu jde na vrstvu, ať se nepere * s reakcí popojeti. Pravidla s :where() mají nízkou specificitu, aby je * reakce (třída je-reakce) vždy přebily. * ================================================================== */ .mz-scena--lezeni { --mz-lezeni-start-x: -12.656%; --mz-lezeni-start-y: -23.611%; --mz-lezeni-konec-x: -6.531%; --mz-lezeni-konec-y: -1.333%; } @media (prefers-reduced-motion: no-preference) { /* ---------- Trojúhelník se rozloží ---------- */ .mz-scena__vrstva[data-nastup="lezeni-rozlozeni"] { animation-name: mz-scena-nastup-lezeni-rozlozeni; animation-timing-function: ease-out; } @keyframes mz-scena-nastup-lezeni-rozlozeni { 0% { opacity: 0; transform: none; } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } } /* Složený trojúhelník je úzký a o kousek vyšší; roztáhne se, lehce přestřelí a usadí se. Bod otáčení (puvod) je mezi patkami. Trojúhelník sám nereaguje (jeho plocha posílá reakci míčku), takže transform obrázku je volný. */ .mz-scena__vrstva[data-nastup="lezeni-rozlozeni"] > .mz-scena__obrazek { animation: mz-scena-lezeni-rozlozeni var(--mz-delka) linear var(--mz-start) both; } @keyframes mz-scena-lezeni-rozlozeni { 0% { transform: scale(0.34, 1.07); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); } 62% { transform: scale(1.05, 0.985); animation-timing-function: ease-in-out; } 82% { transform: scale(0.985, 1.005); animation-timing-function: ease-in-out; } 100% { transform: none; } } /* ---------- Hračky na provázku ---------- */ .mz-scena__vrstva[data-nastup="lezeni-zhoupnuti"] { animation-name: mz-scena-nastup-lezeni-zhoupnuti; animation-timing-function: linear; } @keyframes mz-scena-nastup-lezeni-zhoupnuti { 0% { opacity: 0; transform: none; } 14% { opacity: 1; } 100% { opacity: 1; transform: none; } } /* Klid: kyv jako kyvadlo (u nuly nejrychleji, v krajích zpomalí). */ .mz-scena__obrazek--lezeni-kyv { animation: mz-scena-lezeni-kyv 3.4s linear var(--mz-klid-od, 1.3s) infinite; } /* Hračka s nástupem lezeni-zhoupnuti: nejdřív dokývá z rozhoupání (transform), pak naváže klid. Klid je v seznamu DRUHÝ, takže od chvíle, kdy začne, přebije konec zhoupnutí (oba končí / začínají v nule). */ :where(.mz-scena__vrstva[data-nastup="lezeni-zhoupnuti"]) > .mz-scena__obrazek--lezeni-kyv { animation: mz-scena-lezeni-zhoupnuti var(--mz-delka) linear var(--mz-start) both, mz-scena-lezeni-kyv 3.4s linear var(--mz-klid-od, 1.3s) infinite; } /* Po reakci jen klid od nuly (zhoupnutí z nástupu se nesmí přehrát). */ .mz-scena__obrazek--lezeni-kyv.po-reakci { animation: mz-scena-lezeni-kyv 3.4s linear 0s infinite; } @keyframes mz-scena-lezeni-zhoupnuti { 0% { transform: rotate(16deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 22% { transform: rotate(-11deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 42% { transform: rotate(7deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 60% { transform: rotate(-4deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 76% { transform: rotate(2deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 89% { transform: rotate(-0.8deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 100% { transform: rotate(0deg); } } @keyframes mz-scena-lezeni-kyv { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1); } 25% { transform: rotate(1.8deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 75% { transform: rotate(-1.8deg); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33); } 100% { transform: rotate(0deg); } } /* Lev se zatočí na provázku: otočí se kolem svislé osy (provázek) jednou dokola, přetočí se a dokývá zpátky. Otočení kolem svislé osy = šířka obrázku násobená kosinem úhlu (scaleX), proto je klíčových snímků hodně (kosinus se mezi nimi lineárně dopočítat nedá). Úhel z klidového kyvu (--mz-uhel-od dosadí skript) se během první pětiny srovná do nuly. Bod otáčení = uzlík pod kroužkem (puvod), takže provázek zůstává. */ .mz-scena__obrazek.je-reakce[data-reakce="lezeni-zatoceni"] { animation: mz-reakce-lezeni-zatoceni 1.8s linear both; } @keyframes mz-reakce-lezeni-zatoceni { 0% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 1.00)) scaleX(1.000); } 2.5% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 0.88)) scaleX(0.864); } 5% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 0.75)) scaleX(0.458); } 7.5% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 0.62)) scaleX(-0.113); } 10% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 0.50)) scaleX(-0.651); } 12.5% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 0.38)) scaleX(-0.963); } 15% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 0.25)) scaleX(-0.956); } 17.5% { transform: rotate(calc(var(--mz-uhel-od, 0deg) * 0.13)) scaleX(-0.667); } 20% { transform: rotate(0deg) scaleX(-0.218); } 22.5% { transform: rotate(0deg) scaleX(0.249); } 25% { transform: rotate(0deg) scaleX(0.629); } 27.5% { transform: rotate(0deg) scaleX(0.874); } 30% { transform: rotate(0deg) scaleX(0.986); } 32.5% { transform: rotate(0deg) scaleX(0.993); } 35% { transform: rotate(0deg) scaleX(0.934); } 37.5% { transform: rotate(0deg) scaleX(0.844); } 40% { transform: rotate(0deg) scaleX(0.747); } 42.5% { transform: rotate(0deg) scaleX(0.661); } 45% { transform: rotate(0deg) scaleX(0.594); } 47.5% { transform: rotate(0deg) scaleX(0.549); } 50% { transform: rotate(0deg) scaleX(0.527); } 52.5% { transform: rotate(0deg) scaleX(0.525); } 55% { transform: rotate(0deg) scaleX(0.541); } 57.5% { transform: rotate(0deg) scaleX(0.571); } 60% { transform: rotate(0deg) scaleX(0.612); } 62.5% { transform: rotate(0deg) scaleX(0.660); } 65% { transform: rotate(0deg) scaleX(0.711); } 67.5% { transform: rotate(0deg) scaleX(0.762); } 70% { transform: rotate(0deg) scaleX(0.810); } 72.5% { transform: rotate(0deg) scaleX(0.854); } 75% { transform: rotate(0deg) scaleX(0.893); } 77.5% { transform: rotate(0deg) scaleX(0.925); } 80% { transform: rotate(0deg) scaleX(0.950); } 82.5% { transform: rotate(0deg) scaleX(0.969); } 85% { transform: rotate(0deg) scaleX(0.983); } 87.5% { transform: rotate(0deg) scaleX(0.992); } 90% { transform: rotate(0deg) scaleX(0.997); } 92.5% { transform: rotate(0deg) scaleX(1.000); } 95% { transform: rotate(0deg) scaleX(1.000); } 97.5% { transform: rotate(0deg) scaleX(0.999); } 100% { transform: rotate(0deg) scaleX(1.000); } } /* ---------- Míček sjede po skluzavce (nástup) ---------- Vrstva jede po dráze: nahoře na skluzavce se objeví, 0-45 % sjíždí (zrychluje), 45-100 % se kutálí po zemi (zpomaluje). Křivky mají na rozhraní stejnou rychlost: konec první 2,5 × dráha 1 / 0,45 a začátek druhé 3,67 × dráha 2 / 0,55 (obojí ~700 px na délku animace). */ .mz-scena__vrstva[data-nastup="lezeni-sjezd"] { animation-name: mz-scena-nastup-lezeni-sjezd; animation-timing-function: linear; } @keyframes mz-scena-nastup-lezeni-sjezd { 0% { opacity: 0; transform: translate(var(--mz-lezeni-start-x), var(--mz-lezeni-start-y)); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.5); } 8% { opacity: 1; } 45% { transform: translate(var(--mz-lezeni-konec-x), var(--mz-lezeni-konec-y)); animation-timing-function: cubic-bezier(0.12, 0.44, 0.4, 1); } 100% { opacity: 1; transform: none; } } /* Otočení obrázku míčku ve stejném čase a se stejnými křivkami jako posun vrstvy - valí se, neklouže. */ :where(.mz-scena__vrstva[data-nastup="lezeni-sjezd"]) > .mz-scena__obrazek { animation: mz-scena-lezeni-sjezd-otoceni var(--mz-delka) linear var(--mz-start) both; } /* Po reakci (popojetí, nový sjezd) se otočení z nástupu nesmí přehrát. */ :where(.mz-scena__vrstva[data-nastup="lezeni-sjezd"]) > .mz-scena__obrazek.po-reakci { animation: none; } @keyframes mz-scena-lezeni-sjezd-otoceni { 0% { rotate: -1127.6deg; animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.5); } 45% { rotate: -510.1deg; animation-timing-function: cubic-bezier(0.12, 0.44, 0.4, 1); } 100% { rotate: 0deg; } } /* ---------- Míček sjede znovu (reakce) ---------- Ležící míček za 0,2 s zmizí, objeví se nahoře na skluzavce a sjede po stejné dráze jako při úvodu (16-50 % skluzavka, 50-100 % po zemi). */ .mz-scena__obrazek.je-reakce[data-reakce="lezeni-sjezd"] { animation: mz-reakce-lezeni-sjezd 2.1s linear both; } @keyframes mz-reakce-lezeni-sjezd { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); animation-timing-function: ease-in; } 9% { opacity: 0; transform: translate(0, 0) rotate(0deg); animation-timing-function: linear; } 10% { opacity: 0; transform: translate(var(--mz-lezeni-start-x), var(--mz-lezeni-start-y)) rotate(-1127.6deg); animation-timing-function: linear; } 16% { opacity: 1; transform: translate(var(--mz-lezeni-start-x), var(--mz-lezeni-start-y)) rotate(-1127.6deg); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.5); } 50% { transform: translate(var(--mz-lezeni-konec-x), var(--mz-lezeni-konec-y)) rotate(-510.1deg); animation-timing-function: cubic-bezier(0.12, 0.44, 0.4, 1); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } } /* ================================================================== * BEZPEČNOST (2026-10-17, podkategorie Výbavičky a pomůcek; manifest * dekor-vrstvy/bezpecnost/vrstvy.json, řez skripty/dekor-vrstvy-rez- * bezpecnost.py): zábrana na postel, kamera a rodičovská jednotka * chůvičky, kryty zásuvek a pojistky, zámek na šuplík, chránič rohu * ------------------------------------------------------------------ * Kamera přijede shora, rodičovská jednotka zprava, zámek zleva (sekce B), * kryty a chránič spadnou (pad, sekce G); kryty poskočí (poskoceni, G), * chránič dvakrát gumově poskočí (poskok, H). Tady je navíc: * nástup bezpecnost-vyklopeni → zábrana se zvedne ze sklopené polohy: * vrstva se jen rychle prolne a obrázek se natáhne nahoru kolem * spodku (puvod), lehce přestřelí a usadí se - jako skutečná zábrana, * kterou zvedneš k posteli; * klid bezpecnost-zapnuti → vrstva rozsvíceného displeje (kreslený * noční záběr s měsíčkem, není z fotky): v klidu je SCHOVANÁ (i při * „omezit pohyb“ - na fotce je obrazovka černá), po úvodu se JEDNOU * rozsvítí, až k ní doletí vlnky z kamery (--mz-klid-od = příjezd * jednotky, +0,5 s); * reakce bezpecnost-zachveni (zábrana se krátce zachvěje do stran * a stojí pevně), bezpecnost-signal (kamera se pootočí, jako by se * rozhlédla; plocha kamery ji přes vlna pošle o 0,45 s později * i displeji, který se rozsvítí), bezpecnost-rozsviceni (displej se * rozsvítí a za ~2,5 s zhasne) a bezpecnost-zacvaknuti (zámek se * stlačí a dosedne, jako když se zacvakne); * částice (dekor-scena.js CASTICE): mátové vlnky signálu z kamery. * (Fajfky z krytů zadavatelka 17. 10. 2026 zamítla - kryty jen * poskočí.) * ================================================================== */ /* Displej je v klidu schovaný - černá obrazovka je na vrstvě jednotky. */ .mz-scena__obrazek--bezpecnost-zapnuti { opacity: 0; } /* Vlnky signálu: střední máta jako fajfky u výhod na homepage (krémový lem a tvar dává společné pravidlo .mz-scena__srdicko). */ .mz-scena__srdicko.mz-scena__bezpecnost-vlnka { color: #5e9482; } @media (prefers-reduced-motion: no-preference) { /* Zábrana se vyklopí: vrstva se jen prolne (pohyb dělá obrázek, ať se nástup nepere s paralaxou ani s reakcí - po reakci se už nepřehraje). */ .mz-scena__vrstva[data-nastup="bezpecnost-vyklopeni"] { animation-name: mz-scena-nastup-bezpecnost-vyklopeni; animation-timing-function: linear; } @keyframes mz-scena-nastup-bezpecnost-vyklopeni { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 1; } } .mz-scena__vrstva[data-nastup="bezpecnost-vyklopeni"] > .mz-scena__obrazek { animation: mz-scena-bezpecnost-vyklopeni var(--mz-delka) linear var(--mz-start) both; } .mz-scena__vrstva[data-nastup="bezpecnost-vyklopeni"] > .mz-scena__obrazek.po-reakci { animation: none; } /* Natažení kolem spodku: ze skoro ležící zábrany (6 %) do plné výšky, malé přestřelení a usazení. */ @keyframes mz-scena-bezpecnost-vyklopeni { 0% { transform: scaleY(0.06); animation-timing-function: cubic-bezier(0.3, 0, 0.45, 1); } 62% { transform: scaleY(1.045); animation-timing-function: ease-in-out; } 80% { transform: scaleY(0.985); animation-timing-function: ease-in-out; } 100% { transform: none; } } /* Zábrana se zachvěje do stran s útlumem (posun v % šířky plátna, 0,3 % = ~5 px fotky). Selektor má vyšší váhu než nástup výš. */ .mz-scena__vrstva[data-nastup="bezpecnost-vyklopeni"] > .mz-scena__obrazek.je-reakce[data-reakce="bezpecnost-zachveni"], .mz-scena__obrazek.je-reakce[data-reakce="bezpecnost-zachveni"] { animation: mz-reakce-bezpecnost-zachveni 0.75s linear both; } @keyframes mz-reakce-bezpecnost-zachveni { 0% { transform: none; } 12% { transform: translateX(0.3%); } 28% { transform: translateX(-0.25%); } 44% { transform: translateX(0.17%); } 60% { transform: translateX(-0.1%); } 78% { transform: translateX(0.04%); } 100% { transform: none; } } /* Kamera se pootočí kolem středu stojánku (puvod), jako by se rozhlédla. */ .mz-scena__obrazek.je-reakce[data-reakce="bezpecnost-signal"] { animation: mz-reakce-bezpecnost-signal 0.9s ease-in-out both; } @keyframes mz-reakce-bezpecnost-signal { 0% { transform: none; } 25% { transform: rotate(-2.5deg); } 55% { transform: rotate(1.4deg); } 78% { transform: rotate(-0.5deg); } 100% { transform: none; } } /* Displej: jednou po úvodu (vlnky z kamery k němu doletí ~0,5 s po příjezdu jednotky), pak se zase schová. */ .mz-scena__obrazek--bezpecnost-zapnuti { animation: mz-reakce-bezpecnost-displej 2.6s ease-in-out calc(var(--mz-klid-od, 1.5s) + 500ms) both; } .mz-scena__obrazek--bezpecnost-zapnuti.po-reakci { animation: none; } /* Rozsvícení při reakci - z kamery (bezpecnost-signal přes vlna) i po najetí na jednotku (bezpecnost-rozsviceni). Selektor s třídou klidu má vyšší váhu než pootočení kamery výš. Animace se jmenuje „mz-reakce-…“, takže skript po jejím konci (i po úvodním rozsvícení) dá obrázku třídu po-reakci - úvod se tak už nikdy nepřehraje. */ .mz-scena__obrazek--bezpecnost-zapnuti.je-reakce[data-reakce="bezpecnost-signal"], .mz-scena__obrazek--bezpecnost-zapnuti.je-reakce[data-reakce="bezpecnost-rozsviceni"] { animation: mz-reakce-bezpecnost-displej 2.6s ease-in-out both; } @keyframes mz-reakce-bezpecnost-displej { 0% { opacity: 0; } 6% { opacity: 0.7; } 9% { opacity: 0.4; } 15% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } } /* Zámek na šuplík se zacvakne: stlačí se kolem spodku (puvod), pruží zpátky a dosedne. */ .mz-scena__obrazek.je-reakce[data-reakce="bezpecnost-zacvaknuti"] { animation: mz-reakce-bezpecnost-zacvaknuti 0.6s ease-out both; } @keyframes mz-reakce-bezpecnost-zacvaknuti { 0% { transform: none; } 20% { transform: scale(1.05, 0.88); } 40% { transform: scale(0.975, 1.045); } 58% { transform: scale(1.015, 0.98); } 78% { transform: scale(0.996, 1.004); } 100% { transform: none; } } /* Vlnky signálu z kamery: vyletí z čočky, rostou a doletí k displeji, kde zmizí (cíl --mz-srdce-dx / -dy a natočení dává skript). */ .mz-scena__srdicko.mz-scena__bezpecnost-vlnka { animation: mz-scena-bezpecnost-vlnka-let 0.95s ease-out both; } @keyframes mz-scena-bezpecnost-vlnka-let { 0% { opacity: 0; transform: translate(0, 0) scale(0.45) rotate(var(--mz-srdce-r0, 0deg)); } 18% { opacity: 1; } 75% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--mz-srdce-dx, 40px), var(--mz-srdce-dy, 0px)) scale(1.2) rotate(var(--mz-srdce-r1, 0deg)); } } } /* ================================================================== * TĚHOTENSTVÍ (2026-10-17, podkategorie Pro maminku; manifest * dekor-vrstvy/tehotenstvi/vrstvy.json, řez skripty/dekor-vrstvy-rez- * tehotenstvi.py). Korálový deník se zlatým perem, ultrazvuková fotka, * pletené botičky, krém na strie a mátový pletený zajíček. Nástupy pad * (deník, pero, fotka, krém) a stín pera jsou ze sekce G, srdíčka z fotky * ze sekce H (částice srdicka). Tady je navíc: * nástup tehotenstvi-cupitani → botička přicupitá zleva na dva krůčky, * tehotenstvi-prihopsani → zajíček přihopsá zprava na dva skoky * a při dopadech se přikrčí, * klid tehotenstvi-tukani → ultrazvuková fotka jednou za ~3,6 s * dvakrát jemně tukne jako srdíčko, * tehotenstvi-ucho-leve / -prave → ouška dýchají se zajíčkem na * pixel (stejná animace i bod otáčení; * vlastní třída je jen kvůli reakci), * reakce tehotenstvi-tapkani → botička dvakrát poskočí; plocha botiček * ji přes `vlna` spustí na přední a o čtvrt * vteřiny později na zadní, takže ťapkají * střídavě, * tehotenstvi-tlukot → fotka tlukne jako srdce (+ srdíčka), * tehotenstvi-psani → pero se drobně klikatě pohne (do ~3 px) * a stín pera jede s ním, * tehotenstvi-zmacknuti → tuba se zmáčkne a odpruží, * tehotenstvi-poskok → zajíček poskočí a ouška při tom * zastříhají kolem kořínků. * Nástupy cupitání a přihopsání hýbou VRSTVOU (posun v % plátna); bod, kolem * kterého se zajíček při dopadu přikrčí, je pravidlem jen pro tuhle scénu * (data-scena), protože PHP dává --mz-dopad jen nástupům ze sekce G. * OUŠKA: obrázek ouška má stejný bod otáčení jako zajíček (střed jeho * spodku), takže při dýchání i poskoku sedí na hlavičce. Stříhání kolem * kořínku (klíč osa) je posun k ose, otočení a posun zpět (--mz-osa-x / -y * dává PHP) a PŘED ním stojí stejný posun a zvětšení jako u zajíčka - * klíčové snímky i jejich časy jsou u zajíčka a oušek STEJNÉ. * ================================================================== */ @media (prefers-reduced-motion: no-preference) { /* ---------- Nástup: botičky přicupitají zleva ---------- */ .mz-scena__vrstva[data-nastup="tehotenstvi-cupitani"] { animation-name: mz-scena-nastup-tehotenstvi-cupitani; animation-timing-function: linear; } @keyframes mz-scena-nastup-tehotenstvi-cupitani { 0% { opacity: 0; transform: translate(-4.4%, 0); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 10% { opacity: 1; } 24% { transform: translate(-3.3%, -3.2%); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); } 40% { transform: translate(-2.2%, 0); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 58% { transform: translate(-1.1%, -3.2%); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); } 76% { transform: translate(0, 0); animation-timing-function: ease-out; } 88% { transform: translate(0, -0.7%); animation-timing-function: ease-in; } 100% { opacity: 1; transform: none; } } /* Stín zadní botičky leží na hřbetu deníku (vrstva boticka-zadni-stin). Je ve vrstvě botičky, ale drží se deníku: do chvíle, kdy botička dorazí (76 % nástupu), je schovaný, pak se rozsvítí a poslední poskočení vrstvy (88 %) vyrovná opačným posunem. Paralaxu má jako deník: vrstva botičky se posouvá s hloubkou 0,8, deník 0,6, takže stín jede o čtvrtinu posunu vrstvy zpět (0,6 / 0,8 - 1 = -0,25). Při ťapkání se hýbe jen obrázek botičky, stín zůstane. */ .mz-scena[data-scena="tehotenstvi"] .mz-scena__vrstva[data-nastup="tehotenstvi-cupitani"] > .mz-scena__stin { animation: mz-scena-tehotenstvi-cupitani-stin var(--mz-delka) linear var(--mz-start) both; translate: calc(var(--mz-px, 0px) * -0.25) calc(var(--mz-py, 0px) * -0.25); } @keyframes mz-scena-tehotenstvi-cupitani-stin { 0% { opacity: 0; transform: none; } 74% { opacity: 0; } 76% { transform: none; animation-timing-function: ease-out; } 84% { opacity: 1; } 88% { transform: translate(0, 0.7%); animation-timing-function: ease-in; } 100% { opacity: 1; transform: none; } } /* ---------- Nástup: zajíček přihopsá zprava (a ouška s ním) ---------- */ .mz-scena__vrstva[data-nastup="tehotenstvi-prihopsani"] { animation-name: mz-scena-nastup-tehotenstvi-prihopsani; animation-timing-function: linear; } /* Přikrčení při dopadu kolem středu spodku zajíčka (x 928, y 300 px). */ .mz-scena[data-scena="tehotenstvi"] .mz-scena__vrstva[data-nastup="tehotenstvi-prihopsani"] { transform-origin: 58% 83.3%; } @keyframes mz-scena-nastup-tehotenstvi-prihopsani { 0% { opacity: 0; transform: translate(5.5%, 0) scale(1, 1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 8% { opacity: 1; } 22% { transform: translate(4.1%, -7%) scale(0.98, 1.03); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); } 38% { transform: translate(2.75%, 0) scale(1.05, 0.92); animation-timing-function: ease-out; } 46% { transform: translate(2.4%, 0) scale(1, 1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 62% { transform: translate(1.2%, -6%) scale(0.98, 1.03); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); } 78% { transform: translate(0, 0) scale(1.06, 0.92); animation-timing-function: ease-out; } 88% { transform: translate(0, -0.8%) scale(0.99, 1.01); animation-timing-function: ease-in; } 100% { opacity: 1; transform: none; } } /* ---------- Klid ---------- */ /* Ultrazvuková fotka: jednou za 3,6 s dvakrát jemně tukne (zvětší se kolem svého středu) jako tlukot srdíčka, pak zase klid. */ .mz-scena__obrazek--tehotenstvi-tukani { animation: mz-scena-tehotenstvi-tukani 3.6s ease-in-out var(--mz-klid-od, 1.3s) infinite; } .mz-scena__obrazek--tehotenstvi-tukani.po-reakci { animation-delay: 0s; } @keyframes mz-scena-tehotenstvi-tukani { 0% { transform: none; } 5% { transform: scale(1.025); } 10% { transform: none; } 15% { transform: scale(1.018); } 22% { transform: none; } 100% { transform: none; } } /* Ouška dýchají se zajíčkem: stejná animace (mz-scena-dychani ze sekce C), stejné časy i bod otáčení jako tělo. */ .mz-scena__obrazek--tehotenstvi-ucho-leve, .mz-scena__obrazek--tehotenstvi-ucho-prave { animation: mz-scena-dychani 4s ease-in-out 1.3s infinite; } /* ---------- Reakce ---------- */ /* Botička dvakrát poskočí s lehkým natočením a pokaždé se při dopadu přikrčí (bod otáčení = střed podrážky). Vlna z plochy botiček ji pustí na zadní botičce o čtvrt vteřiny později, takže ťapkají střídavě. */ .mz-scena__obrazek.je-reakce[data-reakce="tehotenstvi-tapkani"] { animation: mz-reakce-tehotenstvi-tapkani 1s linear both; } @keyframes mz-reakce-tehotenstvi-tapkani { 0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 16% { transform: translateY(-3%) rotate(-4deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 30% { transform: translateY(0) rotate(0deg) scale(1.03, 0.96); animation-timing-function: ease-out; } 38% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 56% { transform: translateY(-2.4%) rotate(3deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 70% { transform: translateY(0) rotate(0deg) scale(1.02, 0.97); animation-timing-function: ease-out; } 80% { transform: none; } 100% { transform: none; } } /* Ultrazvuková fotka tlukne jako srdce: dvakrát se zvětší kolem středu (s nepatrným natočením) a uklidní se; skript k tomu vypustí srdíčka. */ .mz-scena__obrazek.je-reakce[data-reakce="tehotenstvi-tlukot"] { animation: mz-reakce-tehotenstvi-tlukot 1.1s ease-in-out both; } @keyframes mz-reakce-tehotenstvi-tlukot { 0% { transform: none; } 12% { transform: scale(1.06) rotate(-1.5deg); } 26% { transform: scale(0.99) rotate(0deg); } 38% { transform: scale(1.045) rotate(1deg); } 54% { transform: scale(1) rotate(0deg); } 100% { transform: none; } } /* Pero čmárá po deníku: jen drobně - hrot se dvakrát třikrát klikatě posune o pár pixelů jako při psaní a vrátí se. Stín pera (vrstva pero-stin) jede s ním (viz pravidlo stínu níž). Pohyb je ZÁMĚRNĚ malý (do ~3 px, přání zadavatelky 18. 10. 2026): při větším posunu bylo vidět, že kus stínu na spodní hraně desek zůstává ve vrstvě deníku. */ .mz-scena__obrazek.je-reakce[data-reakce="tehotenstvi-psani"] { animation: mz-reakce-tehotenstvi-psani 1.2s ease-in-out both; } @keyframes mz-reakce-tehotenstvi-psani { 0% { transform: none; } 15% { transform: translate(0.06%, -0.5%) rotate(-0.6deg); } 30% { transform: translate(0.12%, 0.15%) rotate(0.2deg); } 45% { transform: translate(0.17%, -0.5%) rotate(-0.6deg); } 60% { transform: translate(0.2%, 0.15%) rotate(0.2deg); } 80% { transform: translate(0.08%, -0.3%) rotate(-0.3deg); } 100% { transform: none; } } /* Stín pera se při psaní NESCHOVÁVÁ a jede s perem (bez natočení). Pravidlo je nutné: bez něj by skript po odebrání třídy po-reakci spustil znovu nástup „pad“ a stín by zmizel a znovu se rozsvítil. */ .mz-scena__stin.je-reakce[data-reakce="tehotenstvi-psani"] { animation: mz-reakce-tehotenstvi-psani-stin 1.2s ease-in-out both; } @keyframes mz-reakce-tehotenstvi-psani-stin { 0% { opacity: 1; transform: none; } 15% { opacity: 1; transform: translate(0.06%, -0.5%); } 30% { opacity: 1; transform: translate(0.12%, 0.15%); } 45% { opacity: 1; transform: translate(0.17%, -0.5%); } 60% { opacity: 1; transform: translate(0.2%, 0.15%); } 80% { opacity: 1; transform: translate(0.08%, -0.3%); } 100% { opacity: 1; transform: none; } } /* Tuba s krémem se zmáčkne (bod otáčení = střed spodku víčka) a odpruží. */ .mz-scena__obrazek.je-reakce[data-reakce="tehotenstvi-zmacknuti"] { animation: mz-reakce-tehotenstvi-zmacknuti 1s ease-in-out both; } @keyframes mz-reakce-tehotenstvi-zmacknuti { 0% { transform: none; } 14% { transform: scale(1.07, 0.9); } 30% { transform: scale(0.96, 1.05); } 46% { transform: scale(1.03, 0.97); } 62% { transform: scale(0.99, 1.01); } 78% { transform: scale(1.005, 0.997); } 100% { transform: none; } } /* Zajíček poskočí: přikrčí se, vyskočí, dopadne se stlačením, malý doskok, usadí se (bod otáčení = střed spodku). Ouška mají stejné klíčové snímky a navíc zastříhají kolem kořínku (osa) - levé ven doleva, pravé doprava, po dopadu ještě dvakrát. Pravidla oušek stojí ZA pravidlem těla (stejná specificita), takže ho přebijí. */ .mz-scena__obrazek.je-reakce[data-reakce="tehotenstvi-poskok"] { animation: mz-reakce-tehotenstvi-poskok 1.1s linear both; } @keyframes mz-reakce-tehotenstvi-poskok { 0% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; } 10% { transform: translateY(0) scale(1.05, 0.93); animation-timing-function: ease-out; } 34% { transform: translateY(-5%) scale(0.97, 1.04); animation-timing-function: ease-in; } 54% { transform: translateY(0) scale(1.06, 0.92); animation-timing-function: ease-out; } 66% { transform: translateY(-1.2%) scale(0.99, 1.01); animation-timing-function: ease-in; } 78% { transform: translateY(0) scale(1.02, 0.98); animation-timing-function: ease-out; } 90% { transform: translateY(0) scale(1, 1); } 100% { transform: translateY(0) scale(1, 1); } } .mz-scena__obrazek--tehotenstvi-ucho-leve.je-reakce[data-reakce="tehotenstvi-poskok"] { animation-name: mz-reakce-tehotenstvi-poskok-ucho-leve; } .mz-scena__obrazek--tehotenstvi-ucho-prave.je-reakce[data-reakce="tehotenstvi-poskok"] { animation-name: mz-reakce-tehotenstvi-poskok-ucho-prave; } @keyframes mz-reakce-tehotenstvi-poskok-ucho-leve { 0% { transform: translateY(0) scale(1, 1) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 10% { transform: translateY(0) scale(1.05, 0.93) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(6deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 34% { transform: translateY(-5%) scale(0.97, 1.04) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-16deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-in; } 54% { transform: translateY(0) scale(1.06, 0.92) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(10deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 66% { transform: translateY(-1.2%) scale(0.99, 1.01) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-8deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-in; } 78% { transform: translateY(0) scale(1.02, 0.98) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(5deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 90% { transform: translateY(0) scale(1, 1) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-2.5deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 100% { transform: translateY(0) scale(1, 1) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } } @keyframes mz-reakce-tehotenstvi-poskok-ucho-prave { 0% { transform: translateY(0) scale(1, 1) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 10% { transform: translateY(0) scale(1.05, 0.93) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-6deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 34% { transform: translateY(-5%) scale(0.97, 1.04) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(16deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-in; } 54% { transform: translateY(0) scale(1.06, 0.92) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-10deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 66% { transform: translateY(-1.2%) scale(0.99, 1.01) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(8deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-in; } 78% { transform: translateY(0) scale(1.02, 0.98) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(-5deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); animation-timing-function: ease-out; } 90% { transform: translateY(0) scale(1, 1) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(2.5deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } 100% { transform: translateY(0) scale(1, 1) translate(var(--mz-osa-x), var(--mz-osa-y)) rotate(0deg) translate(calc(var(--mz-osa-x) * -1), calc(var(--mz-osa-y) * -1)); } } } /* ================================================================== * PÁRA NAD HRNKEM (klíč manifestu `para`; původně sekce Kurzy, 2026-10-17) * Tři vlnky pořád stoupají, tři navíc se vyvalí při reakci hrnku. * ================================================================== */ /* Pára: obal stojí spodním středem na hladině kávy (left/top z manifestu). */ .mz-scena__para { display: none; position: absolute; width: 2.6%; height: 15%; translate: -50% -100%; pointer-events: none; } .mz-scena__para-vlna { position: absolute; bottom: 0; width: 34%; height: 100%; fill: none; stroke: #fff; stroke-width: 2px; stroke-linecap: round; opacity: 0; transform-origin: 50% 100%; filter: drop-shadow(0 0 0.6px rgba(150, 110, 90, 0.35)); } /* Tloušťka čáry v px obrazovky, ať ji nezmění roztažení vlnky. */ .mz-scena__para-vlna path { vector-effect: non-scaling-stroke; } .mz-scena__para-vlna:nth-child(3n + 1) { left: 2%; } .mz-scena__para-vlna:nth-child(3n + 2) { left: 33%; } .mz-scena__para-vlna:nth-child(3n + 3) { left: 64%; } @media (prefers-reduced-motion: no-preference) { .mz-scena__para { display: block; } /* Klid: vlnky stoupají jedna po druhé (každá o třetinu doby později). */ .mz-scena__para-vlna { animation: mz-scena-kurzy-para 3.6s ease-out infinite; animation-delay: calc(var(--mz-start, 0ms) + var(--mz-delka, 0.9s)); } .mz-scena__para-vlna:nth-child(2) { animation-delay: calc(var(--mz-start, 0ms) + var(--mz-delka, 0.9s) + 1.2s); } .mz-scena__para-vlna:nth-child(3) { animation-delay: calc(var(--mz-start, 0ms) + var(--mz-delka, 0.9s) + 2.4s); } @keyframes mz-scena-kurzy-para { 0% { opacity: 0; transform: translateY(15%) scale(0.85, 0.5); } 25% { opacity: 0.8; } 100% { opacity: 0; transform: translate(12%, -32%) scale(1.15, 1.05); } } /* Reakce hrnku: pára se vyvalí - tři vlnky navíc, rychlejší a vyšší. */ .mz-scena__para-vlna--navic { animation: none; } .mz-scena__obrazek.je-reakce ~ .mz-scena__para .mz-scena__para-vlna--navic { animation: mz-scena-kurzy-para-vyvalit 1.3s ease-out both; } .mz-scena__obrazek.je-reakce ~ .mz-scena__para .mz-scena__para-vlna--navic:nth-child(5) { animation-delay: 0.15s; } .mz-scena__obrazek.je-reakce ~ .mz-scena__para .mz-scena__para-vlna--navic:nth-child(6) { animation-delay: 0.3s; } @keyframes mz-scena-kurzy-para-vyvalit { 0% { opacity: 0; transform: translateY(10%) scale(0.9, 0.6); } 20% { opacity: 0.95; } 100% { opacity: 0; transform: translate(-8%, -60%) scale(1.3, 1.25); } } } /* ================================================================== * KURZY (2026-10-17, podkategorie Pro maminku): stoh knih, hrnek kávy * s párou, zápisník s propiskou, notebook s obrazovkou * ------------------------------------------------------------------ * Knihy padají jedna na druhou (nástup „pad“, sekce G) a poskakují vlnou * (reakce „poskoceni“ + klíč „vlna“), zápisník vyjede zdola a notebook * přijede zprava (sekce B). Tady je navíc: * vrstva jen při reakci (klíč jen_pri_reakci → třída * mz-scena__vrstva--pri-reakci): v klidu průhledná, vidět jen během * své reakce - rozsvícená obrazovka notebooku (online lekce); * pára nad hrnkem je v samostatné sekci PÁRA NAD HRNKEM níž; * reakce kurzy-rozsviceni (obrazovka bliknutím naskočí, svítí, zhasne), * kurzy-zakolebani-hrnku (jemné zakolébání, nejvýš 3°, ať se káva * „nevylije“) a kurzy-psani (propiska čmárá doprava jako při psaní, * zvedne se a vrátí; její stín jede s ní, jen se nezvedá); * stín zápisníku na notebooku (vrstva notebook-stin, 2026-10-20): má * stejný nástup „zprava“ i časy jako notebook, takže jede s ním, ale * objeví se až mezi 15 a 55 % příjezdu (jak se notebook blíží * k zápisníku) - dřív byl stín součástí notebooku a přijížděl dřív než * zápisník, který ho vrhá. * Bílá pára je vidět jen tam, kde je za ní něco tmavšího než bílá (káva, * knihy) - celá scéna se násobí barvou pruhu a bílá na pozadí zmizí; proto * stoupá nízko přes hřbety knih a má jemný teplý obrys. * Při „omezit pohyb“ se nehýbe nic a obrazovka i pára zůstanou schované. * ================================================================== */ .mz-scena__vrstva--pri-reakci .mz-scena__obrazek { opacity: 0; } @media (prefers-reduced-motion: no-preference) { /* Obrazovka notebooku se rozsvítí: krátké bliknutí jako při zapnutí, pak svítí a nakonec pomalu zhasne. */ .mz-scena__vrstva--pri-reakci .mz-scena__obrazek.je-reakce[data-reakce="kurzy-rozsviceni"] { animation: mz-reakce-kurzy-rozsviceni 3.4s ease-in-out both; } @keyframes mz-reakce-kurzy-rozsviceni { 0% { opacity: 0; } 5% { opacity: 0.75; } 8% { opacity: 0.35; } 14% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } /* Hrnek se jemně zakolébá kolem středu dna (puvod). */ .mz-scena__obrazek.je-reakce[data-reakce="kurzy-zakolebani-hrnku"] { animation: mz-reakce-kurzy-zakolebani-hrnku 1.2s ease-in-out both; } @keyframes mz-reakce-kurzy-zakolebani-hrnku { 0% { transform: none; } 14% { transform: rotate(-3deg); } 34% { transform: rotate(2.2deg); } 54% { transform: rotate(-1.3deg); } 74% { transform: rotate(0.6deg); } 100% { transform: none; } } /* Propiska čmárá: hrot kmitá sem a tam (otáčení kolem horního konce, puvod), přitom popojíždí doprava, pak se zvedne a vrátí. Posuny jsou v % obrázku přes celé plátno (0,62 % šířky ≈ 10 px). */ .mz-scena__obrazek.je-reakce[data-reakce="kurzy-psani"] { animation: mz-reakce-kurzy-psani 1.4s linear both; } .mz-scena__stin.je-reakce[data-reakce="kurzy-psani"] { animation: mz-reakce-kurzy-psani-stin 1.4s linear both; } @keyframes mz-reakce-kurzy-psani { 0% { transform: none; } 7% { transform: translate(0.08%, -0.3%) rotate(-4deg); } 14% { transform: translate(0.16%, 0.15%) rotate(3deg); } 21% { transform: translate(0.24%, -0.3%) rotate(-3.5deg); } 28% { transform: translate(0.32%, 0.15%) rotate(3deg); } 35% { transform: translate(0.4%, -0.3%) rotate(-3deg); } 42% { transform: translate(0.48%, 0.15%) rotate(2.5deg); } 50% { transform: translate(0.56%, -0.2%) rotate(-2deg); } 60% { transform: translate(0.62%, -0.7%) rotate(0deg); animation-timing-function: ease-in-out; } 82% { transform: translate(0.04%, -0.5%) rotate(0deg); animation-timing-function: ease-in; } 100% { transform: none; } } /* Stín zápisníku na notebooku: vrstva jede s notebookem (stejný nástup), obrázek se prolne, až se notebook přiblíží k zápisníku, a celý je vidět, když dojede. Výběr podle souboru jako u stínu bačkůrek (sekce H) - jiný takový stín scéna nemá. */ .mz-scena[data-scena="kurzy"] .mz-scena__obrazek[src*="notebook-stin"] { animation: mz-kurzy-stin-notebooku var(--mz-delka) linear var(--mz-start) both; } @keyframes mz-kurzy-stin-notebooku { 0%, 15% { opacity: 0; } 55%, 100% { opacity: 1; } } @keyframes mz-reakce-kurzy-psani-stin { 0% { transform: none; } 7% { transform: translateX(0.08%); } 14% { transform: translateX(0.16%); } 21% { transform: translateX(0.24%); } 28% { transform: translateX(0.32%); } 35% { transform: translateX(0.4%); } 42% { transform: translateX(0.48%); } 50% { transform: translateX(0.56%); } 60% { transform: translateX(0.62%); animation-timing-function: ease-in-out; } 82% { transform: translateX(0.04%); animation-timing-function: ease-in; } 100% { transform: none; } } } /* ================================================================== * ŠESTINEDĚLÍ (2026-10-17, podkategorie Pro maminku): složené pyžamo * (od 2026-10-20 JEDNA vrstva), srolovaná deka, hrnek čaje, tuba masti, * mušelín a snítka levandule (manifest dekor-vrstvy/sestinedeli/vrstvy.json, * řez skripty/dekor-vrstvy-rez-sestinedeli.py). * ------------------------------------------------------------------ * Pyžamo spadne (nástup „pad“, sekce G), hrnek se vynoří zdola (sekce B), * tuba dopadne natočená (pad + uhel), levandule se objeví (sekce I) a pak * se kolébá (klid „kolebani“, sekce G). Z čaje pořád stoupá pára - klíč * „para“ ze sekce Kurzy, nic vlastního. Tuba poskočí (poskok, sekce H), * levandule se rozhoupe (rozhoupani, sekce G). Tady je navíc: * nástup sestinedeli-snaseni → mušelín se snese shora jako * lehká látka: kolébá se ze strany * na stranu kolem bodu dopadu * (--mz-dopad dává PHP) a měkce * dosedne, * sestinedeli-priklopeni → deka se objeví se zvednutým * pravým koncem a přiklopí ho * k zemi (s malým dokmitem), * reakce sestinedeli-poskok-pyzama → celé pyžamo se přikrčí, * poskočí a dosedne (2026-10-20, * přání zadavatelky; dřív se * nadzvedávala jen košile), * sestinedeli-nadzvednuti-deky → deka nadzvedne pravý konec * a dopadne s malým dokmitem, * sestinedeli-nadechnuti → mušelín se nadechne (natáhne * nahoru) a splaskne, * sestinedeli-hrnek → hrnek stojí; reakce jen drží * čas, po který se z čaje vyvalí * víc páry (selektor „obrázek * s reakcí ~ pára“ v sekci Kurzy), * částice sestinedeli-kvitky → z levandule vyletí fialové * kvítky (skript, tvar „kvitek“). * Všechny reakce začínají i končí v základní poloze. * ⚠️ DEKA SE NAKLÁPÍ JEN KOLEM SVÉHO LEVÉHO KONCE (puvod / dopad = místo, * kde se o pyžamo opírá u země) a jen tak, že pravý konec jde NAHORU. * Levý konec role je na fotce schovaný za pyžamem a ve vrstvě je domalovaný * jen úzký proužek, který se ukáže, když pyžamo poskočí. Dokud se deka * přisouvala zprava (34 px) a houpala kolem středu dna, vyčníval ten konec * za pyžamem jako kus cizí látky - zadavatelka 20. 10. 2026: „nepřidávej * žádné kusy látek k ručníku“. Ze stejného důvodu začíná nástup deky až * v 480 ms, kdy pyžamo dopadne (dřív by její levý konec nic nezakrývalo). * ================================================================== */ /* Kvítky levandule: drobné pětilisté kvítky ve dvou odstínech fialové (paleta webu fialovou nemá, je to barva levandule z fotky). Tvar a třídu dává skript, let mají stejný jako srdíčka Pro maminku (sekce H). */ .mz-scena__srdicko.mz-scena__kvitek { color: #9b87c6; } .mz-scena__srdicko.mz-scena__kvitek--tmavy { color: #7e69a9; } .mz-scena__srdicko.mz-scena__kvitek svg { stroke-width: 1.4; } @media (prefers-reduced-motion: no-preference) { /* Mušelín se snese shora jako lehká látka: kolébá se kolem bodu dopadu (spodní hrana, --mz-dopad), každý kyv menší, a nakonec měkce dosedne (krátké stlačení). Posun v % plátna, takže sedí na každé velikosti. */ .mz-scena__vrstva[data-nastup="sestinedeli-snaseni"] { animation-name: mz-scena-nastup-sestinedeli-snaseni; animation-timing-function: linear; transform-origin: var(--mz-dopad, 50% 90%); } @keyframes mz-scena-nastup-sestinedeli-snaseni { 0% { opacity: 0; transform: translate(-1.1%, -24%) rotate(-6deg); animation-timing-function: ease-in-out; } 12% { opacity: 1; } 30% { transform: translate(0.8%, -16%) rotate(4.5deg); animation-timing-function: ease-in-out; } 52% { transform: translate(-0.5%, -8%) rotate(-3deg); animation-timing-function: ease-in-out; } 74% { transform: translate(0.25%, -2%) rotate(1.3deg); animation-timing-function: ease-in-out; } 88% { transform: scale(1.02, 0.97); animation-timing-function: ease-out; } 100% { opacity: 1; transform: none; } } /* Deka se objeví se zvednutým pravým koncem a přiklopí ho k zemi: otáčí se kolem levého konce u země (--mz-dopad = puvod deky), takže kus role schovaný za pyžamem jde jen dál za pyžamo. Malý dokmit, pravý konec nikdy nejde pod zem (úhel jen záporný). */ .mz-scena__vrstva[data-nastup="sestinedeli-priklopeni"] { animation-name: mz-scena-nastup-sestinedeli-priklopeni; animation-timing-function: linear; transform-origin: var(--mz-dopad, 50% 90%); } @keyframes mz-scena-nastup-sestinedeli-priklopeni { 0% { opacity: 0; transform: rotate(-7deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); } 25% { opacity: 1; } 55% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 70% { transform: rotate(-1.2deg); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); } 84% { transform: rotate(0deg); animation-timing-function: ease-out; } 92% { transform: rotate(-0.3deg); animation-timing-function: ease-in; } 100% { opacity: 1; transform: none; } } /* Celé pyžamo poskočí (bod = střed spodní hrany stohu, puvod): přikrčí se, vyskočí o ~10 px plátna, dosedne se stlačením a malým odskokem. Místa, která skok odkryje (pyžamo za hrnkem a tubou, levý konec deky za pyžamem), jsou ve vrstvách domalovaná. */ .mz-scena__obrazek.je-reakce[data-reakce="sestinedeli-poskok-pyzama"] { animation: mz-reakce-sestinedeli-poskok-pyzama 1.1s linear both; } @keyframes mz-reakce-sestinedeli-poskok-pyzama { 0% { transform: none; animation-timing-function: ease-out; } 12% { transform: scale(1.012, 0.982); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 34% { transform: translateY(-2.8%) scale(0.996, 1.014); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); } 52% { transform: translateY(0) scale(1.016, 0.978); animation-timing-function: ease-out; } 64% { transform: translateY(-0.7%) scale(0.998, 1.005); animation-timing-function: ease-in; } 76% { transform: translateY(0) scale(1.005, 0.994); animation-timing-function: ease-in-out; } 88% { transform: scale(0.999, 1.001); animation-timing-function: ease-in-out; } 100% { transform: none; } } /* Deka nadzvedne pravý konec (otáčí se kolem levého konce u pyžama, puvod) a dopadne s malým dokmitem. Úhel jen záporný = pravý konec nahoru, levý konec zůstává za pyžamem. */ .mz-scena__obrazek.je-reakce[data-reakce="sestinedeli-nadzvednuti-deky"] { animation: mz-reakce-sestinedeli-nadzvednuti-deky 1.1s linear both; } @keyframes mz-reakce-sestinedeli-nadzvednuti-deky { 0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 30% { transform: rotate(-3deg); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); } 52% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 66% { transform: rotate(-0.8deg); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); } 80% { transform: rotate(0deg); animation-timing-function: ease-in-out; } 100% { transform: none; } } /* Mušelín se nadechne: natáhne se nahoru (bod = střed spodní hrany) a splaskne s malým dokmitem. */ .mz-scena__obrazek.je-reakce[data-reakce="sestinedeli-nadechnuti"] { animation: mz-reakce-sestinedeli-nadechnuti 1s ease-in-out both; } @keyframes mz-reakce-sestinedeli-nadechnuti { 0% { transform: none; } 22% { transform: scale(0.99, 1.07); } 42% { transform: scale(1.02, 0.96); } 60% { transform: scale(0.996, 1.02); } 78% { transform: scale(1.003, 0.994); } 100% { transform: none; } } /* Hrnek se nehýbe (zadavatelka chtěla jen páru). Reakce s nehybnými snímky je tu proto, aby měl obrázek po dobu vyvalení páry třídu je-reakce (1,3 s + 0,3 s zpoždění poslední vlnky) a opakované najetí myší během ní páru nevypouštělo znovu. */ .mz-scena__obrazek.je-reakce[data-reakce="sestinedeli-hrnek"] { animation: mz-reakce-sestinedeli-hrnek 1.6s linear both; } @keyframes mz-reakce-sestinedeli-hrnek { from, to { transform: none; } } }