////
///
/// Rotate Keyframes Mixins Module
/// ===========================================================================
///
/// Defines keyframes for rotation animations including basic rotate, rotate
/// in/out effects from various origins and corners. These keyframes provide
/// entrance/exit animations with 3D rotation 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 Rotate Keyframes
// ============================================================================

///
/// Simple rotation.
///
/// @param {Angle} $start_angle [0deg] - Starting angle
/// @param {Angle} $end_angle [360deg] - Ending angle
///
@mixin keyframes_rotate($start_angle: 0deg, $end_angle: 360deg) {
    @include keyframes(animate_rotate) {
        from {
            transform: rotate($start_angle);
        }
        to {
            transform: rotate($end_angle);
        }
    }
}

///
/// Rotation with CSS custom property support.
///
@mixin keyframes_animate_rotate() {
    @include keyframes(animate_rotate) {
        from {
            transform: rotate(var(--animate-rotate-start, 0deg));
        }
        to {
            transform: rotate(var(--animate-rotate-end, #{$animate_angle_full}));
        }
    }
}


// ============================================================================
// Rotate In Keyframes
// ============================================================================

///
/// Rotate in from center.
///
/// @param {Angle} $angle [-200deg] - Starting rotation angle
///
@mixin keyframes_rotate_in($angle: $animate_rotate_in_angle) {
    @include keyframes(animate_rotate_in) {
        from {
            transform-origin: center;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
        to {
            transform-origin: center;
            transform: none;
            opacity: 1;
        }
    }
}

///
/// Rotate in from bottom left corner.
///
/// @param {Angle} $angle [-45deg] - Starting rotation angle
///
@mixin keyframes_rotate_in_down_left($angle: $animate_rotate_corner_in_down_left) {
    @include keyframes(animate_rotate_in_down_left) {
        from {
            transform-origin: left bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
        to {
            transform-origin: left bottom;
            transform: none;
            opacity: 1;
        }
    }
}

///
/// Rotate in from bottom right corner.
///
/// @param {Angle} $angle [45deg] - Starting rotation angle
///
@mixin keyframes_rotate_in_down_right($angle: $animate_rotate_corner_in_down_right) {
    @include keyframes(animate_rotate_in_down_right) {
        from {
            transform-origin: right bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
        to {
            transform-origin: right bottom;
            transform: none;
            opacity: 1;
        }
    }
}

///
/// Rotate in from top left corner.
///
/// @param {Angle} $angle [45deg] - Starting rotation angle
///
@mixin keyframes_rotate_in_up_left($angle: $animate_rotate_corner_in_up_left) {
    @include keyframes(animate_rotate_in_up_left) {
        from {
            transform-origin: left bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
        to {
            transform-origin: left bottom;
            transform: none;
            opacity: 1;
        }
    }
}

///
/// Rotate in from top right corner.
///
/// @param {Angle} $angle [-90deg] - Starting rotation angle
///
@mixin keyframes_rotate_in_up_right($angle: $animate_rotate_corner_in_up_right) {
    @include keyframes(animate_rotate_in_up_right) {
        from {
            transform-origin: right bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
        to {
            transform-origin: right bottom;
            transform: none;
            opacity: 1;
        }
    }
}


// ============================================================================
// Rotate Out Keyframes
// ============================================================================

///
/// Rotate out to center.
///
/// @param {Angle} $angle [200deg] - Ending rotation angle
///
@mixin keyframes_rotate_out($angle: $animate_rotate_out_angle) {
    @include keyframes(animate_rotate_out) {
        from {
            transform-origin: center;
            opacity: 1;
        }
        to {
            transform-origin: center;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
    }
}

///
/// Rotate out to bottom left corner.
///
/// @param {Angle} $angle [45deg] - Ending rotation angle
///
@mixin keyframes_rotate_out_down_left($angle: $animate_rotate_corner_angle) {
    @include keyframes(animate_rotate_out_down_left) {
        from {
            transform-origin: left bottom;
            opacity: 1;
        }
        to {
            transform-origin: left bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
    }
}

///
/// Rotate out to bottom right corner.
///
/// @param {Angle} $angle [-45deg] - Ending rotation angle
///
@mixin keyframes_rotate_out_down_right($angle: -$animate_rotate_corner_angle) {
    @include keyframes(animate_rotate_out_down_right) {
        from {
            transform-origin: right bottom;
            opacity: 1;
        }
        to {
            transform-origin: right bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
    }
}

///
/// Rotate out to top left corner.
///
/// @param {Angle} $angle [-45deg] - Ending rotation angle
///
@mixin keyframes_rotate_out_up_left($angle: -$animate_rotate_corner_angle) {
    @include keyframes(animate_rotate_out_up_left) {
        from {
            transform-origin: left bottom;
            opacity: 1;
        }
        to {
            transform-origin: left bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
    }
}

///
/// Rotate out to top right corner.
///
/// @param {Angle} $angle [90deg] - Ending rotation angle
///
@mixin keyframes_rotate_out_up_right($angle: $animate_flip_out_angle) {
    @include keyframes(animate_rotate_out_up_right) {
        from {
            transform-origin: right bottom;
            opacity: 1;
        }
        to {
            transform-origin: right bottom;
            transform: rotate3d(0, 0, 1, $angle);
            opacity: 0;
        }
    }
}


// ============================================================================
// Pendulum Rotate Keyframes
// ============================================================================

///
/// Pendulum-like rotation effect.
///
/// @param {Angle} $angle [15deg] - Maximum swing angle
///
@mixin keyframes_rotate_pendulum($angle: $animate_angle_rapid) {
    @include keyframes(animate_rotate_pendulum) {
        0%, 100% {
            transform: rotate(0deg);
            transform-origin: top center;
        }
        25% {
            transform: rotate($angle);
        }
        75% {
            transform: rotate(-$angle);
        }
    }
}


// ============================================================================
// Wobble Rotate Keyframes
// ============================================================================

///
/// Wobbling rotation effect.
///
/// @param {Angle} $angle [5deg] - Wobble angle
///
@mixin keyframes_rotate_wobble($angle: 5deg) {
    @include keyframes(animate_rotate_wobble) {
        0%, 100% {
            transform: rotate(0deg);
        }
        15% {
            transform: rotate(-$angle);
        }
        30% {
            transform: rotate($angle * 0.8);
        }
        45% {
            transform: rotate(-$angle * 0.6);
        }
        60% {
            transform: rotate($angle * 0.4);
        }
        75% {
            transform: rotate(-$angle * 0.2);
        }
    }
}


// ============================================================================
// 3D Rotate Keyframes
// ============================================================================

///
/// 3D rotation on X-axis.
///
/// @param {Angle} $angle [360deg] - Rotation angle
///
@mixin keyframes_rotate_x($angle: 360deg) {
    @include keyframes(animate_rotate_x) {
        from {
            transform: perspective(400px) rotateX(0deg);
        }
        to {
            transform: perspective(400px) rotateX($angle);
        }
    }
}

///
/// 3D rotation on Y-axis.
///
/// @param {Angle} $angle [360deg] - Rotation angle
///
@mixin keyframes_rotate_y($angle: 360deg) {
    @include keyframes(animate_rotate_y) {
        from {
            transform: perspective(400px) rotateY(0deg);
        }
        to {
            transform: perspective(400px) rotateY($angle);
        }
    }
}