/* Buku Baru: movement for the animated penjelajah cilik (explorer.js) */
.kid{display:block;width:100%;height:100%;overflow:visible}
.kid *{transform-box:view-box}
.kid-shadow{fill:#2e4a3a1f;transform-origin:100px 229px}
.kid-move,.kid-body{transform-origin:100px 228px}
.kid-leg-l{transform-origin:87px 172px}
.kid-leg-r{transform-origin:113px 172px}
.kid-arm-l{transform-origin:73px 119px}
.kid-arm-r{transform-origin:127px 119px}
.kid-head{transform-origin:100px 104px}
.kid-eyes{transform-origin:100px 76px;animation:kid-blink 4.2s infinite}
@keyframes kid-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.1)}}

/* berdiri: stand tall and breathe */
.kid-stand .kid-body{animation:kid-breathe 2.4s ease-in-out infinite alternate}
@keyframes kid-breathe{to{transform:scaleY(1.02) translateY(-1px)}}

/* jalan / lari: step across the card, arms swinging and legs lifting in turn */
.kid-walk .kid-move,.kid-go .kid-move{animation:kid-travel 5s ease-in-out infinite alternate}
.kid-walk .kid-body,.kid-go .kid-body{animation:kid-bob .5s ease-in-out infinite alternate}
.kid-walk .kid-leg-l,.kid-go .kid-leg-l{animation:kid-step 1s ease-in-out infinite}
.kid-walk .kid-leg-r,.kid-go .kid-leg-r{animation:kid-step 1s ease-in-out -.5s infinite}
.kid-walk .kid-arm-l{animation:kid-swing-l 1s ease-in-out infinite}
.kid-walk .kid-arm-r{animation:kid-swing-r 1s ease-in-out infinite}
@keyframes kid-travel{from{transform:translateX(-38px)}to{transform:translateX(38px)}}
@keyframes kid-bob{to{transform:translateY(-3px)}}
@keyframes kid-step{0%,50%,100%{transform:none}25%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes kid-swing-l{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
@keyframes kid-swing-r{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
.kid-run .kid-move{animation:kid-travel 2.2s ease-in-out infinite alternate}
.kid-run .kid-body{animation:kid-run-bob .22s ease-in-out infinite alternate}
.kid-run .kid-leg-l{animation:kid-stride .45s ease-in-out infinite}
.kid-run .kid-leg-r{animation:kid-stride .45s ease-in-out -.225s infinite}
.kid-run .kid-arm-l{animation:kid-pump-l .45s ease-in-out infinite}
.kid-run .kid-arm-r{animation:kid-pump-r .45s ease-in-out infinite}
@keyframes kid-run-bob{from{transform:rotate(-3deg)}to{transform:translateY(-6px) rotate(-3deg)}}
@keyframes kid-stride{0%,50%,100%{transform:none}25%{transform:translateY(-14px) rotate(-8deg)}}
@keyframes kid-pump-l{0%,100%{transform:rotate(35deg)}50%{transform:rotate(-30deg)}}
@keyframes kid-pump-r{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-35deg)}}

/* mula: point the way, then walk off */
.kid-go .kid-arm-r{animation:none;transform:rotate(-95deg)}
.kid-go .kid-arm-l{animation:kid-swing-l 1s ease-in-out infinite}

/* lompat: crouch, spring up with arms high, land */
.kid-jump .kid-body{animation:kid-jump 1.3s cubic-bezier(.3,.1,.3,1) infinite}
.kid-jump .kid-arm-l{animation:kid-jump-arm-l 1.3s ease-in-out infinite}
.kid-jump .kid-arm-r{animation:kid-jump-arm-r 1.3s ease-in-out infinite}
.kid-jump .kid-leg-l{animation:kid-tuck-l 1.3s ease-in-out infinite}
.kid-jump .kid-leg-r{animation:kid-tuck-r 1.3s ease-in-out infinite}
.kid-jump .kid-shadow{animation:kid-shadow 1.3s cubic-bezier(.3,.1,.3,1) infinite}
@keyframes kid-jump{0%,100%{transform:none}18%{transform:translateY(9px) scaleY(.94)}45%,55%{transform:translateY(-34px)}80%{transform:translateY(4px) scaleY(.97)}}
@keyframes kid-jump-arm-l{0%,100%{transform:rotate(10deg)}18%{transform:rotate(30deg)}45%,55%{transform:rotate(155deg)}80%{transform:rotate(15deg)}}
@keyframes kid-jump-arm-r{0%,100%{transform:rotate(-10deg)}18%{transform:rotate(-30deg)}45%,55%{transform:rotate(-155deg)}80%{transform:rotate(-15deg)}}
@keyframes kid-tuck-l{0%,30%,75%,100%{transform:none}50%{transform:translateY(-6px) rotate(12deg)}}
@keyframes kid-tuck-r{0%,30%,75%,100%{transform:none}50%{transform:translateY(-6px) rotate(-12deg)}}
@keyframes kid-shadow{0%,100%{transform:none}45%,55%{transform:scale(.55);opacity:.5}}

/* duduk: sit on a stool and sway a little */
.kid-sit .kid-body{transform:translateY(24px);animation:kid-sit 2.4s ease-in-out infinite alternate}
@keyframes kid-sit{from{transform:translateY(24px) rotate(-2deg)}to{transform:translateY(24px) rotate(2deg)}}

/* tepuk: hands meet in front, again and again */
.kid-clap .kid-arm-l{animation:kid-clap-l .5s ease-in-out infinite}
.kid-clap .kid-arm-r{animation:kid-clap-r .5s ease-in-out infinite}
.kid-clap .kid-body{animation:kid-bob .25s ease-in-out infinite alternate}
@keyframes kid-clap-l{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-37deg)}}
@keyframes kid-clap-r{0%,100%{transform:rotate(14deg)}50%{transform:rotate(37deg)}}

/* lambai: wave hello */
.kid-wave .kid-arm-r{animation:kid-wave .55s ease-in-out infinite alternate}
.kid-wave .kid-head{animation:kid-tilt 1.1s ease-in-out infinite alternate}
@keyframes kid-wave{from{transform:rotate(-140deg)}to{transform:rotate(-170deg)}}
@keyframes kid-tilt{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* berhenti: hand up, palm out, stand still */
.kid-stop .kid-arm-r{transform:rotate(-158deg)}
.kid-stop .kid-arm-r circle{transform-origin:142px 79px;animation:kid-palm 1s ease-in-out infinite alternate}
@keyframes kid-palm{to{transform:scale(1.35)}}

/* buka / tutup: the book opens or closes in both hands */
.kid-open .kid-arm-l,.kid-close .kid-arm-l,.kid-give .kid-arm-l{transform:rotate(-22deg)}
.kid-open .kid-arm-r,.kid-close .kid-arm-r,.kid-give .kid-arm-r{transform:rotate(22deg)}
.kid-book-flap{transform-origin:100px 149px}
.kid-open .kid-book-flap{animation:kid-book-open 2.6s ease-in-out infinite}
.kid-close .kid-book-flap{animation:kid-book-close 2.6s ease-in-out infinite}
@keyframes kid-book-open{0%,15%{transform:scaleX(-1);fill:#e05a47}49%{fill:#e05a47}50%{transform:scaleX(0);fill:#fff}85%,100%{transform:none;fill:#fff}}
@keyframes kid-book-close{0%,15%{transform:none;fill:#fff}49%{fill:#fff}50%{transform:scaleX(0);fill:#e05a47}85%,100%{transform:scaleX(-1);fill:#e05a47}}

/* angkat / letak: bend down and lift the box up, or put it back down */
.kid-box{transform-origin:100px 225px}
.kid-lift .kid-body{animation:kid-bend 2.8s ease-in-out infinite}
.kid-lift .kid-box{animation:kid-box-up 2.8s ease-in-out infinite}
.kid-lift .kid-arm-l{animation:kid-carry-l 2.8s ease-in-out infinite}
.kid-lift .kid-arm-r{animation:kid-carry-r 2.8s ease-in-out infinite}
.kid-put .kid-body{animation:kid-bend 2.8s ease-in-out infinite reverse}
.kid-put .kid-box{animation:kid-box-up 2.8s ease-in-out infinite reverse}
.kid-put .kid-arm-l{animation:kid-carry-l 2.8s ease-in-out infinite reverse}
.kid-put .kid-arm-r{animation:kid-carry-r 2.8s ease-in-out infinite reverse}
@keyframes kid-bend{0%,10%{transform:none}30%{transform:translateY(14px) scaleY(.93)}60%,100%{transform:none}}
@keyframes kid-box-up{0%,30%{transform:none}60%,100%{transform:translateY(-62px)}}
@keyframes kid-carry-l{0%,10%{transform:none}30%{transform:rotate(-12deg)}60%,100%{transform:rotate(-24deg)}}
@keyframes kid-carry-r{0%,10%{transform:none}30%{transform:rotate(12deg)}60%,100%{transform:rotate(24deg)}}

/* beri: hold out a present */
.kid-gift{transform-origin:100px 151px;animation:kid-offer 2s ease-in-out infinite}
.kid-give .kid-body{animation:kid-lean 2s ease-in-out infinite}
@keyframes kid-offer{0%,20%,100%{transform:none}50%,75%{transform:translateY(8px) scale(1.4)}}
@keyframes kid-lean{0%,20%,100%{transform:none}50%,75%{transform:scale(1.03)}}

@media(prefers-reduced-motion:reduce){.kid *{animation:none!important}}

/* lesson pictures (assets/pictures) take the place and size of the old emoji */
.pic{display:block;width:1em;height:1em;object-fit:contain;user-select:none;-webkit-user-select:none}
.spatial-object .pic{width:1.35em;height:1.35em}
.spatial-box{font-size:0}
.word-card-art .action-stage{align-self:stretch;height:100%;min-height:0;aspect-ratio:200/264}
.word-card-art:has(.action-stage){height:230px}
@media(max-width:600px){.word-card-art:has(.action-stage){height:200px}}
.module-text-icon{font:700 22px Fredoka,sans-serif;color:#3d7350}
.module-icon .module-pic{width:70%;height:70%;object-fit:contain}
.module-icon .dots-icon{fill:initial;stroke:none}
.count-dot{display:inline-block;width:20px;height:20px;margin:2px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#ffb02e 0 32%,#fff3c4 34% 100%);box-shadow:0 0 0 2px #f2c94c}
.obj-thumb{display:block;width:52px;height:52px;margin:0 auto 4px;object-fit:contain}
.feeling-mini{display:block;width:46px;height:46px;margin:0 auto}
.feeling-mini .feeling-face{width:100%;height:100%}
.sense-card .sense-icon{width:64px;height:64px;animation:none}
.sense-hero .sense-big{width:96px;height:96px;flex:none}
.find-bubble .find-zoom{width:52px;height:52px;animation:none}
.find-stars span{display:inline-block;width:18px;height:18px;margin:0 2px;border-radius:50%;background:#e3ebda;filter:none}
.find-stars span.on{background:#ffcf55;box-shadow:0 0 0 3px #ffcf5555}
.action-stage .move-gif{width:100%;height:100%;object-fit:contain}
.flash-illustration .pic{width:1.8em;height:1.8em}
.celebration-sparkles{height:150px;font-size:0}.celebration-sparkles .kid{width:auto;height:100%;margin:0 auto}

/* Module 4 place scenes (placeScene / the box-and-table game in kiddo.js) */
.place-scene{display:block;width:100%;height:100%;overflow:visible}
.word-card-art .place-scene{width:auto;max-width:100%;height:100%;align-self:stretch}
.word-card-art:has(.place-scene){height:220px}
.place-stage{max-width:520px;margin:0 auto 14px;padding:10px 10px 0;border-radius:22px;background:#f6faec}
.place-obj{transition:transform .8s cubic-bezier(.3,1.25,.5,1)}
.place-obj.waiting .place-bob{animation:scene-bob 1.4s ease-in-out infinite alternate}
@keyframes scene-bob{to{transform:translateY(8px)}}
.scene-rise{animation:scene-rise 3.2s ease-in infinite}
@keyframes scene-rise{0%,12%{transform:none;opacity:1}80%{transform:translateY(-96px);opacity:1}100%{transform:translateY(-96px);opacity:0}}
.scene-fall{animation:scene-fall 3s infinite}
@keyframes scene-fall{0%,30%{transform:none;animation-timing-function:ease-in}55%{transform:translateY(60px);animation-timing-function:ease-out}63%{transform:translateY(50px);animation-timing-function:ease-in}70%,90%{transform:translateY(60px);opacity:1}100%{transform:translateY(60px);opacity:0}}
.spatial-choice small{display:block;font-size:10px;letter-spacing:1px;opacity:.7}
@media(max-width:600px){.word-card-art:has(.place-scene){height:180px}}
@media(prefers-reduced-motion:reduce){.place-obj{transition:none}.place-bob,.scene-rise,.scene-fall{animation:none!important}}

/* Side view (explorer.js sideSvg): hip, knee, shoulder and elbow joints, so walking, running,
   jumping, sitting, standing, lifting and giving show real leg and arm movement */
.kid-side .s-thigh{transform-origin:100px 170px}
.kid-side .s-shin{transform-origin:100px 196px}
.kid-side .s-upper{transform-origin:102px 119px}
.kid-side .s-fore{transform-origin:102px 141px}
.kid-side .s-body{transform-origin:100px 200px}
.kid-side .s-move{transform-origin:100px 228px}
.kid-side .kid-eyes{transform-origin:122px 68px}
.kid-side .s-box{transform-origin:147px 211px}
@keyframes s-ground{to{stroke-dashoffset:30}}

/* jalan: one step each half second, the road slides back */
.side-walk .s-ground path,.side-go .s-ground path{animation:s-ground .5s linear infinite}
.side-walk .s-thigh,.side-go .s-thigh{animation:s-walk-thigh 1s ease-in-out infinite}
.side-walk .s-shin,.side-go .s-shin{animation:s-walk-shin 1s ease-in-out infinite}
.side-walk .s-far .s-thigh,.side-walk .s-far .s-shin,.side-go .s-far .s-thigh,.side-go .s-far .s-shin{animation-delay:-.5s}
.side-walk .s-upper,.side-go .s-far .s-upper{animation:s-walk-arm 1s ease-in-out infinite}
.side-walk .s-far .s-upper,.side-go .s-far .s-upper{animation-delay:-.5s}
.side-walk .s-fore,.side-go .s-fore{transform:rotate(-18deg)}
.side-walk .s-body,.side-go .s-body{animation:s-bob .5s ease-in-out infinite alternate}
@keyframes s-walk-thigh{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(22deg)}}
@keyframes s-walk-shin{0%,50%,100%{transform:rotate(4deg)}25%{transform:rotate(12deg)}75%{transform:rotate(48deg)}}
@keyframes s-walk-arm{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes s-bob{to{transform:translateY(-3px)}}

/* mula: point the way and set off walking */
.side-go .s-near .s-upper{animation:none;transform:rotate(-95deg)}
.side-go .s-near .s-fore{transform:rotate(-6deg)}

/* lari: long strides, knees high, arms pumping, leaning forward */
.side-run .s-ground path{animation:s-ground .25s linear infinite}
.side-run .s-thigh{animation:s-run-thigh .6s linear infinite}
.side-run .s-shin{animation:s-run-shin .6s linear infinite}
.side-run .s-far .s-thigh,.side-run .s-far .s-shin{animation-delay:-.3s}
.side-run .s-upper{animation:s-run-arm .6s ease-in-out infinite}
.side-run .s-far .s-upper{animation-delay:-.3s}
.side-run .s-fore{transform:rotate(-85deg)}
.side-run .s-body{animation:s-run-body .3s ease-in-out infinite alternate}
@keyframes s-run-thigh{0%,100%{transform:rotate(-50deg)}50%{transform:rotate(36deg)}}
@keyframes s-run-shin{0%,100%{transform:rotate(12deg)}25%{transform:rotate(30deg)}50%{transform:rotate(24deg)}75%{transform:rotate(100deg)}}
@keyframes s-run-arm{0%,100%{transform:rotate(50deg)}50%{transform:rotate(-50deg)}}
@keyframes s-run-body{from{transform:rotate(8deg)}to{transform:rotate(8deg) translateY(-7px)}}

/* lompat: bend the knees, swing the arms, spring up, tuck, land softly */
.side-jump .s-body{animation:s-jump-body 1.4s ease-in-out infinite}
.side-jump .s-thigh{animation:s-jump-thigh 1.4s ease-in-out infinite}
.side-jump .s-shin{animation:s-jump-shin 1.4s ease-in-out infinite}
.side-jump .s-upper{animation:s-jump-arm 1.4s ease-in-out infinite}
.side-jump .kid-shadow{transform-origin:102px 229px;animation:kid-shadow 1.4s ease-in-out infinite}
@keyframes s-jump-body{0%,100%{transform:none}20%{transform:translateY(14px)}40%{transform:translateY(-30px)}55%{transform:translateY(-42px)}75%{transform:translateY(8px)}88%{transform:none}}
@keyframes s-jump-thigh{0%,40%,88%,100%{transform:none}20%{transform:rotate(-45deg)}55%,75%{transform:rotate(-38deg)}}
@keyframes s-jump-shin{0%,40%,88%,100%{transform:none}20%{transform:rotate(75deg)}55%{transform:rotate(70deg)}75%{transform:rotate(58deg)}}
@keyframes s-jump-arm{0%,100%{transform:rotate(10deg)}20%{transform:rotate(45deg)}40%,55%{transform:rotate(-160deg)}75%{transform:rotate(-20deg)}}

/* duduk: sit down on the chair and stay; berdiri: get up from the chair and stay up */
.side-sit .s-move{animation:s-fade 3.4s infinite}
.side-sit .s-body{animation:s-sit-body 3.4s ease-in-out infinite}
.side-sit .s-thigh{animation:s-sit-thigh 3.4s ease-in-out infinite}
.side-sit .s-shin{animation:s-sit-shin 3.4s ease-in-out infinite}
.side-sit .s-upper{animation:s-sit-arm 3.4s ease-in-out infinite}
.side-sit .s-fore,.side-stand .s-fore{transform:rotate(-40deg)}
@keyframes s-fade{0%{opacity:0}5%,92%{opacity:1}100%{opacity:0}}
@keyframes s-sit-body{0%,18%{transform:none}48%,100%{transform:translateY(20px) rotate(-4deg)}}
@keyframes s-sit-thigh{0%,18%{transform:none}48%,100%{transform:rotate(-88deg)}}
@keyframes s-sit-shin{0%,18%{transform:none}48%,100%{transform:rotate(88deg)}}
@keyframes s-sit-arm{0%,18%{transform:rotate(4deg)}48%,100%{transform:rotate(-18deg)}}
.side-stand .s-move{animation:s-fade 3.4s infinite}
.side-stand .s-body{animation:s-stand-body 3.4s ease-in-out infinite}
.side-stand .s-thigh{animation:s-stand-thigh 3.4s ease-in-out infinite}
.side-stand .s-shin{animation:s-stand-shin 3.4s ease-in-out infinite}
.side-stand .s-upper{animation:s-stand-arm 3.4s ease-in-out infinite}
@keyframes s-stand-body{0%,25%{transform:translateY(20px) rotate(-4deg)}40%{transform:translateY(10px) rotate(14deg)}58%,100%{transform:none}}
@keyframes s-stand-thigh{0%,25%{transform:rotate(-88deg)}40%{transform:rotate(-50deg)}58%,100%{transform:none}}
@keyframes s-stand-shin{0%,25%{transform:rotate(88deg)}40%{transform:rotate(50deg)}58%,100%{transform:none}}
@keyframes s-stand-arm{0%,25%{transform:rotate(-18deg)}40%{transform:rotate(-30deg)}58%,100%{transform:rotate(4deg)}}

/* angkat: squat, take the box, stand up holding it; letak: the same backwards */
.side-lift .s-body,.side-put .s-body{animation:s-lift-body 3s ease-in-out infinite}
.side-lift .s-thigh,.side-put .s-thigh{animation:s-lift-thigh 3s ease-in-out infinite}
.side-lift .s-shin,.side-put .s-shin{animation:s-lift-shin 3s ease-in-out infinite}
.side-lift .s-upper,.side-put .s-upper{animation:s-lift-arm 3s ease-in-out infinite}
.side-lift .s-fore,.side-put .s-fore{animation:s-lift-fore 3s ease-in-out infinite}
.side-lift .s-box,.side-put .s-box{animation:s-lift-box 3s ease-in-out infinite}
.side-put .s-body,.side-put .s-thigh,.side-put .s-shin,.side-put .s-upper,.side-put .s-fore,.side-put .s-box{animation-direction:reverse}
@keyframes s-lift-body{0%,10%{transform:none}35%{transform:translateY(16px) rotate(18deg)}65%,100%{transform:none}}
@keyframes s-lift-thigh{0%,10%{transform:none}35%{transform:rotate(-62deg)}65%,100%{transform:none}}
@keyframes s-lift-shin{0%,10%{transform:none}35%{transform:rotate(78deg)}65%,100%{transform:none}}
@keyframes s-lift-arm{0%,10%{transform:rotate(4deg)}35%{transform:rotate(-38deg)}65%,100%{transform:rotate(-55deg)}}
@keyframes s-lift-fore{0%,35%{transform:none}65%,100%{transform:rotate(-55deg)}}
@keyframes s-lift-box{0%,35%{transform:none}65%,100%{transform:translate(-5px,-84px)}}

/* beri: hold the present out to someone */
.side-give .s-upper{animation:s-give-arm 2.4s ease-in-out infinite}
.side-give .s-fore{animation:s-give-fore 2.4s ease-in-out infinite}
.side-give .s-gift{animation:s-give-gift 2.4s ease-in-out infinite}
.side-give .s-body{animation:s-give-body 2.4s ease-in-out infinite}
@keyframes s-give-arm{0%,20%,100%{transform:rotate(-45deg)}50%,80%{transform:rotate(-85deg)}}
@keyframes s-give-fore{0%,20%,100%{transform:rotate(-70deg)}50%,80%{transform:rotate(-6deg)}}
@keyframes s-give-gift{0%,20%,100%{transform:none}50%,80%{transform:translate(10px,-4px)}}
@keyframes s-give-body{0%,20%,100%{transform:none}50%,80%{transform:rotate(5deg)}}

.celebration-sparkles .kid-side .s-ground{display:none}
@media(prefers-reduced-motion:reduce){.kid-side *{animation:none!important}}