/* Expressive waist-up bookmark feedback portraits (240x160).
   Static frames stand on their own for reduced-motion and PNG export;
   active motion runs once (1.45s <= 1.6s max) inside .scene-playing. */

.answer-illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
}

.answer-illustration .ans-part,
.answer-illustration .ans-head,
.answer-illustration .growth-eyes {
  transform-box: fill-box;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="true"] .scene-playing .answer-illustration .ans-part,
  html[data-motion="true"] .scene-playing .answer-illustration .ans-head,
  html[data-motion="true"] .scene-playing .answer-illustration .growth-eyes {
    animation-duration: 1450ms;
    animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
    animation-iteration-count: 1;
    animation-delay: var(--scene-offset, 0ms);
    animation-fill-mode: both;
  }

  /* Shared eye blink across all three answer reactions */
  html[data-motion="true"] .scene-playing .answer-illustration .growth-eyes {
    animation-name: ans-eye-blink;
    animation-timing-function: ease-in-out;
    transform-origin: center;
  }

  /* 1. CELEBRATE: high-five arm & open palm lift + warm rays pulse + joyful head nod */
  html[data-motion="true"] .scene-playing .answer-celebrate .ans-celebrate-arm {
    animation-name: ans-highfive-arm;
    transform-origin: 15% 85%;
  }

  html[data-motion="true"] .scene-playing .answer-celebrate .ans-celebrate-palm {
    animation-name: ans-highfive-palm;
    transform-origin: 50% 85%;
  }

  html[data-motion="true"] .scene-playing .answer-celebrate .ans-celebrate-rays {
    animation-name: ans-celebrate-rays;
    animation-timing-function: ease-out;
    transform-origin: center;
  }

  html[data-motion="true"] .scene-playing .answer-celebrate .ans-head {
    animation-name: ans-head-joy;
    transform-origin: 50% 90%;
  }

  /* 2. ENCOURAGE: index finger calmly taps/points at visible mark + mark glow + supportive nod */
  html[data-motion="true"] .scene-playing .answer-encourage .ans-encourage-pointer {
    animation-name: ans-point-guide;
    animation-timing-function: ease-in-out;
    transform-origin: 10% 45%;
  }

  html[data-motion="true"] .scene-playing .answer-encourage .ans-encourage-mark {
    animation-name: ans-mark-focus;
    animation-timing-function: ease-in-out;
    transform-origin: center;
  }

  html[data-motion="true"] .scene-playing .answer-encourage .ans-head {
    animation-name: ans-head-support;
    animation-timing-function: ease-in-out;
    transform-origin: 50% 90%;
  }

  /* 3. REMEMBER: both hands present newly drawn 5-petal flower card + blossom pop + proud nod */
  html[data-motion="true"] .scene-playing .answer-remember .ans-remember-hands {
    animation-name: ans-present-card;
    transform-origin: 35% 75%;
  }

  html[data-motion="true"] .scene-playing .answer-remember .ans-remember-flower {
    animation-name: ans-flower-bloom;
    transform-origin: 50% 60%;
  }

  html[data-motion="true"] .scene-playing .answer-remember .ans-head {
    animation-name: ans-head-relief;
    transform-origin: 50% 90%;
  }
}

@keyframes ans-eye-blink {
  0%, 42%, 54%, 100% {
    transform: scaleY(1);
  }
  48% {
    transform: scaleY(0.18);
  }
}

@keyframes ans-highfive-arm {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  28% {
    transform: translateY(-7px) rotate(-6deg);
  }
  58% {
    transform: translateY(-3px) rotate(3deg);
  }
}

@keyframes ans-highfive-palm {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.08) rotate(-5deg);
  }
  62% {
    transform: scale(1.03) rotate(4deg);
  }
}

@keyframes ans-celebrate-rays {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  36% {
    opacity: 1;
    transform: scale(1.07);
  }
  72% {
    opacity: 0.88;
    transform: scale(1.02);
  }
}

@keyframes ans-head-joy {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  32% {
    transform: translateY(-3px) rotate(-4deg);
  }
  66% {
    transform: translateY(-1px) rotate(2deg);
  }
}

@keyframes ans-point-guide {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  34% {
    transform: translate(5px, -2px) rotate(-3deg);
  }
  68% {
    transform: translate(3px, 1px) rotate(1deg);
  }
}

@keyframes ans-mark-focus {
  0%, 100% {
    transform: scale(1);
    opacity: 0.88;
  }
  40%, 70% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes ans-head-support {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  42%, 70% {
    transform: rotate(4deg) translateY(2px);
  }
}

@keyframes ans-present-card {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  38% {
    transform: translateY(-6px) rotate(-2deg);
  }
  72% {
    transform: translateY(-3px) rotate(1deg);
  }
}

@keyframes ans-flower-bloom {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  42% {
    transform: scale(1.1) rotate(5deg);
  }
  74% {
    transform: scale(1.04) rotate(-2deg);
  }
}

@keyframes ans-head-relief {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  40% {
    transform: translateY(-2px) rotate(-3deg);
  }
  74% {
    transform: translateY(0) rotate(2deg);
  }
}