/* Karakter TumbuhTahu bergerak: lapisan tubuh, tangan, dua kaki, bayangan (img/chr/*). */
.chr{position:relative;aspect-ratio:261/300;width:100%;pointer-events:none;user-select:none}
.chr img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;will-change:transform;-webkit-user-drag:none}
.chr[data-c=boy]{--hx:79%;--hy:37.3%;--lx:42%;--rx:57.5%;--hip:66%}
.chr[data-c=girl]{--hx:76.9%;--hy:33.3%;--lx:43%;--rx:57.7%;--hip:67.7%}
.chr .c-body{transform-origin:50% 92%}
.chr .c-hand{transform-origin:var(--hx) var(--hy)}
.chr .c-ll{transform-origin:var(--lx) var(--hip)}
.chr .c-lr{transform-origin:var(--rx) var(--hip)}
.chr .c-sh{transform-origin:50% 90%}
.chr.wave .c-hand,.chr.walk .c-hand{animation:chrWave .75s ease-in-out infinite alternate}
.chr.walk .c-body{animation:chrBob .8s ease-in-out infinite}
.chr.walk .c-hand{animation:chrWave .75s ease-in-out infinite alternate,chrBob .8s ease-in-out infinite}
.chr.walk .c-ll{animation:chrStep .8s ease-in-out infinite}
.chr.walk .c-lr{animation:chrStep .8s ease-in-out infinite;animation-delay:-.4s}
.chr.walk .c-sh{animation:chrShadow .4s ease-in-out infinite alternate}
@keyframes chrWave{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@keyframes chrBob{0%,100%{transform:translateY(0) rotate(-1.2deg)}25%{transform:translateY(-1.6%) rotate(0)}50%{transform:translateY(0) rotate(1.2deg)}75%{transform:translateY(-1.6%) rotate(0)}}
@keyframes chrStep{0%{transform:translateY(0) rotate(0)}22%{transform:translateY(-4.2%) rotate(-4deg)}45%{transform:translateY(0) rotate(0)}100%{transform:translateY(0) rotate(0)}}
@keyframes chrShadow{from{transform:scale(1)}to{transform:scale(.975)}}
@media(prefers-reduced-motion:reduce){.chr *{animation:none!important}}