/* Piko and friends: illustrated characters (kids-piko.js) brought to life with movement. */
.kpiko{position:relative;display:inline-block;width:120px;line-height:0;-webkit-tap-highlight-color:transparent;user-select:none}
.kpiko-sm{width:64px}.kpiko-md{width:120px}.kpiko-lg{width:220px}.kpiko-xl{width:300px}
.kpiko-host>.kpiko{width:100%}
.kpiko.is-tappable{cursor:pointer}
.kpk-rig{position:relative;display:block;transform-origin:50% 100%;animation:kpk-bob 3.4s ease-in-out infinite}
.kpk-img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(2,5,26,.28))}
.kpiko-team .kpk-img{filter:drop-shadow(0 4px 6px rgba(2,5,26,.25))}
.kpk-talk{position:absolute;inset:0;opacity:0}
.kpk-shadow{position:absolute;left:18%;right:18%;bottom:-2%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(2,5,26,.38),transparent);animation:kpk-shadow 3.4s ease-in-out infinite}

/* Talking: Piko swaps to his open-mouth pose on each word; everyone nods along. */
.kpiko-piko[data-talk][data-mouth="1"][data-mood="idle"] .kpk-talk,.kpiko-piko[data-talk][data-mouth="1"][data-mood="happy"] .kpk-talk{opacity:1}
.kpiko-piko[data-talk][data-mouth="1"][data-mood="idle"] .kpk-base,.kpiko-piko[data-talk][data-mouth="1"][data-mood="happy"] .kpk-base{opacity:0}
.kpiko[data-talk] .kpk-rig{animation:kpk-nod .9s ease-in-out infinite}
.kpiko:not(.kpiko-piko)[data-talk][data-mouth="1"] .kpk-img{transform:translateY(-2%) scale(1.02,.98)}
.kpk-img{transition:transform .12s ease-out}

/* Moods the helpers act out (Piko also changes pose). */
.kpiko[data-mood="happy"] .kpk-rig{animation:kpk-hop 1.4s cubic-bezier(.3,0,.4,1) 1}
.kpiko[data-mood="cheer"] .kpk-rig{animation:kpk-hop .75s cubic-bezier(.3,0,.4,1) infinite}
.kpiko[data-mood="think"] .kpk-rig{transform:rotate(-4deg)}
.kpiko[data-mood="point"] .kpk-rig{transform:rotate(3deg)}
.kpiko[data-mood="oops"] .kpk-rig{animation:kpk-shrug 1.2s ease-in-out 1}
.kpiko[data-mood="fly"] .kpk-rig{animation:kpk-float 2.2s ease-in-out infinite}
.kpiko[data-mood="fly"] .kpk-shadow{transform:scaleX(.7);opacity:.6}
.kpiko.is-wiggle .kpk-rig{animation:kpk-wiggle .65s cubic-bezier(.3,1.4,.5,1)}

@keyframes kpk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3%)}}
@keyframes kpk-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.7}}
@keyframes kpk-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg) translateY(-1%)}70%{transform:rotate(2deg)}}
@keyframes kpk-hop{0%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(1%) scale(1.04,.96)}45%{transform:translateY(-9%) scale(.97,1.04)}80%{transform:translateY(0) scale(1.03,.97)}}
@keyframes kpk-float{0%,100%{transform:translateY(-4%)}50%{transform:translateY(-10%)}}
@keyframes kpk-shrug{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}}
@keyframes kpk-wiggle{0%{transform:rotate(0)}20%{transform:rotate(-9deg) scale(1.06)}45%{transform:rotate(7deg) scale(1.04)}70%{transform:rotate(-4deg)}100%{transform:rotate(0)}}

@media(prefers-reduced-motion:reduce){
 .kpk-rig,.kpk-shadow,.kpiko[data-talk] .kpk-rig,.kpiko.is-wiggle .kpk-rig,.kpiko[data-mood] .kpk-rig{animation:none!important}
 .kpk-img{transition:none}
}
@media print{.kpiko *{animation:none!important}}