////
///
/// Swing Animations Mixin Module
/// ===========================================================================
///
/// Provides pendulum-style swinging animations with customizable angles.
/// Includes variants for speed, origin point, and swing direction. Useful
/// for hanging elements, bell effects, and playful UI interactions.
///
/// @group Animations
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
///
////


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

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


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


///
/// Swing Animation
/// ---------------------------------------------------------------------------
/// Creates a swinging motion animation.
///
/// @name animate_swing
/// @param {Angle} $angle [15deg] - Maximum angle to swing
/// @param {Time} $duration [$animate_base_duration] - Animation duration
/// @param {String} $timing_function [ease-in-out] - Timing function
/// @param {Number|String} $iteration_count - Number of iterations
///
/// @example scss - Basic usage
///   .pendulum {
///     @include animate_swing;
///   }
///
@mixin animate_swing(
    $angle: 15deg,
    $duration: $animate_base_duration,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_swing,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_swing {
        0%, 100% { transform: rotate(0deg); }
        50% { transform: rotate($angle); }
    }
}

.animate_swing {
    @include animate_swing(15deg);
}


// Gentle Swing Animation
// ----------------------------------------------------------------------------
///
/// Gentle Swing Animation
/// Creates a slower, more subtle swinging motion.
/// @name animate_swing_slow
/// @param {Angle} $angle [10deg] - The maximum angle to swing.
/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the swing animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_swing_slow(
    $angle: 10deg,
    $duration: $animate_base_duration_slow,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_swing_slow,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_swing_slow {
        0%, 100% { transform: rotate(0deg); }
        50% { transform: rotate($angle); }
    }
}

.animate_swing_slow {
    @include animate_swing_slow();
}


// Rapid Swing Animation
// ----------------------------------------------------------------------------


///
/// Rapid Swing Animation
/// Creates a faster and more exaggerated swinging motion.
/// @name animate_swing_fast
/// @param {Angle} $angle [20deg] - The maximum angle to swing.
/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the swing animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_swing_fast(
    $angle: 20deg,
    $duration: $animate_base_duration_fast,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_swing_fast,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_swing_fast {
        0%, 100% { transform: rotate(0deg); }
        50% { transform: rotate($angle); }
    }
}

.animate_swing_fast {
    @include animate_swing_fast();
}


// Swing with Fade Animation
// ----------------------------------------------------------------------------


///
/// Swing with Fade Animation
/// Creates a swinging motion with a fading effect.
/// @name animate_swing_fade
/// @param {Angle} $angle [15deg] - The maximum angle to swing.
/// @param {Duration} $duration [$animate_base_duration] - The duration of the swing animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_swing_fade(
    $angle: 15deg,
    $duration: $animate_base_duration,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_swing_fade,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_swing_fade {
        0%, 100% {
            transform: rotate(0deg);
            opacity: 1;
        }
        50% {
            transform: rotate($angle);
            opacity: 0.5;
        }
    }
}

.animate_swing_fade {
    @include animate_swing_fade();
}



// @-webkit-keyframes swing {
//     20% {
//       -webkit-transform: rotate3d(0, 0, 1, 15deg);
//       transform: rotate3d(0, 0, 1, 15deg);
//     }

//     40% {
//       -webkit-transform: rotate3d(0, 0, 1, -10deg);
//       transform: rotate3d(0, 0, 1, -10deg);
//     }

//     60% {
//       -webkit-transform: rotate3d(0, 0, 1, 5deg);
//       transform: rotate3d(0, 0, 1, 5deg);
//     }

//     80% {
//       -webkit-transform: rotate3d(0, 0, 1, -5deg);
//       transform: rotate3d(0, 0, 1, -5deg);
//     }

//     100% {
//       -webkit-transform: rotate3d(0, 0, 1, 0deg);
//       transform: rotate3d(0, 0, 1, 0deg);
//     }
//   }

//   @keyframes swing {
//     20% {
//       -webkit-transform: rotate3d(0, 0, 1, 15deg);
//       transform: rotate3d(0, 0, 1, 15deg);
//     }

//     40% {
//       -webkit-transform: rotate3d(0, 0, 1, -10deg);
//       transform: rotate3d(0, 0, 1, -10deg);
//     }

//     60% {
//       -webkit-transform: rotate3d(0, 0, 1, 5deg);
//       transform: rotate3d(0, 0, 1, 5deg);
//     }

//     80% {
//       -webkit-transform: rotate3d(0, 0, 1, -5deg);
//       transform: rotate3d(0, 0, 1, -5deg);
//     }

//     100% {
//       -webkit-transform: rotate3d(0, 0, 1, 0deg);
//       transform: rotate3d(0, 0, 1, 0deg);
//     }
//   }

//   .swing {
//     -webkit-transform-origin: top center;
//     transform-origin: top center;
//     -webkit-animation-name: swing;
//     animation-name: swing;
//   }