/*
 * Animation Tokens & Patterns
 *
 * Centralized animation definitions for consistent motion design.
 * Use these tokens in block CSS for coordinated transitions.
 *
 * Synced with Figma: oMpX9tPDpKvnEIkDDqiSQ9
 */

:root {
  /* ============================================
     DURATION TOKENS
     ============================================ */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 450ms;
  --duration-slower: 600ms;

  /* ============================================
     EASING TOKENS
     Perceptually smooth curves for UI motion
     ============================================ */
  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.2, 1);

  /* ============================================
     TRANSFORM TOKENS
     Consistent movement distances
     ============================================ */
  --translate-sm: 8px;
  --translate-md: 16px;
  --translate-lg: 24px;

  /* ============================================
     STAGGER TOKENS
     For sequenced animations
     ============================================ */
  --stagger-delay: 100ms;
  --stagger-delay-fast: 50ms;
  --stagger-delay-slow: 150ms;

  /* ============================================
     COMPOSITE TRANSITIONS
     Ready-to-use transition strings
     ============================================ */
  --transition-fade: opacity var(--duration-slow) var(--ease-spring);
  --transition-slide: transform var(--duration-slow) var(--ease-spring);
  --transition-fade-slide:
    opacity var(--duration-slow) var(--ease-spring),
    transform var(--duration-slow) var(--ease-spring);
  --transition-color: color var(--duration-fast) var(--ease-default);
  --transition-background: background-color var(--duration-fast) var(--ease-default);
}

/* ============================================
   ENTRANCE ANIMATION UTILITIES
   Add these classes to elements for common patterns
   ============================================ */

/* Fade up entrance - initial state */
.anim-fade-up {
  opacity: 0;
  transform: translateY(var(--translate-md));
  transition: var(--transition-fade-slide);
  will-change: opacity, transform;
}

/* Fade in entrance - initial state */
.anim-fade-in {
  opacity: 0;
  transition: var(--transition-fade);
  will-change: opacity;
}

/* Triggered state - add .in-view or .anim-ready to parent/element */
.in-view .anim-fade-up,
.in-view .anim-fade-in,
.anim-ready.anim-fade-up,
.anim-ready.anim-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   STAGGER UTILITIES
   Apply to children for sequenced entrance
   ============================================ */
.stagger-children > *:nth-child(1) { transition-delay: calc(var(--stagger-delay) * 0); }
.stagger-children > *:nth-child(2) { transition-delay: calc(var(--stagger-delay) * 1); }
.stagger-children > *:nth-child(3) { transition-delay: calc(var(--stagger-delay) * 2); }
.stagger-children > *:nth-child(4) { transition-delay: calc(var(--stagger-delay) * 3); }
.stagger-children > *:nth-child(5) { transition-delay: calc(var(--stagger-delay) * 4); }
.stagger-children > *:nth-child(6) { transition-delay: calc(var(--stagger-delay) * 5); }
.stagger-children > *:nth-child(7) { transition-delay: calc(var(--stagger-delay) * 6); }
.stagger-children > *:nth-child(8) { transition-delay: calc(var(--stagger-delay) * 7); }

/* ============================================
   REDUCED MOTION
   Respect user preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}