////
///
/// Beat Keyframes Mixins Module
/// ===========================================================================
///
/// Defines keyframes for beat animations including basic beat, beat with fade,
/// double beat, heartbeat, pulse beat, and rhythmic patterns. These keyframes
/// create pulsing or rhythmic effects in UI elements.
///
/// @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 Beat Keyframes
// ============================================================================

///
/// Standard beat animation - single pulse.
///
@mixin keyframes_beat {
    @include keyframes(beat) {
        0%, 90% {
            transform: scale(
                var(
                    --animate-scale-base,
                    #{$animate_scale_base}
                )
            );
        }
        45% {
            transform: scale(var(--animate-scale-beat, #{$animate_scale_beat}));
        }
    }
}

///
/// Beat with fade effect.
///
@mixin keyframes_beat_fade {
    @include keyframes(beat-fade) {
        0%, 100% {
            opacity: var(--animate-opacity-fade, #{$animate_opacity_fade});
            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
        }
        50% {
            opacity: 1;
            transform: scale(var(--animate-scale-beat-fade, #{$animate_scale_beat_fade}));
        }
    }
}

///
/// Double beat animation - two quick pulses.
///
@mixin keyframes_beat_double {
    @include keyframes(beat-double) {
        0%, 100% {
            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
        }
        25% {
            transform: scale(var(--animate-scale-beat-double-small, #{$animate_scale_beat_double_small}));
        }
        50% {
            transform: scale(var(--animate-scale-beat-double-large, #{$animate_scale_beat_double_large}));
        }
        75% {
            transform: scale(var(--animate-scale-beat-double-small, #{$animate_scale_beat_double_small}));
        }
    }
}


// ============================================================================
// Heartbeat Keyframes
// ============================================================================

///
/// Realistic heartbeat animation.
///
@mixin keyframes_heartbeat {
    @include keyframes(heartbeat) {
        0% { transform: scale(1); }
        14% { transform: scale($animate_heartbeat_scale_small); }
        28% { transform: scale(1); }
        42% { transform: scale($animate_heartbeat_scale_small); }
        70% { transform: scale(1); }
        100% { transform: scale(1); }
    }
}

///
/// Fast heartbeat - excited/urgent state.
///
@mixin keyframes_heartbeat_fast {
    @include keyframes(heartbeat-fast) {
        0% { transform: scale(1); }
        10% { transform: scale($animate_scale_beat_double_large * 0.76667); }
        20% { transform: scale(1); }
        30% { transform: scale($animate_scale_beat_double_large * 0.76667); }
        50% { transform: scale(1); }
        100% { transform: scale(1); }
    }
}

///
/// Slow heartbeat - calm/relaxed state.
///
@mixin keyframes_heartbeat_slow {
    @include keyframes(heartbeat-slow) {
        0% { transform: scale(1); }
        20% { transform: scale(1.08); }
        40% { transform: scale(1); }
        60% { transform: scale(1.08); }
        100% { transform: scale(1); }
    }
}


// ============================================================================
// Pulse Beat Keyframes
// ============================================================================

///
/// Pulse beat with opacity change.
///
@mixin keyframes_pulse_beat {
    @include keyframes(pulse-beat) {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale($animate_heartbeat_scale_small);
            opacity: $animate_scale_shrink_min;
        }
    }
}

///
/// Pulse beat with glow effect.
///
/// @param {Color} $color [currentColor] - Glow color.
///
@mixin keyframes_pulse_beat_glow($color: currentColor) {
    @include keyframes(pulse-beat-glow) {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba($color, 0.4);
        }
        50% {
            transform: scale($animate_scale_pulse);
            box-shadow: 0 0 0 $animate_translate_shake rgba($color, 0);
        }
    }
}

///
/// Expanding ring pulse for beat effects.
///
/// @param {Color} $color [currentColor] - Ring color.
///
@mixin keyframes_beat_ring($color: currentColor) {
    @include keyframes(beat-ring) {
        0% {
            box-shadow: 0 0 0 0 rgba($color, 0.6);
        }
        100% {
            box-shadow: 0 0 0 $animate_pulse_ring_size rgba($color, 0);
        }
    }
}


// ============================================================================
// Rhythmic Beat Keyframes
// ============================================================================

///
/// Triple beat pattern.
///
@mixin keyframes_beat_triple {
    @include keyframes(beat-triple) {
        0%, 100% { transform: scale(1); }
        15% { transform: scale($animate_heartbeat_scale_small); }
        30% { transform: scale(1); }
        45% { transform: scale($animate_heartbeat_scale_small); }
        60% { transform: scale(1); }
        75% { transform: scale($animate_heartbeat_scale_small); }
        90% { transform: scale(1); }
    }
}

///
/// Syncopated beat pattern.
///
@mixin keyframes_beat_syncopated {
    @include keyframes(beat-syncopated) {
        0%, 100% { transform: scale(1); }
        10% { transform: scale($animate_scale_beat_double_large * 0.76667); }
        20% { transform: scale(1); }
        50% { transform: scale($animate_heartbeat_scale_small); }
        60% { transform: scale(1); }
        80% { transform: scale($animate_scale_pulse); }
        90% { transform: scale(1); }
    }
}


// ============================================================================
// Parameterized Keyframes (for animations module)
// ============================================================================

///
/// Parameterized beat animation keyframes.
/// @param {Number} $scale - The scale factor for the beat effect.
///
@mixin keyframes_animate_beat($scale: $animate_scale_beat) {
    @keyframes animate_beat {
        0%, 90% {
            transform: scale(1);
        }
        45% {
            transform: scale($scale);
        }
    }
}

///
/// Parameterized beat fade animation keyframes.
/// @param {Number} $opacity - The opacity at start/end.
/// @param {Number} $scale - The scale factor.
///
@mixin keyframes_animate_beat_fade($opacity: $animate_opacity_fade, $scale: $animate_scale_beat_fade) {
    @keyframes animate_beat_fade {
        0%, 100% {
            opacity: $opacity;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale($scale);
        }
    }
}

///
/// Parameterized double beat animation keyframes.
/// @param {Number} $scale_small - The smaller scale factor.
/// @param {Number} $scale_large - The larger scale factor.
///
@mixin keyframes_animate_beat_double($scale_small: $animate_scale_beat_double_small, $scale_large: $animate_scale_beat_double_large) {
    @keyframes animate_beat_double {
        0%, 100% {
            transform: scale(1);
        }
        25% {
            transform: scale($scale_small);
        }
        50% {
            transform: scale($scale_large);
        }
        75% {
            transform: scale($scale_small);
        }
    }
}