/**
 * animations.css
 * BIXOR Exchange - Keyframe Animations & Animation Utilities
 *
 * Defines all reusable CSS animations for the application.
 * All durations and easings reference tokens from variables.css.
 *
 * Depends on: variables.css
 */

/* ============================================================
 * KEYFRAME DEFINITIONS
 * ============================================================ */

/**
 * fadeIn
 * Simple opacity fade from invisible to visible.
 * Usage: element enters the DOM or becomes visible.
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * fadeOut
 * Simple opacity fade from visible to invisible.
 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/**
 * slideUp
 * Element slides up from 20px below its final position while fading in.
 * Usage: cards, modals, list items entering the viewport.
 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * slideDown
 * Element slides down from 20px above its final position while fading in.
 * Usage: dropdowns, tooltips appearing below a trigger.
 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * slideInRight
 * Element slides in from the right edge.
 * Usage: page transitions, side panels.
 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/**
 * shimmer
 * Animated gradient sweep used for skeleton / loading placeholder screens.
 * Apply to an element with a gradient background-image.
 * Usage: SkeletonLoader component.
 */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/**
 * ripple
 * Circular ripple that expands from the tap/click origin and fades out.
 * Usage: Button component ripple effect.
 */
@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.6;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/**
 * spin
 * Continuous 360° rotation used for loading spinners / indicators.
 * Usage: circular progress indicators, refresh icons.
 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/**
 * pulse
 * Subtle scale pulse to draw attention to an element.
 * Usage: notification badges, live indicators.
 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/**
 * bounce
 * Vertical bounce for empty-state illustrations or success icons.
 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-8px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/**
 * scaleIn
 * Element scales from 0.9 to 1 while fading in.
 * Usage: modal dialogs, popovers.
 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**
 * countUp
 * Subtle scale pop for number changes (price updates).
 */
@keyframes countUp {
  0% {
    transform: translateY(4px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
 * ANIMATION UTILITY CLASSES
 * ============================================================ */

/**
 * .animate-fade-in
 * Fades an element in over 300ms using the material easing curve.
 */
.animate-fade-in {
  animation: fadeIn var(--transition-base) var(--easing-material) both;
}

/**
 * .animate-fade-out
 * Fades an element out over 300ms.
 */
.animate-fade-out {
  animation: fadeOut var(--transition-base) var(--easing-material) both;
}

/**
 * .animate-slide-up
 * Slides an element up from 20px below while fading in (300ms).
 */
.animate-slide-up {
  animation: slideUp var(--transition-base) var(--easing-material) both;
}

/**
 * .animate-slide-down
 * Slides an element down from 20px above while fading in (300ms).
 */
.animate-slide-down {
  animation: slideDown var(--transition-base) var(--easing-material) both;
}

/**
 * .animate-slide-in-right
 * Slides an element in from the right (300ms).
 */
.animate-slide-in-right {
  animation: slideInRight var(--transition-base) var(--easing-material) both;
}

/**
 * .animate-scale-in
 * Scales an element in from 0.9 (300ms). Good for modals.
 */
.animate-scale-in {
  animation: scaleIn var(--transition-base) var(--easing-material) both;
}

/**
 * .animate-spin
 * Continuously rotates an element (used for loading spinners).
 */
.animate-spin {
  animation: spin 1s linear infinite;
}

/**
 * .animate-pulse
 * Subtle pulsing scale animation (used for live badges).
 */
.animate-pulse {
  animation: pulse 2s var(--easing-ease-in-out) infinite;
}

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

/**
 * .animate-shimmer
 * Shimmer sweep for skeleton loading screens.
 * The element must have a gradient background-image set.
 */
.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.03) 80%
  );
  background-size: 1000px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ============================================================
 * ANIMATION DELAY HELPERS
 * ============================================================ */

.delay-75   { animation-delay: 75ms; }
.delay-100  { animation-delay: 100ms; }
.delay-150  { animation-delay: 150ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-500  { animation-delay: 500ms; }
.delay-700  { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ============================================================
 * REDUCED MOTION SUPPORT
 * Respects the user's OS-level "Reduce Motion" preference.
 * All animations are disabled when this media query matches.
 * ============================================================ */

@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;
  }
}