/* ============================================
   ANIMATIONS.CSS — FitnessView v2
   Keyframes, transitions, reduced-motion
   ============================================ */

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

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

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

@keyframes aiGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(191, 90, 242, 0.15); }
  50% { box-shadow: 0 0 32px rgba(191, 90, 242, 0.35); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

@keyframes sheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes sheetOut {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(191, 90, 242, 0.4); }
  50% { box-shadow: 0 4px 32px rgba(191, 90, 242, 0.65); }
}

/* ---- Applied Animations ---- */
.card { animation: fadeInUp 0.4s ease-out both; }
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 50ms; }
.card:nth-child(3) { animation-delay: 100ms; }
.card:nth-child(4) { animation-delay: 150ms; }
.card:nth-child(5) { animation-delay: 200ms; }

.card-ai { animation: aiGlow 3s ease-in-out infinite; }

.tab-panel.active { animation: fadeIn 0.2s ease; }

.toast:not(.hidden) { animation: toastIn 0.3s ease forwards; }
.toast.toast-exit { animation: toastOut 0.3s ease forwards; }

.bottom-sheet-panel { animation: sheetIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; }
.bottom-sheet-panel.sheet-exit { animation: sheetOut 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }

.fab-ai { animation: fabPulse 3s ease-in-out infinite; }

/* Rings fill via JS setting stroke-dashoffset inline */
.ring-path { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* Bar chart bar fill */
.bar-fill { transition: height 0.8s ease, y 0.8s ease; }

/* Color morph body background */
body { transition: background-image 2s ease; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .card-ai { animation: none; box-shadow: 0 0 16px rgba(191, 90, 242, 0.2); }
  .fab-ai { animation: none; }
  .ring-path { transition: none; }
  .bar-fill { transition: none; }
  .skeleton::after { animation: none; }
}