////
///
/// Shake Keyframes Mixins Module
/// ===========================================================================
///
/// Defines keyframes for shake animations including rotational shake,
/// horizontal/vertical shake, and intense shake variations. These keyframes
/// create attention-grabbing oscillating effects.
///
/// @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 Shake Keyframes
// ============================================================================

///
/// Standard rotational shake.
///
/// @param {Angle} $amplitude [$animate_angle_shake] - Maximum rotation angle
///
@mixin keyframes_shake($amplitude: $animate_angle_shake) {
    @include keyframes(animate_shake) {
        0% {
            transform: rotate(-$amplitude);
        }
        4% {
            transform: rotate($amplitude);
        }
        8%, 24% {
            transform: rotate(-$amplitude * 1.2);
        }
        12%, 28% {
            transform: rotate($amplitude * 1.2);
        }
        16% {
            transform: rotate(-$amplitude * 1.4);
        }
        20% {
            transform: rotate($amplitude * 1.4);
        }
        32% {
            transform: rotate(-$amplitude * 0.8);
        }
        36% {
            transform: rotate($amplitude * 0.8);
        }
        40%, 100% {
            transform: rotate(0deg);
        }
    }
}

///
/// Shake with CSS custom property support.
///
@mixin keyframes_animate_shake($amplitude: $animate_angle_shake) {
    @include keyframes(animate_shake) {
        0%, 100% {
            transform: rotate(0deg);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: rotate(calc(-1 * var(--animate-shake-angle, #{$amplitude})));
        }
        20%, 40%, 60%, 80% {
            transform: rotate(var(--animate-shake-angle, #{$amplitude}));
        }
    }
}


// ============================================================================
// Slow Shake Keyframes
// ============================================================================

///
/// Gentler, slower shake.
///
/// @param {Angle} $amplitude [$animate_angle_gentle] - Maximum rotation angle
///
@mixin keyframes_shake_slow($amplitude: $animate_angle_gentle) {
    @include 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 Keyframes
// ============================================================================

///
/// Horizontal shake (translateX).
///
/// @param {Length} $distance [$animate_translate_shake] - Horizontal distance
///
@mixin keyframes_shake_horizontal($distance: $animate_translate_shake) {
    @include keyframes(animate_shake_horizontal) {
        0%, 100% {
            transform: translateX(0);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translateX(-$distance);
        }
        20%, 40%, 60%, 80% {
            transform: translateX($distance);
        }
    }
}


// ============================================================================
// Vertical Shake Keyframes
// ============================================================================

///
/// Vertical shake (translateY).
///
/// @param {Length} $distance [$animate_translate_shake] - Vertical distance
///
@mixin keyframes_shake_vertical($distance: $animate_translate_shake) {
    @include keyframes(animate_shake_vertical) {
        0%, 100% {
            transform: translateY(0);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translateY(-$distance);
        }
        20%, 40%, 60%, 80% {
            transform: translateY($distance);
        }
    }
}


// ============================================================================
// Intense Shake Keyframes
// ============================================================================

///
/// Intense shake with rotation and translation.
///
/// @param {Angle} $amplitude [$animate_angle_rapid] - Maximum rotation angle
/// @param {Length} $distance [5px] - Translation distance
///
@mixin keyframes_shake_intense($amplitude: $animate_angle_rapid, $distance: 5px) {
    @include keyframes(animate_shake_intense) {
        0%, 100% {
            transform: translateX(0) rotate(0);
        }
        10% {
            transform: translateX(-$distance) rotate(-$amplitude);
        }
        20% {
            transform: translateX($distance) rotate($amplitude);
        }
        30% {
            transform: translateX(-$distance * 0.8) rotate(-$amplitude * 0.8);
        }
        40% {
            transform: translateX($distance * 0.8) rotate($amplitude * 0.8);
        }
        50% {
            transform: translateX(-$distance * 0.6) rotate(-$amplitude * 0.6);
        }
        60% {
            transform: translateX($distance * 0.6) rotate($amplitude * 0.6);
        }
        70% {
            transform: translateX(-$distance * 0.4) rotate(-$amplitude * 0.4);
        }
        80% {
            transform: translateX($distance * 0.4) rotate($amplitude * 0.4);
        }
        90% {
            transform: translateX(-$distance * 0.2) rotate(-$amplitude * 0.2);
        }
    }
}


// ============================================================================
// Jitter Shake Keyframes
// ============================================================================

///
/// Random-like jitter shake.
///
/// @param {Length} $distance [2px] - Maximum jitter distance
///
@mixin keyframes_shake_jitter($distance: 2px) {
    @include keyframes(animate_shake_jitter) {
        0%, 100% {
            transform: translate(0, 0);
        }
        10% {
            transform: translate(-$distance, $distance);
        }
        20% {
            transform: translate($distance, -$distance);
        }
        30% {
            transform: translate(-$distance * 0.5, -$distance);
        }
        40% {
            transform: translate($distance, $distance * 0.5);
        }
        50% {
            transform: translate(-$distance, $distance * 0.5);
        }
        60% {
            transform: translate($distance * 0.5, -$distance);
        }
        70% {
            transform: translate(-$distance * 0.5, $distance);
        }
        80% {
            transform: translate($distance, -$distance * 0.5);
        }
        90% {
            transform: translate(-$distance, -$distance * 0.5);
        }
    }
}


// ============================================================================
// Nod Shake Keyframes
// ============================================================================

///
/// Nodding shake (up and down motion).
///
/// @param {Angle} $angle [5deg] - Rotation angle
///
@mixin keyframes_shake_nod($angle: 5deg) {
    @include keyframes(animate_shake_nod) {
        0%, 100% {
            transform: rotateX(0deg);
        }
        25% {
            transform: rotateX($angle);
        }
        75% {
            transform: rotateX(-$angle);
        }
    }
}