/* Every animation here is suppressed by body.reduced-motion, which main.js
   sets from prefers-reduced-motion plus the explicit setting. Nothing becomes
   unusable when they are off — only calmer. */

@keyframes cp-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cp-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cp-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes cp-pop {
  from {
    transform: scale(0.85);
  }
  to {
    transform: scale(1);
  }
}

@keyframes cp-hint {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 209, 102, 0);
  }
  50% {
    box-shadow: inset 0 0 0 4px rgba(255, 209, 102, 0.95);
  }
}

@keyframes cp-needed {
  0%,
  100% {
    background-color: rgba(255, 209, 102, 0.22);
  }
  50% {
    background-color: rgba(255, 209, 102, 0.55);
  }
}

@keyframes cp-star-pop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cp-star--big {
  animation: cp-star-pop 320ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.cp-cell.is-filled {
  animation: cp-pop 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

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