/* Keep the familiar paper-cut figures, adding depth and short toy-like movements. */
.roamers[data-joyful-friends] .roamer{perspective:520px;touch-action:manipulation;isolation:isolate}
.roamers[data-joyful-friends] .roam-body{filter:drop-shadow(2px 3px 1px #2c285d26);backface-visibility:visible;transform-style:preserve-3d}
.roamers[data-joyful-friends] .roam-flip{perspective:520px;transform-style:preserve-3d}
.roamers[data-joyful-friends] .roam-shadow{height:9px;bottom:1px;background:radial-gradient(ellipse,#3e355f55,transparent 70%);filter:blur(1px)}
.roamers[data-joyful-friends] .roamer:focus-visible{outline:3px solid #8c64bc;outline-offset:4px;border-radius:17px}
.roamers[data-joyful-friends] .roamer:active{filter:brightness(1.06)}
.roamers[data-joyful-friends] .roamer[class*="jf-"] .roam-body{rotate:none;translate:none;scale:none;transform-origin:50% 85%;animation-timing-function:ease-in-out!important;animation-fill-mode:both!important}
.roamers[data-joyful-friends] .jf-wave .roam-body{animation:jfWave 1.6s!important}
.roamers[data-joyful-friends] .jf-hop .roam-body{animation:jfHop 1.9s!important}
.roamers[data-joyful-friends] .jf-twirl .roam-body{animation:jfTwirl 1.9s!important}
.roamers[data-joyful-friends] .jf-slide .roam-body{animation:jfSlide 1.9s!important}
.roamers[data-joyful-friends] .jf-bow .roam-body{animation:jfBow 1.9s!important}
.roamers[data-joyful-friends] .jf-freeze .roam-body{animation:jfFreeze 1.9s!important}
.roamers[data-joyful-friends] .jf-juggle .roam-body{animation:jfJuggle 2.4s!important}
.roamers[data-joyful-friends] .jf-breakdance .roam-body{animation:jfPippoDance 4s!important;transform-origin:50% 77%}
.roamers[data-joyful-friends] .jf-breakdance[data-jf-who="bello"] .roam-body{animation-name:jfBelloDance!important}
.roamers[data-joyful-friends] .jf-breakdance[data-jf-who="kid"] .roam-body{animation-name:jfKidDance!important}
.roamers[data-joyful-friends] .jf-breakdance .roam-shadow{animation:jfDanceShadow 4s both}
.roamers[data-joyful-friends] .jf-hop .roam-shadow{animation:jfHopShadow .63s 3}
.roamers[data-joyful-friends] .jf-prop{position:absolute;left:calc(20% + var(--jf-index)*22%);top:8%;width:19px;height:19px;pointer-events:none;animation:jfStarJuggle .8s ease-in-out calc(var(--jf-index)*-.27s) 3;filter:drop-shadow(2px 4px 1px #715d5c30)}
.jf-prop svg{display:block;width:100%;height:100%}
body.gentle-world #gentleTravelStage .gentle-team>span.jf-stage-breakdance,
body.gentle-world #gentleTravelStage .gentle-bello.jf-stage-breakdance,
.mlw-welcome-friends>span.jf-stage-breakdance,
.mlw-joy .mlw-joy-friend.jf-stage-breakdance{transform-origin:50% 78%;rotate:none;translate:none;scale:none;animation:jfPippoDance 4s ease-in-out var(--jf-delay,0ms) both!important;filter:drop-shadow(4px 6px 2px #34405938);perspective:650px}
body.gentle-world #gentleTravelStage .jf-stage-breakdance[data-jf-who="bello"],
.mlw-welcome-friends>.jf-stage-breakdance[data-jf-who="bello"],
.mlw-joy .jf-stage-breakdance[data-jf-who="bello"]{animation-name:jfBelloDance!important}
body.gentle-world #gentleTravelStage .jf-stage-breakdance[data-jf-who="kid"],
.mlw-welcome-friends>.jf-stage-breakdance[data-jf-who="kid"],
.mlw-joy .jf-stage-breakdance[data-jf-who="kid"]{animation-name:jfKidDance!important}
/* Arrival stays on the native spans. The short festival lives on inner drawings. */
.mlw-clear .reunion-stage.play.jf-festival .rs-kid{animation:mlwReunionKid 4.5s ease-in-out forwards!important}
.mlw-clear .reunion-stage.play.jf-festival .rs-pippo{animation:mlwReunionPippo 4s ease-in-out forwards!important}
.mlw-clear .reunion-stage.play.jf-festival .rs-bello{animation:mlwReunionBello 4s ease-in-out forwards!important}
.jf-festival-dance{transform-origin:50% 78%;transform-box:view-box;animation:jfPippoDance 4s ease-in-out var(--jf-delay,4500ms) both!important}
.jf-festival-dance[data-jf-who="bello"]{animation-name:jfBelloDance!important}
.jf-festival-dance[data-jf-who="kid"]{animation-name:jfKidDance!important}
#gentleTravelStage{perspective:950px;box-shadow:inset 0 -12px 24px #53676116,0 8px 0 #8d9d8d12}
.gentle-team>[data-char],.gentle-bello,.mlw-welcome-friends>[data-char]{filter:drop-shadow(3px 5px 2px #38415025);transform-style:preserve-3d}
@keyframes jfWave{0%,100%{transform:rotateZ(0)}20%{transform:translateY(-7px) rotateZ(-13deg) rotateY(-17deg)}45%{transform:translateY(-3px) rotateZ(11deg) rotateY(15deg)}70%{transform:translateY(-6px) rotateZ(-9deg)}}
@keyframes jfHop{0%,32%,65%,100%{transform:translateY(0) scale(1.03,.94)}16%,48%,82%{transform:translateY(-26px) rotateY(14deg) scale(.95,1.06)}}
@keyframes jfTwirl{0%{transform:rotateY(0) rotateZ(0)}25%{transform:translateY(-12px) rotateY(160deg) rotateZ(-10deg)}65%{transform:translateY(-5px) rotateY(570deg) rotateZ(8deg)}100%{transform:rotateY(720deg) rotateZ(0)}}
@keyframes jfSlide{0%,100%{transform:translateX(0) rotateZ(0)}18%{transform:translateX(-7px) rotateZ(-14deg)}35%{transform:translateX(4px) translateY(6px) rotateZ(76deg) rotateX(15deg)}64%{transform:translateX(21px) translateY(6px) rotateZ(76deg) rotateX(15deg)}84%{transform:translateX(10px) translateY(-12px) rotateZ(-8deg)}}
@keyframes jfBow{0%,100%{transform:rotateX(0) rotateZ(0)}22%,52%{transform:rotateX(30deg) rotateZ(-13deg) scaleY(.78)}37%{transform:rotateX(25deg) rotateZ(8deg) scaleY(.78)}74%{transform:translateY(-14px) rotateZ(7deg)}}
@keyframes jfFreeze{0%,100%{transform:rotateZ(0)}25%{transform:translateY(-8px) rotateZ(-24deg) rotateY(-20deg)}45%,70%{transform:translateY(-7px) rotateZ(26deg) rotateY(20deg)}86%{transform:translateY(-15px) rotateZ(-6deg)}}
@keyframes jfJuggle{0%,100%{transform:rotateZ(0)}20%,60%{transform:rotateZ(-9deg) rotateY(-12deg)}40%,80%{transform:rotateZ(9deg) rotateY(12deg)}}
@keyframes jfStarJuggle{0%,100%{transform:translateY(0) rotateZ(0) scale(.8)}50%{transform:translateY(-47px) rotateZ(180deg) scale(1.15)}}
/* Three friends, three moves: top rock and a freeze, paw steps, then an arm wave.
   The last beat is shared. Moving the native limbs keeps the characters recognisable. */
.jf-limb{transform-box:view-box;will-change:transform}
.jf-breakdance .jf-limb,.jf-stage-breakdance .jf-limb,.jf-festival-dance .jf-limb{animation-duration:4s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-delay:var(--jf-delay,0ms)}
.roamers[data-joyful-friends] .jf-breakdance .roam-body,.roamers[data-joyful-friends] .jf-breakdance .roam-shadow{animation-delay:var(--jf-delay,0ms)!important}
.jf-festival-dance .jf-limb{animation-delay:var(--jf-delay,4500ms)}
.tp-dance .jf-limb{animation-duration:2s;animation-timing-function:ease-in-out;animation-fill-mode:both}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="pippo"] .jf-left-arm{animation-name:jfFlipperLeft}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="pippo"] .jf-right-arm{animation-name:jfFlipperRight}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="pippo"] .jf-left-foot{animation-name:jfStepLeft}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="pippo"] .jf-right-foot{animation-name:jfStepRight}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="bello"] .jf-left-arm{animation-name:jfPawLeft}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="bello"] .jf-right-arm{animation-name:jfPawRight}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="bello"] .jf-left-ear{animation-name:jfEarLeft}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="bello"] .jf-right-ear{animation-name:jfEarRight}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="bello"] .jf-tail{animation-name:jfTailDance}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="kid"] .jf-left-arm{animation-name:jfArmLeft}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="kid"] .jf-right-arm{animation-name:jfArmRight}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="kid"] .jf-left-foot{animation-name:jfStepLeft}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) svg[data-jf-who="kid"] .jf-right-foot{animation-name:jfStepRight}
.gentle-team .jf-stage-breakdance svg[data-jf-who="pippo"] .jf-left-arm{animation-name:jfFlipperMeet}
.gentle-team .jf-stage-breakdance svg[data-jf-who="kid"] .jf-right-arm{animation-name:jfArmMeet}
.gentle-team:has(>.jf-stage-breakdance)::after{content:'✦';position:absolute;z-index:2;left:49%;top:57%;color:#e4ac53;font-size:clamp(20px,2vw,34px);line-height:1;opacity:0;pointer-events:none;text-shadow:0 2px #fff6db;animation:jfPairHighFive 4s ease-out both}
.jf-wave .jf-right-arm{animation:jfHelloArm .4s ease-in-out 4}
.jf-bow .jf-tail{animation:jfTailWag .22s ease-in-out 8 alternate}









@keyframes jfEarLeft{0%,100%{transform:none}9%,25%,41%,65%{transform:rotate(14deg)}17%,33%,52%{transform:rotate(-7deg)}85%,95%{transform:rotate(-9deg)}}
@keyframes jfEarRight{0%,100%{transform:none}9%,25%,41%,65%{transform:rotate(7deg)}17%,33%,52%{transform:rotate(-14deg)}85%,95%{transform:rotate(9deg)}}
@keyframes jfTailDance{0%,100%{transform:none}8%,24%,40%,56%,72%,88%{transform:rotate(-25deg)}16%,32%,48%,64%,80%,95%{transform:rotate(25deg)}}




@keyframes jfPairHighFive{0%,79%,100%{opacity:0;transform:scale(.4)}85%,94%{opacity:1;transform:translateY(-5px) scale(1.2) rotate(-12deg)}}
@keyframes jfHelloArm{0%,100%{transform:none}50%{transform:rotate(-28deg)}}
@keyframes jfTailWag{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes jfDanceShadow{0%,100%{transform:scaleX(1);opacity:.8}10%,89%{transform:scaleX(.7);opacity:.35}23%,61%,79%{transform:scaleX(1.6);opacity:.95}}
@keyframes jfHopShadow{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.6);opacity:.3}}
/* The navigation remains above the friends; their tricks never open a dialog. */
@media(max-width:900px){.mlw-clear .roamers{bottom:calc(74px + env(safe-area-inset-bottom,0px))}.roamers[data-joyful-friends] .roam-bubble{max-width:135px;font-size:10px;padding:6px 8px}.roamers[data-joyful-friends] .jf-prop{width:16px;height:16px}}
body.motion-off .roamers[data-joyful-friends] .roam-body,
body.motion-off .roamers[data-joyful-friends] .roam-shadow,
body.motion-off .roamers[data-joyful-friends] .jf-prop,
body.motion-off .jf-stage-breakdance,body.motion-off .jf-festival-dance,body.motion-off .reunion-stage.play.jf-festival>[data-char],body.motion-off .jf-limb,body.motion-off .gentle-team::after{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.roamers[data-joyful-friends] .roam-body,.roamers[data-joyful-friends] .roam-shadow,.roamers[data-joyful-friends] .jf-prop,.jf-stage-breakdance,.jf-festival-dance,.reunion-stage.play.jf-festival>[data-char],.jf-limb,.gentle-team::after{animation:none!important;transform:none!important}}
/* Eight counted beats: step-touch, cross-step, low freeze, spring, high-five.
   Preparations happen on each offbeat; the weight lands with the drum. */
@keyframes jfPippoDance{
  0%,100%{transform:none;transform-origin:50% 92%}
  6.25%,18.75%,31.25%,43.75%{transform:translateY(3px) scale(1.025,.97)}
  12.5%{transform:translateX(-7px) rotate(-6deg);transform-origin:36% 92%}
  25%{transform:translateX(7px) rotate(6deg);transform-origin:64% 92%}
  37.5%{transform:translate(-8px,1px) rotate(-9deg);transform-origin:36% 92%}
  50%{transform:translate(8px,1px) rotate(9deg);transform-origin:64% 92%}
  56.25%{transform:translate(-2px,5px) rotate(-6deg) scaleY(.94)}
  62.5%{transform:translate(-4px,6px) rotate(-12deg) scaleY(.9)}
  68.75%{transform:translateY(5px) scale(1.04,.94)}
  75%{transform:translateY(-14px) scale(.98,1.025)}
  81.25%{transform:translateY(3px) scale(1.04,.95)}
  87.5%,93.75%{transform:translateX(3px) rotate(3deg)}
}
@keyframes jfKidDance{
  0%,100%{transform:none;transform-origin:50% 92%}
  6.25%,18.75%,31.25%,43.75%{transform:translateY(4px) scale(1.025,.96)}
  12.5%{transform:translateX(-6px) rotate(-5deg);transform-origin:40% 92%}
  25%{transform:translateX(6px) rotate(5deg);transform-origin:60% 92%}
  37.5%{transform:translateX(-8px) rotate(-8deg)}
  50%{transform:translateX(8px) rotate(8deg)}
  56.25%{transform:translate(-2px,4px) rotate(-5deg)}
  62.5%{transform:translate(-4px,5px) rotate(-10deg)}
  68.75%{transform:translateY(6px) scale(1.04,.94)}
  75%{transform:translateY(-16px) scale(.98,1.02)}
  81.25%{transform:translateY(3px) scale(1.04,.95)}
  87.5%,93.75%{transform:translateX(-3px) rotate(-3deg)}
}
@keyframes jfBelloDance{
  0%,100%{transform:none;transform-origin:50% 94%}
  6.25%,18.75%,31.25%,43.75%{transform:translateY(3px) scaleY(.96)}
  12.5%,37.5%{transform:translateX(-5px) rotate(-5deg)}
  25%,50%{transform:translateX(5px) rotate(5deg)}
  56.25%{transform:translateY(5px) rotate(-4deg) scaleY(.92)}
  62.5%{transform:translateY(9px) scale(1.05,.84)}
  68.75%{transform:translateY(5px) scale(1.035,.93)}
  75%{transform:translateY(-11px) rotate(-2deg)}
  81.25%{transform:translateY(3px) scale(1.04,.95)}
  87.5%,93.75%{transform:translateY(-2px) rotate(3deg)}
}
@keyframes jfFlipperLeft{0%,100%{transform:none}12.5%,37.5%{transform:rotate(42deg)}25%,50%{transform:rotate(-30deg)}56.25%{transform:rotate(-48deg)}62.5%{transform:rotate(-88deg)}68.75%{transform:rotate(-35deg)}75%{transform:rotate(35deg)}81.25%{transform:rotate(-12deg)}87.5%,93.75%{transform:rotate(-20deg)}}
@keyframes jfFlipperRight{0%,100%{transform:none}12.5%,37.5%{transform:rotate(30deg)}25%,50%{transform:rotate(-44deg)}56.25%{transform:rotate(52deg)}62.5%{transform:rotate(80deg)}68.75%{transform:rotate(45deg)}75%{transform:rotate(-35deg)}81.25%{transform:rotate(15deg)}87.5%,93.75%{transform:rotate(-8deg)}}
@keyframes jfStepLeft{0%,100%,25%,50%,56.25%,68.75%,81.25%,87.5%{transform:none}12.5%{transform:translate(-6px,-3px) rotate(15deg)}37.5%{transform:translate(5px,-4px) rotate(-17deg)}62.5%{transform:translate(-8px,-5px) rotate(24deg)}75%{transform:rotate(12deg)}}
@keyframes jfStepRight{0%,100%,12.5%,37.5%,56.25%,62.5%,68.75%,81.25%,87.5%{transform:none}25%{transform:translate(6px,-3px) rotate(-15deg)}50%{transform:translate(-5px,-4px) rotate(17deg)}75%{transform:rotate(-12deg)}}
@keyframes jfArmLeft{0%,100%{transform:none}12.5%,37.5%{transform:rotate(-48deg)}25%,50%{transform:rotate(35deg)}56.25%{transform:rotate(66deg)}62.5%{transform:rotate(106deg)}68.75%{transform:rotate(55deg)}75%{transform:rotate(112deg)}81.25%{transform:rotate(80deg)}87.5%,93.75%{transform:rotate(130deg)}}
@keyframes jfArmRight{0%,100%{transform:none}12.5%,37.5%{transform:rotate(-35deg)}25%,50%{transform:rotate(48deg)}56.25%{transform:rotate(-30deg)}62.5%{transform:rotate(-66deg)}68.75%{transform:rotate(-10deg)}75%{transform:rotate(-50deg)}81.25%{transform:rotate(-20deg)}87.5%,93.75%{transform:rotate(-12deg)}}
@keyframes jfPawLeft{0%,100%{transform:none}12.5%,37.5%{transform:translate(-4px,-12px) rotate(36deg)}25%,50%{transform:rotate(-14deg)}56.25%,62.5%{transform:rotate(46deg)}75%{transform:translateY(-8px) rotate(40deg)}81.25%{transform:rotate(20deg)}87.5%,93.75%{transform:rotate(122deg)}}
@keyframes jfPawRight{0%,100%{transform:none}25%,50%{transform:translate(4px,-12px) rotate(-36deg)}12.5%,37.5%{transform:rotate(14deg)}56.25%,62.5%{transform:rotate(-46deg)}75%{transform:translateY(-8px) rotate(-40deg)}81.25%{transform:rotate(-20deg)}87.5%,93.75%{transform:rotate(-18deg)}}
@keyframes jfFlipperMeet{0%,100%{transform:none}12.5%,37.5%{transform:rotate(42deg)}25%,50%{transform:rotate(-30deg)}56.25%{transform:rotate(-48deg)}62.5%{transform:rotate(-88deg)}68.75%{transform:rotate(-35deg)}75%{transform:rotate(35deg)}81.25%{transform:rotate(70deg)}87.5%,93.75%{transform:rotate(115deg)}}
@keyframes jfArmMeet{0%,100%{transform:none}12.5%,37.5%{transform:rotate(-35deg)}25%,50%{transform:rotate(48deg)}56.25%{transform:rotate(-30deg)}62.5%{transform:rotate(-66deg)}68.75%{transform:rotate(-10deg)}75%{transform:rotate(-50deg)}81.25%{transform:rotate(8deg)}87.5%,93.75%{transform:rotate(27deg)}}
.jf-contact-arms{pointer-events:none;isolation:isolate}.jf-contact-arms *{animation:none!important;transform:none!important}
.jf-eye{transform-box:fill-box;transform-origin:center}
:is(.jf-breakdance,.jf-stage-breakdance,.jf-festival-dance,.tp-dance) .jf-eye{animation:jfHappyBlink 4s var(--jf-delay,0ms) both}
.jf-handwear{animation:none}.jf-breakdance .jf-handwear,.jf-stage-breakdance .jf-handwear,.jf-festival-dance .jf-handwear{animation:jfHeldGroove 4s ease-in-out var(--jf-delay,0ms) both}
@keyframes jfHeldGroove{0%,100%{transform:none}12.5%,37.5%{transform:rotate(-30deg)}25%,50%{transform:rotate(35deg)}62.5%{transform:rotate(-55deg)}75%{transform:rotate(-25deg)}87.5%,93.75%{transform:rotate(-8deg)}}
@keyframes jfHappyBlink{0%,34%,40%,82%,88%,100%{transform:scaleY(1)}36%,38%,84%,86%{transform:scaleY(.16)}}