////
///
/// Wobble Keyframes Mixins Module
/// ===========================================================================
///
/// Defines keyframes for wobble animations including basic wobble, speed
/// variations, and wobble with scale. These keyframes create unsteady
/// oscillating effects for playful interactions.
///
/// @group Keyframes
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
///
////


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

@use "../../../variables" as *;
@use "../_base" as *;


// ============================================================================
// Basic Wobble Keyframes
// ============================================================================

///
/// Standard wobble effect.
///
/// @param {Angle} $angle [$animate_angle_wobble] - Maximum wobble angle
///
@mixin keyframes_wobble($angle: $animate_angle_wobble) {
    @include keyframes(animate_wobble) {
        0%, 100% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(-$angle);
        }
        50% {
            transform: rotate($angle);
        }
        75% {
            transform: rotate(-$angle);
        }
    }
}

///
/// Wobble with CSS custom property support.
///
@mixin keyframes_animate_wobble($angle: $animate_angle_wobble) {
    @include keyframes(animate_wobble) {
        0%, 100% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(calc(-1 * var(--animate-wobble-angle, #{$angle})));
        }
        50% {
            transform: rotate(var(--animate-wobble-angle, #{$angle}));
        }
        75% {
            transform: rotate(calc(-1 * var(--animate-wobble-angle, #{$angle})));
        }
    }
}


// ============================================================================
// Slow Wobble Keyframes
// ============================================================================

///
/// Gentler, slower wobble.
///
/// @param {Angle} $angle [3deg] - Maximum wobble angle
///
@mixin keyframes_wobble_slow($angle: $animate_angle_wobble_slow) {
    @include keyframes(animate_wobble_slow) {
        0%, 100% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(-$angle);
        }
        50% {
            transform: rotate($angle);
        }
        75% {
            transform: rotate(-$angle);
        }
    }
}


// ============================================================================
// Fast Wobble Keyframes
// ============================================================================

///
/// Faster, more intense wobble.
///
/// @param {Angle} $angle [10deg] - Maximum wobble angle
///
@mixin keyframes_wobble_fast($angle: $animate_angle_wobble_fast) {
    @include keyframes(animate_wobble_fast) {
        0%, 100% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(-$angle);
        }
        50% {
            transform: rotate($angle);
        }
        75% {
            transform: rotate(-$angle);
        }
    }
}


// ============================================================================
// Wobble with Scale Keyframes
// ============================================================================

///
/// Wobble combined with scale effect.
///
/// @param {Angle} $angle [5deg] - Wobble angle
/// @param {Number} $scale [1.1] - Scale factor
///
@mixin keyframes_wobble_scale($angle: $animate_angle_gentle, $scale: $animate_scale_bounce) {
    @include keyframes(animate_wobble_scale) {
        0%, 100% {
            transform: scale(1) rotate(0deg);
        }
        25% {
            transform: scale($scale) rotate(-$angle);
        }
        50% {
            transform: scale($scale) rotate($angle);
        }
        75% {
            transform: scale($scale) rotate(-$angle);
        }
    }
}


// ============================================================================
// Advanced Wobble Keyframes (from Animate.css)
// ============================================================================

///
/// Complex wobble with translation (Animate.css style).
///
@mixin keyframes_wobble_advanced() {
    @include keyframes(animate_wobble_advanced) {
        from {
            transform: none;
        }
        15% {
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
        30% {
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        }
        45% {
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        }
        60% {
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        }
        75% {
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        }
        to {
            transform: none;
        }
    }
}


// ============================================================================
// Horizontal Wobble Keyframes
// ============================================================================

///
/// Horizontal wobble (translateX).
///
/// @param {Length} $distance [5%] - Maximum horizontal distance
///
@mixin keyframes_wobble_horizontal($distance: $animate_wobble_distance) {
    @include keyframes(animate_wobble_horizontal) {
        0%, 100% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-$distance);
        }
        50% {
            transform: translateX($distance);
        }
        75% {
            transform: translateX(-$distance);
        }
    }
}


// ============================================================================
// Vertical Wobble Keyframes
// ============================================================================

///
/// Vertical wobble (translateY).
///
/// @param {Length} $distance [5%] - Maximum vertical distance
///
@mixin keyframes_wobble_vertical($distance: $animate_wobble_distance) {
    @include keyframes(animate_wobble_vertical) {
        0%, 100% {
            transform: translateY(0);
        }
        25% {
            transform: translateY(-$distance);
        }
        50% {
            transform: translateY($distance);
        }
        75% {
            transform: translateY(-$distance);
        }
    }
}


// ============================================================================
// Skew Wobble Keyframes
// ============================================================================

///
/// Wobble with skew effect.
///
/// @param {Angle} $skew [5deg] - Maximum skew angle
///
@mixin keyframes_wobble_skew($skew: $animate_angle_wobble_skew) {
    @include keyframes(animate_wobble_skew) {
        0%, 100% {
            transform: skewX(0deg);
        }
        25% {
            transform: skewX(-$skew);
        }
        50% {
            transform: skewX($skew);
        }
        75% {
            transform: skewX(-$skew);
        }
    }
}


// ============================================================================
// Pendulum Wobble Keyframes
// ============================================================================

///
/// Pendulum-style wobble from top origin.
///
/// @param {Angle} $angle [10deg] - Maximum swing angle
///
@mixin keyframes_wobble_pendulum($angle: $animate_angle_wobble_pendulum) {
    @include keyframes(animate_wobble_pendulum) {
        0%, 100% {
            transform: rotate(0deg);
            transform-origin: top center;
        }
        25% {
            transform: rotate($angle);
        }
        75% {
            transform: rotate(-$angle);
        }
    }
}