@keyframes idleFloat {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes blinkLed {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes boardPulse {
  0%,
  100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes drawStroke {
  0% { transform: scaleX(0.2); opacity: 0.3; }
  50% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.6); opacity: 0.6; }
}

@keyframes questionPop {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); opacity: 0; }
  40% { transform: translate(-50%, -70%) scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1) rotate(0); opacity: 0; }
}

@keyframes sparkleTwinkle {
  0%,
  100% { transform: scale(0.4) rotate(0); opacity: 0; }
  40% { transform: scale(1) rotate(20deg); opacity: 1; }
  80% { transform: scale(0.7) rotate(-10deg); opacity: 0.4; }
}

@keyframes flashFade {
  0% { opacity: 0; }
  30% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes propPulse {
  0%,
  100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

@keyframes propShake {
  0%,
  100% { transform: translateX(-50%) rotate(var(--prop-rotate, 0deg)); }
  25% { transform: translateX(calc(-50% - 8px)) rotate(-4deg); }
  75% { transform: translateX(calc(-50% + 8px)) rotate(4deg); }
}

@keyframes propPop {
  0% { transform: translateX(-50%) scale(0.8); }
  60% { transform: translateX(-50%) scale(1.08); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes hitPulse {
  0%,
  100% { box-shadow: 0 0 0 0 rgba(47, 183, 176, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(47, 183, 176, 0); }
}

@keyframes q01Breath {
  0%,
  100% { transform: scale(1, 1); }
  50% { transform: scale(1.015, 1.04); }
}

@keyframes q01Blink {
  0%,
  88%,
  100% { transform: scaleY(1); }
  91% { transform: scaleY(0.08); }
  94% { transform: scaleY(1); }
}

@keyframes q01HappyBounce {
  0%,
  100% { transform: rotate(-2.4deg) translateY(0); }
  50% { transform: rotate(-2.4deg) translateY(-12px); }
}

@keyframes q01ArmLiftLeft {
  0%,
  100% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(-22deg) translateY(-10px); }
}

@keyframes q01ArmLiftRight {
  0%,
  100% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(22deg) translateY(-10px); }
}

@keyframes q01ChestPuff {
  0%,
  100% { transform: scale(1.05, 1.07) translateY(-2px); }
  50% { transform: scale(1.1, 1.12) translateY(-5px); }
}

@keyframes q01AntennaWobble {
  0%,
  100% { transform: rotate(-14deg); }
  50% { transform: rotate(16deg); }
}

@keyframes q01SurpriseSquash {
  0% { transform: rotate(-2.4deg) scale(1, 1); }
  28% { transform: rotate(-2.4deg) scale(1.08, 0.84); }
  62% { transform: rotate(-2.4deg) scale(0.96, 1.1); }
  100% { transform: rotate(-2.4deg) scale(1, 1); }
}

.character-anim.is-idle {
  animation: idleFloat calc(var(--anim-slow) * 5) ease-in-out infinite;
}

.character[data-emotion="happy"] .character-anim.is-idle,
.character[data-emotion="surprised"].is-emotion-pop .character-anim.is-idle {
  animation: none;
}

.q01-torso,
.q01-eye-ball,
.q01-arm,
.q01-antenna-group {
  transform-box: fill-box;
}

.q01-torso {
  transform-origin: center bottom;
}

.q01-eye-ball {
  transform-origin: center;
}

.q01-arm-left { transform-origin: 44px 226px; }
.q01-arm-right { transform-origin: 176px 226px; }
.q01-antenna-group { transform-origin: 64px 72px; }

.character[data-emotion="normal"] .q01-torso {
  animation: q01Breath calc(var(--anim-slow) * 5) ease-in-out infinite;
}

.character[data-emotion="normal"] .q01-eye-ball {
  animation: q01Blink 4.4s ease-in-out infinite;
}

.character[data-emotion="happy"] .q01-pose,
.character[data-emotion="excited"] .q01-pose {
  animation: q01HappyBounce calc(var(--anim-slow) * 3) ease-in-out infinite;
}

.character[data-emotion="happy"] .q01-arm-left,
.character[data-emotion="excited"] .q01-arm-left {
  animation: q01ArmLiftLeft calc(var(--anim-slow) * 3) ease-in-out infinite;
}

.character[data-emotion="happy"] .q01-arm-right,
.character[data-emotion="excited"] .q01-arm-right {
  animation: q01ArmLiftRight calc(var(--anim-slow) * 3) ease-in-out infinite;
}

.character[data-emotion="proud"] .q01-torso {
  animation: q01ChestPuff calc(var(--anim-slow) * 4) ease-in-out infinite;
}

.character[data-emotion="confused"] .q01-antenna-group {
  animation: q01AntennaWobble calc(var(--anim-slow) * 3) ease-in-out infinite;
}

.character[data-emotion="surprised"].is-emotion-pop .q01-pose {
  animation: q01SurpriseSquash var(--anim-slow) cubic-bezier(.2, 1.2, .3, 1);
}

.lab-machine-light {
  animation: blinkLed calc(var(--anim-slow) * 3) ease-in-out infinite;
}

.lab-strip {
  animation: idleFloat calc(var(--anim-slow) * 6) ease-in-out infinite;
}

.prop-ai-board .board-screen {
  animation: boardPulse calc(var(--anim-slow) * 5) ease-in-out infinite;
}

.prop-ai-board[data-state="drawing"] .board-icon-draw span {
  transform-origin: left center;
  animation: drawStroke calc(var(--anim-slow) * 2) ease-in-out infinite;
}

.prop-ai-board[data-state="drawing"] .board-icon-draw span:nth-child(2) {
  animation-delay: calc(var(--anim-fast));
}

.prop-ai-board[data-state="drawing"] .board-icon-draw span:nth-child(3) {
  animation-delay: calc(var(--anim-normal));
}

.effect-question {
  width: 64px;
  height: 64px;
  color: #5b4b8a;
  font: 700 56px/64px "Trebuchet MS", sans-serif;
  text-shadow: 3px 3px 0 #fff3a0;
  animation: questionPop calc(var(--anim-slow) * 2) ease forwards;
}

.effect-sparkle {
  width: 90px;
  height: 90px;
}

.effect-sparkle span {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffe56a;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: sparkleTwinkle calc(var(--anim-slow) * 2) ease-in-out infinite;
}

.effect-sparkle span:nth-child(1) { left: 10px; top: 8px; }
.effect-sparkle span:nth-child(2) { right: 8px; top: 18px; animation-delay: var(--anim-fast); }
.effect-sparkle span:nth-child(3) { left: 22px; bottom: 10px; animation-delay: var(--anim-normal); }
.effect-sparkle span:nth-child(4) { right: 16px; bottom: 16px; background: #fff; }

.effect-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: none;
  animation: flashFade var(--anim-fast) ease forwards;
}

.anim-pulse {
  animation: propPulse var(--anim-slow) ease-in-out;
}

.anim-shake {
  animation: propShake var(--anim-normal) ease-in-out;
}

.anim-pop {
  animation: propPop var(--anim-normal) ease;
}

.interaction-hit {
  animation: hitPulse calc(var(--anim-slow) * 2) ease-out infinite;
}