////
///
/// Tada Animations Mixin Module
/// ===========================================================================
///
/// Provides celebratory "tada" animations with combined scaling and rotation.
/// Creates exciting reveal effects for achievements and highlights. Perfect
/// for success states, rewards, and dramatic presentations.
///
/// @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
// ============================================================================


///
/// Tada Animation
/// ---------------------------------------------------------------------------
/// Creates a "tada" effect with scaling and rotating.
///
/// @name animate_tada
/// @param {Number} $scale [1.1] - Scale factor for the animation
/// @param {Time} $duration - Animation duration
/// @param {String} $timing_function [ease-in-out] - Timing function
/// @param {Number|String} $iteration_count - Number of iterations
///
/// @example scss - Basic usage
///   .achievement {
///     @include animate_tada;
///   }
///
@mixin animate_tada(
    $scale: 1.1,
    $duration: $animate_base_duration * 2,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_tada,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_tada {
        0%, 100% { transform: scale(1); }
        10%, 20% { transform: scale(0.9) rotate(-3deg); }
        30%, 50%, 70%, 90% { transform: scale($scale) rotate(3deg); }
        40%, 60%, 80% { transform: scale($scale) rotate(-3deg); }
    }
}




// Gentle Tada Animation
// ----------------------------------------------------------------------------

///
/// Gentle Tada Animation
/// A more subtle version of the Tada animation.
/// @name animate_tada_slow
/// @param {Number} $scale [1.05] - The scale factor for the animation.
/// @param {Duration} $duration [$animate_base_duration_slow/// 2] - The duration of the animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_tada_slow(
    $scale: 1.05,
    $duration: $animate_base_duration_slow * 2,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_tada_slow,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_tada_slow {
        0%, 100% { transform: scale(1); }
        10%, 20% { transform: scale(0.95) rotate(-2deg); }
        30%, 50%, 70%, 90% { transform: scale($scale) rotate(2deg); }
        40%, 60%, 80% { transform: scale($scale) rotate(-2deg); }
    }
}



// Rapid Tada Animation
// ----------------------------------------------------------------------------

///
/// Rapid Tada Animation
/// A faster and more exaggerated version of the Tada animation.
/// @name animate_tada_fast
/// @param {Number} $scale [1.15] - The scale factor for the animation.
/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_tada_fast(
    $scale: 1.15,
    $duration: $animate_base_duration,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_tada_fast,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_tada_fast {
        0%, 100% { transform: scale(1); }
        10%, 20% { transform: scale(0.85) rotate(-4deg); }
        30%, 50%, 70%, 90% { transform: scale($scale) rotate(4deg); }
        40%, 60%, 80% { transform: scale($scale) rotate(-4deg); }
    }
}


// Tada with Fade Animation
// ----------------------------------------------------------------------------

///
/// Tada with Fade Animation
/// Adds a fading effect to the Tada animation.
/// @name animate_tada_fade
/// @param {Number} $scale [1.1] - The scale factor for the animation.
/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_tada_fade(
    $scale: 1.1,
    $duration: $animate_base_duration * 2,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_tada_fade,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_tada_fade {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale($scale) rotate(3deg);
            opacity: 0.5;
        }
    }
}



// @-webkit-keyframes tada {
//     from {
//       -webkit-transform: scale3d(1, 1, 1);
//       transform: scale3d(1, 1, 1);
//     }

//     10%, 20% {
//       -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
//       transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
//     }

//     30%, 50%, 70%, 90% {
//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
//     }

//     40%, 60%, 80% {
//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
//     }

//     100% {
//       -webkit-transform: scale3d(1, 1, 1);
//       transform: scale3d(1, 1, 1);
//     }
//   }

//   @keyframes tada {
//     from {
//       -webkit-transform: scale3d(1, 1, 1);
//       transform: scale3d(1, 1, 1);
//     }

//     10%, 20% {
//       -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
//       transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
//     }

//     30%, 50%, 70%, 90% {
//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
//     }

//     40%, 60%, 80% {
//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
//     }

//     100% {
//       -webkit-transform: scale3d(1, 1, 1);
//       transform: scale3d(1, 1, 1);
//     }
//   }

//   .tada {
//     -webkit-animation-name: tada;
//     animation-name: tada;
//   }