// ============================================================================
// Poster
// ============================================================================

////
/// 
/// Shake Animations Mixin Module
/// ===========================================================================
/// 
/// This module ...
/// 
/// 
/// @group Animations
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @todo None
/// @access public
/// 
////


// ============================================================================
// Use
// ============================================================================

@use "sass:math";
@use "../dev" as *;
@use "../variables" as *;
@use "../keyframes" as *;
@use "base" as *;


// ============================================================================
// Mixins
// ============================================================================



///
/// Shake Animation
/// Creates a shake animation with configurable amplitude, duration, timing function,
/// and iteration count.
/// @name animate_shake
/// @param {Number} $amplitude [15deg] - The maximum angle of the shake.
/// @param {Number} $duration [math.div($animate_base_duration, 2)] - The duration of the animation.
/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
///
@mixin animate_shake(
    $amplitude: 15deg, 
    $duration: math.div($animate_base_duration, 2),
    $timing_function: ease-in-out, 
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_shake,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_shake {
        0% { transform: rotate(-$amplitude); }
        4% { transform: rotate($amplitude); }
        8%, 24% { transform: rotate(-1.2 * $amplitude); }
        12%, 28% { transform: rotate(1.2 * $amplitude); }
        16% { transform: rotate(-1.4 * $amplitude); }
        20% { transform: rotate(1.4 * $amplitude); }
        32% { transform: rotate(-0.8 * $amplitude); }
        36% { transform: rotate(0.8 * $amplitude); }
        40%, 100% { transform: rotate(0deg); }
    }
}


// Gentle Shake Animation
// ----------------------------------------------------------------------------

///
/// Gentle Shake Animation
/// Creates a gentle shake animation with a smaller amplitude, designed for
/// slower and less intense shaking effects.
/// @name animate_shake_slow
/// @param {Number} $amplitude [10deg] - The maximum angle of the shake.
/// @param {Number} $duration [math.div($animate_base_duration_slow, 2)] - The duration of the animation.
/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
///
@mixin animate_shake_slow(
    $amplitude: 10deg, 
    $duration: math.div($animate_base_duration_slow, 2),
    $timing_function: ease-in-out, 
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_shake_slow,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_shake_slow {
        0%, 100% { transform: rotate(0deg); }
        10%, 30%, 50%, 70%, 90% { transform: rotate(-$amplitude); }
        20%, 40%, 60%, 80% { transform: rotate($amplitude); }
    }
}



// Horizontal Shake Animation
// ----------------------------------------------------------------------------

///
/// Horizontal Shake Animation
/// Creates a horizontal shake animation, moving the element side to side
/// by a configurable distance.
/// @name animate_shake_horizontal
/// @param {Number} $distance [10px] - The distance to move the element.
/// @param {Number} $duration [math.div($animate_base_duration, 2)] - The duration of the animation.
/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
///
@mixin animate_shake_horizontal(
    $distance: 10px, 
    $duration: math.div($animate_base_duration, 2),
    $timing_function: ease-in-out, 
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_shake_horizontal,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_shake_horizontal {
        0%, 100% { transform: translateX(0); }
        25%, 75% { transform: translateX(-$distance); }
        50% { transform: translateX($distance); }
    }
}



// @-webkit-keyframes shake {
//     from, 100% {
//       -webkit-transform: translate3d(0, 0, 0);
//       transform: translate3d(0, 0, 0);
//     }
  
//     10%, 30%, 50%, 70%, 90% {
//       -webkit-transform: translate3d(-10px, 0, 0);
//       transform: translate3d(-10px, 0, 0);
//     }
  
//     20%, 40%, 60%, 80% {
//       -webkit-transform: translate3d(10px, 0, 0);
//       transform: translate3d(10px, 0, 0);
//     }
//   }
  
//   @keyframes shake {
//     from, 100% {
//       -webkit-transform: translate3d(0, 0, 0);
//       transform: translate3d(0, 0, 0);
//     }
  
//     10%, 30%, 50%, 70%, 90% {
//       -webkit-transform: translate3d(-10px, 0, 0);
//       transform: translate3d(-10px, 0, 0);
//     }
  
//     20%, 40%, 60%, 80% {
//       -webkit-transform: translate3d(10px, 0, 0);
//       transform: translate3d(10px, 0, 0);
//     }
//   }
  
//   .shake {
//     -webkit-animation-name: shake;
//     animation-name: shake;
//   }