/* ============================================================================
   DESIGN SYSTEM — ANIMATIONS  (Stage 1)
   ----------------------------------------------------------------------------
   GPU-friendly motion only: transform + opacity. Durations driven by the
   --animation-speed tokens so the whole app's pace is tuned from one place.
   Respects prefers-reduced-motion.
   ========================================================================= */

/* --- Keyframes ----------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- Reusable animation utilities ---------------------------------------- */
.anim-fade-in    { animation: fadeIn      var(--animation-speed-slow) var(--ease-out) both; }
.anim-fade-up    { animation: fadeInUp    var(--animation-speed-slow) var(--ease-out) both; }
.anim-fade-scale { animation: fadeInScale var(--animation-speed-slow) var(--ease-out) both; }

/* Subtle page-content entrance — applied globally in components.css to
   .content-wrapper so navigating between pages feels smooth, not jarring. */

/* --- Loading indicator (reusable spinner) -------------------------------- */
.u-spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--primary-soft-strong);
  border-top-color: var(--primary);
  border-radius: var(--radius-pill);
  animation: spin 0.7s linear infinite;
  vertical-align: -0.15em;
}

/* --- Skeleton shimmer (for future loading states) ------------------------ */
.u-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-hover) 37%,
    var(--surface-2) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* --- Respect user motion preferences ------------------------------------- */
@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;
  }
}