/* ============================================================
   MenoWell — Animations & Microinteractions
   ============================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes successPulse {
  0% { box-shadow: 0 0 0 0 rgba(126,146,127,0.4); }
  60% { box-shadow: 0 0 0 8px rgba(126,146,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(126,146,127,0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Page transition */
.page-container > * {
  animation: slideUp 250ms ease-out both;
}

.card {
  animation: slideUp 250ms ease-out both;
}

/* Staggered card entry */
.page-container .card:nth-child(1) { animation-delay: 0ms; }
.page-container .card:nth-child(2) { animation-delay: 40ms; }
.page-container .card:nth-child(3) { animation-delay: 80ms; }
.page-container .card:nth-child(4) { animation-delay: 120ms; }
.page-container .card:nth-child(5) { animation-delay: 160ms; }
.page-container .card:nth-child(6) { animation-delay: 200ms; }
.page-container .card:nth-child(7) { animation-delay: 240ms; }
.page-container .card:nth-child(8) { animation-delay: 280ms; }

/* Toast slide in */
.toast {
  animation: slideUp 200ms ease-out both;
}
.toast.is-leaving {
  animation: fadeOut 200ms ease-in both;
}

/* Modal */
.modal-backdrop { animation: fadeIn 150ms ease-out both; }
.modal { animation: scaleIn 200ms ease-out both; }

/* Save success flash */
.flash-success {
  animation: successPulse 1.4s ease-out;
  border-color: var(--color-success-dark) !important;
}

/* Quick log items */
.quick-strip__btn { animation: slideUp 300ms ease-out both; }
.quick-strip__btn:nth-child(1) { animation-delay: 0ms; }
.quick-strip__btn:nth-child(2) { animation-delay: 30ms; }
.quick-strip__btn:nth-child(3) { animation-delay: 60ms; }
.quick-strip__btn:nth-child(4) { animation-delay: 90ms; }
.quick-strip__btn:nth-child(5) { animation-delay: 120ms; }
.quick-strip__btn:nth-child(6) { animation-delay: 150ms; }

/* Onboarding card */
.onboarding__card { animation: scaleIn 350ms ease-out both; }

/* Number count-up helper (JS-driven) */
.count-up { font-variant-numeric: tabular-nums; }

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

/* Draws the eye to a card opened from a home-screen shortcut */
.is-highlighted { animation: highlight-pulse 1.6s ease-out; }
@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 var(--color-primary-dark); }
  40% { box-shadow: 0 0 0 6px var(--color-primary); }
  100% { box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) { .is-highlighted { animation: none; outline: 2px solid var(--color-primary-dark); } }