/* ==========================================================================
   HealthFlow Health OS - animations.css
   All keyframe definitions, animation utilities, transitions,
   micro-interactions, and reduced-motion overrides.
   ========================================================================== */

/* ==========================================================================
   1. @keyframes Definitions
   ========================================================================== */

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

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

/* --- Slide In --- */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Slide Out --- */
@keyframes slideOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-24px);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(100% + 24px));
  }
}

/* --- Scale --- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* --- Shimmer (skeleton loaders) --- */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

/* --- Spin (loading spinner) --- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Pulse (FAB button) --- */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--hf-color-primary-rgb, 59, 130, 246), 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(var(--hf-color-primary-rgb, 59, 130, 246), 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--hf-color-primary-rgb, 59, 130, 246), 0);
    transform: scale(1);
  }
}

/* --- Bounce --- */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-12px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* --- Ripple (button click effect) --- */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- Count Up (animated numbers — uses transform) --- */
@keyframes countUp {
  from {
    transform: translateY(0.6em);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Progress Fill (linear progress bars) --- */
@keyframes progressFill {
  from {
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* --- Ring Progress (circular / SVG progress) --- */
@keyframes ringProgress {
  from {
    stroke-dashoffset: var(--hf-ring-circumference, 283);
  }
  to {
    stroke-dashoffset: var(--hf-ring-offset, 0);
  }
}

/* --- Toast Slide In / Out --- */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 24px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(100% + 24px));
  }
}

/* --- Achievement Unlock (celebration animation) --- */
@keyframes achievementUnlock {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-10deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(3deg);
  }
  70% {
    transform: scale(0.95) rotate(-1deg);
  }
  85% {
    transform: scale(1.05) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* --- Heartbeat --- */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.15);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.12);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   2. Animation Utility Classes
   ========================================================================== */

.hf-animate-fade-in {
  animation: fadeIn 0.3s ease-out both;
}

.hf-animate-slide-up {
  animation: slideInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hf-animate-scale-in {
  animation: scaleIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Triggers counter animation — apply to the number element */
.hf-animate-count {
  animation: countUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  display: inline-block;
}

/* --- Stagger Delay Utilities --- */
.hf-stagger-1 { animation-delay: 50ms; }
.hf-stagger-2 { animation-delay: 100ms; }
.hf-stagger-3 { animation-delay: 150ms; }
.hf-stagger-4 { animation-delay: 200ms; }
.hf-stagger-5 { animation-delay: 250ms; }
.hf-stagger-6 { animation-delay: 300ms; }

/* ==========================================================================
   3. Transition Utilities
   ========================================================================== */

.hf-transition-all {
  transition: all var(--hf-transition, 0.2s ease);
}

.hf-transition-colors {
  transition:
    color var(--hf-transition, 0.2s ease),
    background-color var(--hf-transition, 0.2s ease),
    border-color var(--hf-transition, 0.2s ease),
    fill var(--hf-transition, 0.2s ease),
    stroke var(--hf-transition, 0.2s ease);
}

.hf-transition-transform {
  transition: transform var(--hf-transition-spring, 0.2s cubic-bezier(0.22, 1, 0.36, 1));
}

/* ==========================================================================
   4. Micro-Interaction Classes
   ========================================================================== */

/* --- Hover Lift --- */
.hf-hover-lift {
  transition:
    transform var(--hf-transition, 0.2s ease),
    box-shadow var(--hf-transition, 0.2s ease);
  will-change: transform;
}

.hf-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--hf-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

/* --- Hover Scale --- */
.hf-hover-scale {
  transition: transform var(--hf-transition-spring, 0.2s cubic-bezier(0.22, 1, 0.36, 1));
  will-change: transform;
}

.hf-hover-scale:hover {
  transform: scale(1.04);
}

/* --- Active Press (scale down on :active) --- */
.hf-active-press {
  transition: transform 0.1s ease;
  will-change: transform;
}

.hf-active-press:active {
  transform: scale(0.95);
}

/* ==========================================================================
   5. Component-Specific Animation Helpers
   ========================================================================== */

/* Skeleton shimmer */
.hf-skeleton {
  background: linear-gradient(
    90deg,
    var(--hf-bg-secondary, #f0f0f0) 25%,
    var(--hf-bg-tertiary, #e0e0e0) 50%,
    var(--hf-bg-secondary, #f0f0f0) 75%
  );
  background-size: 936px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: var(--hf-radius-sm, 4px);
}

/* Spinner helper */
.hf-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--hf-border-color, #e0e0e0);
  border-top-color: var(--hf-primary, #3b82f6);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* FAB pulse wrapper */
.hf-fab-pulse {
  animation: pulse 2.4s ease-in-out infinite;
}

/* Progress bar fill — add to the inner fill element */
.hf-progress-bar-fill {
  transform-origin: left center;
  animation: progressFill 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Circular SVG ring progress — apply to the stroke element */
.hf-ring-progress {
  animation: ringProgress 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Toast notifications */
.hf-toast-enter {
  animation: toastSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hf-toast-exit {
  animation: toastSlideOut 0.25s ease-in both;
}

/* Achievement unlock */
.hf-achievement-unlock {
  animation: achievementUnlock 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Heartbeat */
.hf-heartbeat {
  animation: heartbeat 1.4s ease-in-out infinite;
  display: inline-block;
}

/* Bounce */
.hf-animate-bounce {
  animation: bounce 1s infinite;
}

/* Ripple container */
.hf-ripple-container {
  position: relative;
  overflow: hidden;
}

.hf-ripple-container .hf-ripple-wave {
  position: absolute;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: ripple 0.55s linear both;
}

/* Page transitions */
.hf-page-enter {
  animation: slideInUp 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hf-page-exit {
  animation: slideOutUp 200ms ease-in both;
}

/* ==========================================================================
   6. Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animation and transition durations globally */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  /* Skeleton — static, no shimmer */
  .hf-skeleton {
    animation: none;
    background: var(--hf-bg-secondary, #f0f0f0);
  }

  /* Spinner — static indicator, no rotation */
  .hf-spinner {
    animation: none;
    border-top-color: var(--hf-border-color, #e0e0e0);
    opacity: 0.5;
  }

  /* Remove motion from hover/active states */
  .hf-hover-lift:hover {
    transform: none;
  }

  .hf-hover-scale:hover {
    transform: none;
  }

  .hf-active-press:active {
    transform: none;
  }

  /* Remove FAB pulse */
  .hf-fab-pulse {
    animation: none;
  }

  /* Remove heartbeat */
  .hf-heartbeat {
    animation: none;
  }

  /* Remove bounce */
  .hf-animate-bounce {
    animation: none;
  }

  /* Stagger delays irrelevant — reset */
  .hf-stagger-1,
  .hf-stagger-2,
  .hf-stagger-3,
  .hf-stagger-4,
  .hf-stagger-5,
  .hf-stagger-6 {
    animation-delay: 0ms !important;
  }

  /* Progress bar — show filled state immediately */
  .hf-progress-bar-fill {
    animation: none;
    transform: scaleX(1);
  }

  /* Ring progress — show final state immediately */
  .hf-ring-progress {
    animation: none;
    stroke-dashoffset: var(--hf-ring-offset, 0);
  }

  /* Toasts — appear/disappear instantly, no slide */
  .hf-toast-enter,
  .hf-toast-exit {
    animation: none;
    transform: none;
    opacity: 1;
  }

  /* Achievement — appear instantly */
  .hf-achievement-unlock {
    animation: none;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  /* Ripple — suppress entirely */
  .hf-ripple-container .hf-ripple-wave {
    display: none;
  }
}