/* Emócie Emzáka (šablóna _mascot.html, brand manuál emzak.sk/brand → Emzák).
   Základ postavičky (telo, tykadlá, žmurkanie, „work“ a „party“) je v emzak.css. Súradnice sú v mriežke 48 × 48. */

.mz-ink { fill: var(--ink); }
.mz-mk { fill: var(--marker); }
.mz-pink { fill: #ff9db5; }
.mz-tear { fill: #fff; }
.mz-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mz-shut { stroke-width: 1.9; }
.mz-bubble .mz-line { stroke-width: 1.35; }
.mz-wave1, .mz-wave2 { stroke-width: 1.3; }
.mz-z { stroke-width: 1.1; }
.mz-bubble { transform-box: view-box; transform-origin: 40px 3px; }
.mz-beat, .mz-rise, .mz-spark, .mz-z { transform-box: view-box; transform-origin: 0 0; }

/* pohyb celej postavičky okolo päty */
.mz-wave .mz-float, .mz-listen .mz-float, .mz-think .mz-float, .mz-surprised .mz-float, .mz-love .mz-float,
.mz-proud .mz-float, .mz-confused .mz-float, .mz-sad .mz-float, .mz-sleep .mz-float { transform-origin: 24px 40px; }

/* pozdrav: poskočí, zamáva tykadlom, žmurkne */
.mz-wave .mz-float { animation: mz-greet-hop 3.2s ease-in-out infinite; }
.mz-wave .mz-ant-r { animation: mz-wave-ant 3.2s ease-in-out infinite; }
.mz-wave .mz-eye { animation: mz-wink 3.2s infinite; }

/* počúva: nastražené tykadlá, prikyvuje, tykadlo prijíma */
.mz-listen .mz-float { animation: mz-nod 2.4s ease-in-out infinite; }
.mz-listen .mz-ant-l { animation: mz-twitch 2.4s ease-in-out infinite; }
.mz-wave1 { animation: mz-fade 1.6s ease-out infinite; }
.mz-wave2 { animation: mz-fade 1.6s ease-out .35s infinite; }

/* premýšľa: pozerá hore, tykadlá sa striedajú, v bubline pribúdajú bodky */
.mz-think .mz-float { animation: mz-ponder 4s ease-in-out infinite alternate; }
.mz-think .mz-ant-l { animation: mz-tilt-l 2.4s ease-in-out infinite; }
.mz-think .mz-ant-r { animation: mz-tilt-r 2.4s ease-in-out 1.2s infinite; }
.mz-think .mz-look { animation: mz-gaze 4s ease-in-out infinite alternate; }
.mz-dot { animation: mz-dot 2.4s infinite; }
.mz-dot:nth-of-type(2) { animation-delay: .3s; }
.mz-dot:nth-of-type(3) { animation-delay: .6s; }

/* prekvapený: natiahne sa, oko sa zväčší, vyskočí výkričník */
.mz-surprised .mz-float { animation: mz-pop 3s ease-out infinite; }
.mz-surprised .mz-ant-l { animation: mz-perk-l 3s ease-out infinite; }
.mz-surprised .mz-ant-r { animation: mz-perk-r 3s ease-out infinite; }
.mz-surprised .mz-eye { animation: mz-big 3s ease-out infinite; }
.mz-surprised .mz-look { transform-box: fill-box; transform-origin: center; animation: mz-small 3s ease-out infinite; }
.mz-surprised .mz-bubble { animation: mz-bubble-pop 3s ease-out infinite; }

/* srdiečko: líčka sa rozžiaria, srdce bije, stúpajú srdiečka */
.mz-love .mz-float { animation: mz-sway 2.4s ease-in-out infinite; }
.mz-love .mz-cheek { animation: mz-blush 2.4s ease-in-out infinite; }
.mz-beat { animation: mz-beat 1.2s ease-in-out infinite; }
.mz-rise { animation: mz-rise 2.4s ease-out infinite; }

/* hrdý: nafúkne sa, iskry */
.mz-proud .mz-float { animation: mz-puff 3s ease-in-out infinite; }
.mz-proud .mz-cheek { opacity: .6; }
.mz-spark { animation: mz-twinkle 2s ease-in-out infinite; }
.mz-s1 { animation-delay: .5s; }
.mz-s2 { animation-delay: 1s; }
.mz-s3 { animation-delay: 1.5s; }

/* zmätený: kýve hlavou, oko blúdi, otáznik sa kýve */
.mz-confused .mz-float { animation: mz-puzzle 3.6s ease-in-out infinite; }
.mz-confused .mz-ant-l { animation: mz-tilt-l 1.8s ease-in-out infinite; }
.mz-confused .mz-look { animation: mz-wander 3.6s ease-in-out infinite; }
.mz-confused .mz-bubble { animation: mz-wiggle 1.8s ease-in-out infinite; }

/* smutný: ovisnuté tykadlá, vzdych, jedna slzička */
.mz-sad .mz-float { animation: mz-sigh 4s ease-in-out infinite; }
.mz-sad .mz-ant-l { animation: mz-droop-l 4s ease-in-out infinite; }
.mz-sad .mz-ant-r { animation: mz-droop-r 4s ease-in-out infinite; }
.mz-tear { animation: mz-tear 4s ease-in infinite; }

/* spí: dýcha, stúpajú z */
.mz-sleep .mz-float { animation: mz-breathe 4s ease-in-out infinite; }
.mz-z { animation: mz-z 2.8s ease-out infinite; }
.mz-later { animation-delay: 1.4s; }

@keyframes mz-greet-hop { 0%, 16%, 100% { transform: none; } 5% { transform: scale(1.04, .95); } 10% { transform: translateY(-3px) scale(.97, 1.03); } }
@keyframes mz-wave-ant { 0%, 14%, 54%, 100% { transform: rotate(0); } 22%, 38% { transform: rotate(30deg); } 30%, 46% { transform: rotate(-6deg); } }
@keyframes mz-wink { 0%, 62%, 74%, 100% { transform: scaleY(1); } 66%, 70% { transform: scaleY(.12); } }
@keyframes mz-nod { 0%, 16%, 32%, 52%, 100% { transform: rotate(4deg); } 8%, 24%, 40% { transform: translateY(1px) rotate(5.5deg); } }
@keyframes mz-twitch { 0%, 60%, 80%, 100% { transform: rotate(0); } 70% { transform: rotate(8deg); } }
@keyframes mz-fade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mz-ponder { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes mz-tilt-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes mz-tilt-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes mz-gaze { from { transform: none; } to { transform: translate(.8px, -.4px); } }
@keyframes mz-dot { 0%, 12%, 96%, 100% { opacity: .2; } 30%, 78% { opacity: 1; } }
@keyframes mz-pop { 0%, 24%, 100% { transform: none; } 8% { transform: translateY(-2px) scale(.94, 1.08); } 16% { transform: scale(1.02, .98); } }
@keyframes mz-perk-l { 0%, 92%, 100% { transform: rotate(0); } 8%, 80% { transform: rotate(16deg); } }
@keyframes mz-perk-r { 0%, 92%, 100% { transform: rotate(0); } 8%, 80% { transform: rotate(-16deg); } }
@keyframes mz-big { 0%, 92%, 100% { transform: scale(1); } 8%, 80% { transform: scale(1.12); } }
@keyframes mz-small { 0%, 92%, 100% { transform: scale(1); } 8%, 80% { transform: scale(.7); } }
@keyframes mz-bubble-pop { 0%, 6%, 92%, 100% { transform: scale(0); } 14% { transform: scale(1.15); } 20%, 82% { transform: scale(1); } }
@keyframes mz-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-1px); } }
@keyframes mz-blush { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mz-beat { 0%, 40%, 100% { transform: scale(.9); } 15% { transform: scale(1.12); } 28% { transform: scale(.96); } }
@keyframes mz-rise { 0% { opacity: 0; transform: translate(0, 3px) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, -7px) scale(1); } }
@keyframes mz-puff { 0%, 100% { transform: none; } 30%, 70% { transform: translateY(-1px) scale(1.05, 1.03); } }
@keyframes mz-twinkle { 0%, 100% { transform: scale(0) rotate(0); } 50% { transform: scale(1) rotate(45deg); } }
@keyframes mz-puzzle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } }
@keyframes mz-wander { 0%, 30%, 100% { transform: none; } 45%, 80% { transform: translateX(-4.2px); } }
@keyframes mz-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes mz-sigh { 0%, 100% { transform: none; } 45%, 60% { transform: scale(1.03, .95); } }
@keyframes mz-droop-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes mz-droop-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes mz-tear { 0%, 30% { opacity: 0; transform: none; } 40% { opacity: 1; transform: none; }
  82% { opacity: 1; transform: translateY(5px); } 92%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes mz-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, 1.045); } }
@keyframes mz-z { 0% { opacity: 0; transform: translate(0, 3px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, -3px) scale(1); } }

@media (prefers-reduced-motion: reduce) { .mz *, .mz .mz-float { animation: none !important; } }