/* CreatorHQ — motion / microinteractions. All of it switches off with
   the system "Reduce motion" setting. */

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Only a real page change animates; same-page redraws don't (no flicker). */
.page-enter { animation: fade-slide-in 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.no-enter .page-enter { animation: none; }

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast { animation: toast-in 200ms cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes check-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.checkbox-row input[type="checkbox"]:checked { animation: check-bounce 220ms ease-out; }
.checkbox-row.just-completed { animation: complete-flash 600ms ease-out; border-radius: 8px; }
@keyframes complete-flash {
  0%   { background: var(--success-bg); }
  100% { background: transparent; }
}

.progress-bar-fill { transition: width 400ms ease-out; }

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