/* Mascot motion. Pure CSS; mascots.js only feeds --gx/--gy (gaze) and toggles .is-hot. Reduced motion stops every loop. */
.mk{display:block;width:100%;height:auto;overflow:visible;--gx:0;--gy:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mk *{transform-box:fill-box}
.mk .m-shadow{fill:#000;opacity:.32;transform-origin:50% 50%;animation:mk-shadow 4.8s ease-in-out infinite}
.mk .m-float{transform-origin:50% 100%;animation:mk-float 4.8s ease-in-out infinite}
.mk .m-eye{transform-origin:50% 50%;animation:mk-blink 5.6s infinite}
.mk-lapka .m-eye{animation-delay:-1.1s}.mk-mero .m-eye{animation-delay:-3.4s}.mk-bagoly .m-eye{animation-delay:-4.6s}
.mk .m-pupil{transform:translate(calc(var(--gx) * 1px),calc(var(--gy) * 1px));transition:transform .14s ease-out}
.mk .m-mouth{transition:opacity .2s}
.mk .m-grin{opacity:0}
.mk.is-hot .m-grin{opacity:1}.mk.is-hot .m-smile{opacity:0}
.mk .m-arm-l{transform-origin:100% 50%;animation:mk-wave 7s ease-in-out infinite}
.mk .m-arm-r{transform-origin:0% 50%}
.mk .m-leg{transform-origin:50% 0;animation:mk-step 4.8s ease-in-out infinite}
.mk .m-leg.r{animation-delay:-2.4s}
.mk.is-hot .m-float{animation:mk-hop .7s cubic-bezier(.3,1.6,.5,1) 1,mk-float 4.8s ease-in-out .7s infinite}
.mk.is-hot .m-arm-l{animation:mk-wave-fast .5s ease-in-out 3}

/* Lapka: stamp comes down, tick draws, ink ring pops */
.mk-lapka .m-prop{transform-origin:50% 100%;transition:transform .18s}
.mk-lapka.is-hot .m-arm-r{animation:mk-stamp-arm .9s ease-in-out 1}
.mk-lapka .m-tick{stroke-dasharray:1;stroke-dashoffset:1}
.mk-lapka.is-hot .m-tick{animation:mk-draw .5s .3s ease-out forwards}
.mk-lapka .m-burst{opacity:0;transform-origin:50% 50%}
.mk-lapka.is-hot .m-burst{animation:mk-pop .9s .35s ease-out 1}
.mk-lapka .m-pencil{transform-origin:50% 90%;animation:mk-pencil 3.6s ease-in-out infinite}
.mk-lapka .m-lines rect:first-child{animation:mk-scribble 4.8s ease-in-out infinite;transform-origin:0 50%}

/* Mérő: tape rolls out and back */
.mk-mero .m-tape{transform-origin:0 50%;animation:mk-tape 6s ease-in-out infinite}
.mk-mero.is-hot .m-tape{animation:mk-tape-hot 1.3s cubic-bezier(.3,1.4,.5,1) 1 forwards}
.mk-mero .m-hat{transform-origin:50% 100%;animation:mk-hat 4.8s ease-in-out infinite}
.mk-mero.is-hot .m-hat{animation:mk-hat-pop .6s ease-out 1}

/* Bagoly: dial runs a full day in 24 seconds, wings flap, stars twinkle */
.mk-bagoly .m-dial{transform-origin:50% 100%;animation:mk-spin 24s linear infinite}
.mk-bagoly .m-arm-l,.mk-bagoly .m-arm-r{animation:mk-flap 5.4s ease-in-out infinite}
.mk-bagoly .m-arm-l{transform-origin:100% 20%}.mk-bagoly .m-arm-r{transform-origin:0% 20%;animation-delay:-.1s}
.mk-bagoly.is-hot .m-arm-l,.mk-bagoly.is-hot .m-arm-r{animation:mk-flap-fast .5s ease-in-out 4}
.mk-bagoly .m-star{transform-origin:50% 50%;animation:mk-twinkle 2.6s ease-in-out infinite}
.mk-bagoly .m-star.s2{animation-delay:-.9s}.mk-bagoly .m-star.s3{animation-delay:-1.7s}
.mk-bagoly.is-hot .m-star{animation-duration:.7s}
.mk-bagoly .m-body{transform-origin:50% 100%;animation:mk-breathe 4.8s ease-in-out infinite}

@keyframes mk-float{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes mk-shadow{0%,100%{transform:scale(1);opacity:.32}50%{transform:scale(.84);opacity:.2}}
@keyframes mk-blink{0%,41%,45%,100%{transform:scaleY(1)}43%{transform:scaleY(.08)}}
@keyframes mk-wave{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(-24deg)}74%{transform:rotate(8deg)}80%{transform:rotate(-20deg)}86%{transform:rotate(4deg)}92%{transform:rotate(0)}}
@keyframes mk-wave-fast{0%,100%{transform:rotate(0)}35%{transform:rotate(-30deg)}70%{transform:rotate(10deg)}}
@keyframes mk-step{0%,100%{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}
@keyframes mk-hop{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(8px) scale(1.06,.9)}55%{transform:translateY(-36px) scale(.96,1.06)}100%{transform:translateY(0) scale(1,1)}}
@keyframes mk-stamp-arm{0%,100%{transform:rotate(0)}30%{transform:rotate(-26deg) translateY(-10px)}55%{transform:rotate(18deg) translateY(14px)}70%{transform:rotate(14deg) translateY(16px)}}
@keyframes mk-draw{to{stroke-dashoffset:0}}
@keyframes mk-pop{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.4)}}
@keyframes mk-pencil{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(-17deg)}}
@keyframes mk-scribble{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.7)}}
@keyframes mk-tape{0%,100%{transform:scaleX(.5)}45%,60%{transform:scaleX(1)}}
@keyframes mk-tape-hot{0%{transform:scaleX(.5)}100%{transform:scaleX(1.18)}}
@keyframes mk-hat{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes mk-hat-pop{0%{transform:translateY(0)}40%{transform:translateY(-26px) rotate(-8deg)}100%{transform:translateY(0)}}
@keyframes mk-spin{to{transform:rotate(360deg)}}
@keyframes mk-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes mk-flap-fast{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}}
@keyframes mk-twinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.5}50%{transform:scale(1.2) rotate(45deg);opacity:1}}
@keyframes mk-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,1.015)}}

@media (prefers-reduced-motion:reduce){.mk *{animation:none!important;transition:none!important}.mk-lapka .m-tick{stroke-dashoffset:0}}