/**
 * Buttery smooth animations - Apple-style (coconut oil dripping)
 */

/* ===== CUSTOM EASING (Apple DNA) ===== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Colors */
  --green-primary: #34C759;
  --indigo-accent: #5E5CE6;
  --blue-secondary: #007AFF;
  --red-error: #FF3B30;
  --orange-warning: #FF9500;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-indigo: 0 8px 20px rgba(94, 92, 230, 0.3);
}

/* Custom shadow utilities */
.shadow-indigo {
  box-shadow: 0 8px 20px rgba(94, 92, 230, 0.3);
}

.animate-slide-up {
  animation: slideUpFadeIn 0.4s var(--ease-out) both;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease both;
}

.animate-shake {
  animation: shake 0.5s ease both;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ===== PAGE TRANSITIONS ===== */
@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: slideUpFadeIn 0.6s var(--ease-out);
}

/* ===== CARD ANIMATIONS ===== */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card-enter {
  animation: cardEnter 0.5s var(--ease-out);
  animation-fill-mode: both;
}

/* ===== METRIC COUNTER ANIMATIONS ===== */
@keyframes numberPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.metric-changed {
  animation: numberPulse 0.3s var(--ease-out);
}

/* ===== HEALTH PULSE ===== */
@keyframes healthPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

.health-pulse {
  animation: healthPulse 2s ease-in-out infinite;
}

/* ===== FILTER CHIPS ===== */
.filter-chip {
  position: relative;
  transition: all 0.3s var(--ease-out);
}

.filter-chip:hover {
  transform: translateY(-2px);
}

.filter-chip.active {
  transform: translateY(-2px) scale(1.05);
}

@keyframes chipActivate {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1.05); }
}

.filter-chip-activate {
  animation: chipActivate 0.4s var(--spring);
}

/* ===== ACTIVITY FEED ===== */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.activity-enter {
  animation: slideInRight 0.4s var(--ease-out);
}

/* ===== STATUS BADGE TRANSITIONS ===== */
@keyframes statusFlash {
  0%, 100% { opacity: 1; }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

.status-changed {
  animation: statusFlash 0.4s var(--ease-out);
}

/* ===== BUTTON PRESS ===== */
.button-press:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* ===== EMPTY STATE ===== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

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

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ===== GLASS MORPHISM ===== */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ===== PROGRESS BAR ===== */
@keyframes progressFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-fill {
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}

/* ===== FADE TRANSITIONS ===== */
.fade-enter {
  animation: fadeIn 0.3s ease;
}

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

.fade-exit {
  animation: fadeOut 0.3s ease;
}

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