////
///
/// Hinge Animations Mixin Module
/// ===========================================================================
///
/// Provides hinge-style exit animations where elements swing and fall.
/// Simulates a door or panel coming off its hinge. Useful for dramatic
/// exit effects and playful dismissal animations.
///
/// @group Animations
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
///
////


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

@use "../../dev" as *;
@use "../../variables" as *;
@use "../keyframes" as *;
@use "base" as *;


// ============================================================================
// Mixins
// ============================================================================


///
/// Hinge Animation
/// ---------------------------------------------------------------------------
/// Creates a hinge effect where the element swings and falls off.
///
/// @name animate_hinge
/// @param {String} $origin [top left] - Transform origin (hinge point)
/// @param {Angle} $swing_angle [80deg] - Maximum swing angle
/// @param {Length} $fall_distance [700px] - Distance to fall
/// @param {Time} $duration [2s] - Animation duration
/// @param {String} $timing_function [ease-in-out] - Timing function
///
/// @example scss - Basic usage
///   .modal-close {
///     @include animate_hinge;
///   }
///
@mixin animate_hinge(
    $origin: top left,
    $swing_angle: 80deg,
    $fall_distance: 700px,
    $duration: 2s,
    $timing_function: ease-in-out
) {
    @include animate_base(
        animate_hinge,
        $duration,
        $timing_function,
        1
    );
    transform-origin: $origin;
    @keyframes animate_hinge {
        0% {
            transform: rotate3d(0, 0, 1, 0deg);
            opacity: 1;
        }
        20%, 60% {
            transform: rotate3d(0, 0, 1, $swing_angle);
            opacity: 1;
        }
        40%, 80% {
            transform: rotate3d(0, 0, 1, $swing_angle * 0.75);
            opacity: 1;
        }
        100% {
            transform: translate3d(0, $fall_distance, 0);
            opacity: 0;
        }
    }
}


///
/// Hinge Left Animation
/// ---------------------------------------------------------------------------
/// Creates a hinge effect from the left side.
///
/// @name animate_hinge_left
/// @param {Time} $duration [2s] - Animation duration
///
/// @example scss - Usage
///   .panel {
///     @include animate_hinge_left;
///   }
///
@mixin animate_hinge_left(
    $duration: 2s
) {
    @include animate_hinge(top left, 80deg, 700px, $duration);
}


///
/// Hinge Right Animation
/// ---------------------------------------------------------------------------
/// Creates a hinge effect from the right side.
///
/// @name animate_hinge_right
/// @param {Time} $duration [2s] - Animation duration
///
@mixin animate_hinge_right(
    $duration: 2s
) {
    @include animate_hinge(top right, -80deg, 700px, $duration);
}