/* The still scene doubles as the print/PNG frame. Replay only the chosen scene
   on a learning action; the app removes scene-playing on stop or route changes. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-part {
    animation-duration: 1600ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: var(--scene-offset, 0ms);
    animation-fill-mode: both;
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-left {
    animation-name: var(--left-action, none);
    transform-origin: var(--arm-pivot, center);
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-right {
    animation-name: var(--right-action, none);
    transform-origin: var(--arm-pivot, center);
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-gripped {
    animation-name: var(--object-action, none);
    transform-origin: var(--arm-pivot, center);
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-detail {
    animation-name: var(--detail-action, none);
    transform-origin: var(--arm-pivot, center);
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-head {
    animation-name: var(--head-action, growth-look);
    transform-box: fill-box;
    transform-origin: 50% 95%;
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-eyes {
    animation-name: growth-blink;
    transform-box: fill-box;
    transform-origin: center;
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-drops {
    animation-name: growth-pour;
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-page {
    animation-name: growth-turn-page;
    transform-origin: 180px 155px;
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-notes {
    animation-name: growth-hear;
  }
  html[data-motion="true"] [data-growth-motion].scene-playing .growth-pressprint {
    animation-name: growth-reveal-ink;
  }
}

.art-baby-clap, .art-expert-cheer {
  --left-action: growth-clap-left;
  --right-action: growth-clap-right;
  --detail-action: growth-hear;
}
.art-baby-rattle {
  --arm-pivot: 195px 149px;
  --right-action: growth-shake;
  --object-action: growth-shake;
}
.art-baby-book { --head-action: growth-read; }
.art-kinder-print {
  --right-action: growth-stamp;
  --arm-pivot: 169px 142px;
}
.art-kinder-boat {
  --arm-pivot: 193px 157px;
  --left-action: growth-lift-boat;
  --right-action: growth-lift-boat;
  --object-action: growth-lift-boat;
}
.art-school-water {
  --arm-pivot: 176px 139px;
  --left-action: growth-tilt-can;
  --right-action: growth-tilt-can;
  --object-action: growth-tilt-can;
}
.art-school-bookmark {
  --right-action: growth-tuck;
  --object-action: growth-tuck;
}
.art-middle-poster {
  --arm-pivot: 155px 110px;
  --right-action: growth-pin;
}
.art-middle-music {
  --head-action: none; /* Keep the headphones on the listener. */
  --left-action: growth-keep-time;
  --arm-pivot: 119px 110px;
}
.art-high-exhibit {
  --arm-pivot: 157px 111px;
  --right-action: growth-present;
}
.art-high-model {
  --right-action: growth-fit-roof;
  --object-action: growth-fit-roof;
}
.art-adult-notebook {
  --right-action: growth-write;
  --detail-action: growth-write;
  --head-action: growth-read;
}
.art-adult-wave {
  --arm-pivot: 158px 109px;
  --right-action: growth-wave;
  --detail-action: growth-wave;
}
.art-expert-award {
  --left-action: growth-show-medal;
  --right-action: growth-show-medal;
  --detail-action: growth-show-medal;
}

@keyframes growth-look {
  0%, 100% { transform: rotate(0); }
  43% { transform: rotate(3deg); }
}
@keyframes growth-read {
  0%, 100% { transform: rotate(0); }
  40%, 65% { transform: rotate(5deg) translateY(1px); }
}
@keyframes growth-clap-left {
  0%, 40%, 73%, 100% { transform: translateX(0); }
  22%, 58% { transform: translateX(-6px); }
}
@keyframes growth-clap-right {
  0%, 40%, 73%, 100% { transform: translateX(0); }
  22%, 58% { transform: translateX(6px); }
}
@keyframes growth-shake {
  0%, 100% { transform: rotate(0); }
  16%, 50% { transform: rotate(-14deg); }
  33%, 68% { transform: rotate(10deg); }
}
@keyframes growth-turn-page {
  0%, 10%, 94%, 100% { opacity: 0; transform: scaleX(1); }
  21% { opacity: 1; transform: scaleX(1); }
  53% { opacity: 1; transform: scaleX(.07) skewY(-12deg); }
  77%, 85% { opacity: 1; transform: scaleX(-.9); }
  93% { opacity: 0; transform: scaleX(-.9); }
}
@keyframes growth-stamp {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-24deg); }
  52%, 64% { transform: rotate(3deg); }
  81% { transform: rotate(-9deg); }
}
@keyframes growth-reveal-ink {
  0%, 48% { opacity: .14; }
  62%, 100% { opacity: 1; }
}
@keyframes growth-lift-boat {
  0%, 100% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-6px) rotate(-5deg); }
  69% { transform: translateY(-3px) rotate(3deg); }
}
@keyframes growth-tilt-can {
  0%, 100% { transform: rotate(0); }
  32%, 66% { transform: rotate(8deg); }
}
@keyframes growth-pour {
  0%, 100% { transform: translate(0); opacity: 1; }
  18% { transform: translate(-2px,0); opacity: .35; }
  39%, 69% { transform: translate(2px,8px); opacity: 1; }
  53% { transform: translate(0,4px); opacity: .7; }
}
@keyframes growth-tuck {
  0%, 100% { transform: translateY(0); }
  22% { transform: translateY(-7px); }
  57%, 72% { transform: translateY(4px); }
}
@keyframes growth-pin {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  54%, 70% { transform: rotate(2deg); }
}
@keyframes growth-keep-time {
  0%, 44%, 82%, 100% { transform: rotate(0); }
  24%, 64% { transform: rotate(-6deg); }
}
@keyframes growth-hear {
  0%, 100% { transform: translateY(0); opacity: 1; }
  42% { transform: translateY(-5px); opacity: .6; }
}
@keyframes growth-present {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(8deg); }
  58%, 73% { transform: rotate(-10deg); }
}
@keyframes growth-fit-roof {
  0%, 100% { transform: translate(0); }
  21% { transform: translate(-2px,-7px); }
  54%, 72% { transform: translate(0,1px); }
}
@keyframes growth-write {
  0%, 100% { transform: translate(0); }
  18% { transform: translate(2px,-2px); }
  31% { transform: translate(4px,1px); }
  43% { transform: translate(5px,-2px); }
  59% { transform: translate(8px,1px); }
  73% { transform: translate(7px,-3px); }
}
@keyframes growth-wave {
  0%, 100% { transform: rotate(0); }
  17%, 51% { transform: rotate(-15deg); }
  34%, 68% { transform: rotate(12deg); }
}
@keyframes growth-show-medal {
  0%, 100% { transform: translateY(0); }
  38%, 66% { transform: translateY(-7px); }
}


@keyframes growth-blink {
  0%, 45%, 55%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.2); }
}