/* provino: Jimy vettoriale (stesso disegno di mascotte.html) */
@property --c1{syntax:'<color>';inherits:true;initial-value:#cdb4ff}
@property --c2{syntax:'<color>';inherits:true;initial-value:#8a66ee}
@property --c3{syntax:'<color>';inherits:true;initial-value:#6f4fd6}
@property --aura{syntax:'<color>';inherits:true;initial-value:#c98bdb}
.j{display:block;transition:--c1 .6s,--c2 .6s,--c3 .6s,--aura .6s}
.j svg{display:block;width:100%;height:auto;overflow:visible}
/* animazioni per umore */
svg .all{transform-box:fill-box;transform-origin:50% 100%}
svg .eyes{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4.2s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
svg.base .all{animation:bob 3.2s ease-in-out infinite}
svg.felice .all{animation:hop 1.1s cubic-bezier(.3,0,.3,1) infinite}
svg.carico .all{animation:pump .8s ease-in-out infinite}
svg.triste .all{animation:sway 4.5s ease-in-out infinite}
svg.arrabbiato .all{animation:shake .45s linear infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-14px) scale(.97,1.03)}60%{transform:translateY(0) scale(1.04,.96)}}
@keyframes pump{50%{transform:translateY(-4px) scale(1.02)}}
@keyframes sway{50%{transform:translateY(3px) rotate(-2deg)}}
@keyframes shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
svg .wing{transform-box:fill-box;transform-origin:100% 60%;animation:flap .3s ease-in-out infinite alternate}
svg .wing.r{transform-origin:0 60%}
svg.triste .wing{animation-duration:1.6s!important}
@keyframes flap{to{transform:scaleX(.8)}}
svg .legs{transform-box:fill-box;transform-origin:50% 0;animation:dangle 2.4s ease-in-out infinite}
@keyframes dangle{50%{transform:rotate(4deg)}}
svg .shadow{transform-box:fill-box;transform-origin:50% 50%}
svg.base .shadow{animation:sh 3.2s ease-in-out infinite}svg.felice .shadow{animation:sh 1.1s cubic-bezier(.3,0,.3,1) infinite}
@keyframes sh{30%,50%{transform:scaleX(.82);opacity:.18}}
svg .fx{animation:tw 1.4s ease-in-out infinite}
@keyframes tw{50%{opacity:.3}}
/* vita: sguardo che segue, tocco, cambio d'umore */
svg .pup{transform:translate(var(--px,0px),var(--py,0px));transition:transform .2s ease-out}
.j svg{transform-origin:50% 88%}
.j.tap svg{animation:boing .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes boing{25%{transform:scale(1.12,.86)}55%{transform:scale(.94,1.08)}}
.j.swap svg{animation:swap .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes swap{0%{transform:scale(.88,1.1);opacity:.5}}
.j{cursor:pointer;touch-action:manipulation}
@media(prefers-reduced-motion:reduce){.j *,.j svg{animation:none!important;transition:none!important}}
/* Jimy in PLASTILINA (jimy-clay.js): bolla blu, immagine ferma + clip sopra; come .jimy-clay nell'app (globals.css) */
.j .jc{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:28%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#13213a,#081221 70%)}
.j .jc img,.j .jc video{position:absolute;inset:0;width:100%;height:100%;display:block;
 translate:calc(17% + var(--mx,0)*3%) calc(var(--my,0)*2%);rotate:calc(var(--mx,0)*4deg);transition:translate .4s ease,rotate .4s ease}
.j .jc video{opacity:0}.j .jc.play video{opacity:1}
.j .jc:not(.play) img{animation:clay-float 4.5s ease-in-out infinite}
@keyframes clay-float{50%{transform:translateY(-3.5%)}}
.j.tap .jc{animation:boing .55s cubic-bezier(.3,1.5,.5,1)}
.j.swap .jc{animation:swap .4s cubic-bezier(.3,1.4,.5,1)}
#stage .jc img{opacity:1;transform:none;transition:translate .4s ease,rotate .4s ease}
#stage .jc:not(.play) img{animation:clay-float 4.5s ease-in-out infinite}
#stage .j{inset:auto;position:absolute;left:50%;top:50%;width:68%;height:auto;translate:-50% -50%}
@media(prefers-reduced-motion:reduce){.j .jc,.j .jc img{animation:none!important;transition:none!important}}

/* Logo: antennine che dondolano e ogni ~4 s fanno «boing» a molla; al passaggio del mouse ballano (owner 12/10) */
.ant{transform-box:fill-box;animation:ant-l 4.2s ease-in-out infinite}
.ant-l{transform-origin:100% 100%}
.ant-r{transform-origin:0% 100%;animation-name:ant-r;animation-delay:.12s}
a:hover .ant,.ant:hover{animation-duration:1.1s}
@keyframes ant-l{0%,100%{rotate:0deg}20%{rotate:-7deg}40%{rotate:3deg}55%{rotate:0deg}62%{rotate:14deg}68%{rotate:-10deg}74%{rotate:7deg}80%{rotate:-4deg}86%{rotate:2deg}92%{rotate:0deg}}
@keyframes ant-r{0%,100%{rotate:0deg}20%{rotate:7deg}40%{rotate:-3deg}55%{rotate:0deg}62%{rotate:-14deg}68%{rotate:10deg}74%{rotate:-7deg}80%{rotate:4deg}86%{rotate:-2deg}92%{rotate:0deg}}
@media (prefers-reduced-motion:reduce){.ant{animation:none}}