/* ============================================================================
   animations.css — motion. Kept in one place and fully disabled for users who
   prefer reduced motion (system preference OR the in-app setting).
   ============================================================================ */

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

@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Each view fades + rises gently — but only on navigation (.is-nav), never on
   the in-place refreshes triggered by data changes or the minute clock, so the
   UI stays calm while you interact with it. */
.content.is-nav .view { animation: viewIn var(--dur-3) var(--ease-out); }

/* Cards land in a soft stagger for a considered, unhurried feel. */
.content.is-nav .dash-grid > *,
.content.is-nav .area-grid > *,
.content.is-nav .habit-grid > *,
.content.is-nav .goal-grid > *,
.content.is-nav .settings-grid > * {
  animation: viewIn var(--dur-3) var(--ease-out) both;
}
.content.is-nav .dash-grid > *:nth-child(2), .content.is-nav .area-grid > *:nth-child(2),
.content.is-nav .habit-grid > *:nth-child(2), .content.is-nav .goal-grid > *:nth-child(2) { animation-delay: 40ms; }
.content.is-nav .dash-grid > *:nth-child(3), .content.is-nav .area-grid > *:nth-child(3),
.content.is-nav .habit-grid > *:nth-child(3), .content.is-nav .goal-grid > *:nth-child(3) { animation-delay: 80ms; }
.content.is-nav .dash-grid > *:nth-child(4), .content.is-nav .area-grid > *:nth-child(4),
.content.is-nav .habit-grid > *:nth-child(4), .content.is-nav .goal-grid > *:nth-child(4) { animation-delay: 120ms; }
.content.is-nav .dash-grid > *:nth-child(n+5), .content.is-nav .area-grid > *:nth-child(n+5),
.content.is-nav .habit-grid > *:nth-child(n+5), .content.is-nav .goal-grid > *:nth-child(n+5) { animation-delay: 160ms; }

/* ---- Respect reduced motion (system + in-app toggle) -------------------- */
@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;
  }
}
:root[data-reduce-motion='true'] *,
:root[data-reduce-motion='true'] *::before,
:root[data-reduce-motion='true'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}