// ============================================================================
// move.gl | Lightspeed Keyframes
// ============================================================================
// Copyright 2025 Scape Agency BV
// Licensed under MIT License
// ============================================================================

////
/// Lightspeed Keyframes Module
/// ===========================================================================
///
/// Provides parameterized keyframe mixins for lightspeed animations.
/// High-speed entrance and exit animations with skew effects.
///
/// @group Keyframes
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
////


// ============================================================================
// Keyframes
// ============================================================================


///
/// Lightspeed In Keyframes
/// @name keyframes_animate_lightspeed_in
/// @param {Number|String} $distance [100%] - The starting distance.
/// @param {Angle} $skew_start [-30deg] - The initial skew angle.
///
@mixin keyframes_animate_lightspeed_in($distance: $animate_translate_slide, $skew_start: $animate_lightspeed_skew_start) {
    @keyframes animate_lightspeed_in {
        0% {
            transform: translate3d($distance, 0, 0) skewX($skew_start);
            opacity: 0;
        }
        60% {
            transform: skewX(20deg);
            opacity: 1;
        }
        80% {
            transform: skewX(-5deg);
            opacity: 1;
        }
        100% {
            transform: none;
            opacity: 1;
        }
    }
}


///
/// Lightspeed Out Keyframes
/// @name keyframes_animate_lightspeed_out
/// @param {Number|String} $distance [100%] - The ending distance.
/// @param {Angle} $skew_end [30deg] - The final skew angle.
///
@mixin keyframes_animate_lightspeed_out($distance: $animate_translate_slide, $skew_end: $animate_lightspeed_skew_end) {
    @keyframes animate_lightspeed_out {
        0% {
            transform: none;
            opacity: 1;
        }
        100% {
            transform: translate3d($distance, 0, 0) skewX($skew_end);
            opacity: 0;
        }
    }
}