/* Motion for Clock Quest. All decorative motion is disabled under
   prefers-reduced-motion / the .cq-reduced body class. */

@keyframes cq-wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(2deg); }
}
.cq-wobble { animation: cq-wobble 0.4s ease; }

@keyframes cq-pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.cq-mode-card, .cq-level-bubble, .cq-celebrate-card {
  animation: cq-pop-in 0.25s ease both;
}

@keyframes cq-star-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.cq-cel-star.on { display: inline-block; animation: cq-star-pop 0.5s ease both; }
.cq-cel-star.on:nth-child(2) { animation-delay: 0.15s; }
.cq-cel-star.on:nth-child(3) { animation-delay: 0.3s; }

.cq-match-option.cq-correct { animation: cq-star-pop 0.4s ease; }

.cq-reduced *,
.cq-reduced *::before,
.cq-reduced *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
.cq-reduced .cq-hand { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cq-wobble, .cq-mode-card, .cq-level-bubble, .cq-celebrate-card,
  .cq-cel-star.on, .cq-match-option.cq-correct {
    animation: none !important;
  }
  .cq-hand { transition: none !important; }
}