// Animation Mixins
// Reusable SCSS mixins for creating custom animations


// Generic animation mixin
@mixin animate(
  $name,
  $duration: 0.3s,
  $timing-function: ease-out,
  $delay: motion.$semantic-motion-transition-delay-0,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: both
) {
  animation-name: $name;
  animation-duration: $duration;
  animation-timing-function: $timing-function;
  animation-delay: $delay;
  animation-iteration-count: $iteration-count;
  animation-direction: $direction;
  animation-fill-mode: $fill-mode;
}

// Transition mixin with design system tokens
@mixin transition(
  $property: motion.$semantic-motion-transition-property-all,
  $duration: 0.3s,
  $timing-function: ease,
  $delay: motion.$semantic-motion-transition-delay-0
) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing-function;
  transition-delay: $delay;
}

// Fade animation mixin
@mixin fade-animation($direction: 'in', $distance: 24px) {
  @if $direction == 'in' {
    from {
      opacity: 0;
      transform: translateY($distance);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  } @else {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-#{$distance});
    }
  }
}

// Slide animation mixin
@mixin slide-animation($direction: 'up', $distance: 100%) {
  @if $direction == 'up' {
    from { transform: translateY($distance); }
    to { transform: translateY(0); }
  } @else if $direction == 'down' {
    from { transform: translateY(-$distance); }
    to { transform: translateY(0); }
  } @else if $direction == 'left' {
    from { transform: translateX($distance); }
    to { transform: translateX(0); }
  } @else if $direction == 'right' {
    from { transform: translateX(-$distance); }
    to { transform: translateX(0); }
  }
}

// Scale animation mixin
@mixin scale-animation($from: 0, $to: 1) {
  from {
    transform: scale($from);
  }
  to {
    transform: scale($to);
  }
}

// Rotate animation mixin
@mixin rotate-animation($from: 0deg, $to: 360deg) {
  from {
    transform: rotate($from);
  }
  to {
    transform: rotate($to);
  }
}

// Hover animation mixin
@mixin hover-animation($property: transform, $value: scale(1.05), $duration: 0.15s) {
  transition: $property $duration ease;
  
  &:hover {
    #{$property}: $value;
  }
}

// Loading animation mixin
@mixin loading-animation($size: 40px, $color: currentColor) {
  width: $size;
  height: $size;
  border: 3px solid rgba($color, 0.3);
  border-radius: 50%;
  border-top-color: $color;
  animation: spin 0.6sest ease-in-out infinite;
}

// Keyframes for common animations
@keyframes spin {
  to { transform: rotate(360deg); }
}

// Staggered animation mixin for lists
@mixin staggered-animation($base-delay: motion.$semantic-motion-transition-delay-100, $animation: fadeInUp 0.3s ease-out) {
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation: $animation;
      animation-delay: #{$base-delay * $i};
      animation-fill-mode: both;
    }
  }
}