////
///
/// Zoom Keyframes Mixins Module
/// ===========================================================================
///
/// Defines keyframes for zoom animations including basic zoom, speed
/// variations, zoom with effects like fade and rotation. These keyframes
/// create scaling entrance/exit animations.
///
/// @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 Zoom Keyframes
// ============================================================================

///
/// Standard zoom effect.
///
/// @param {Number} $scale [1.5] - Maximum scale
///
@mixin keyframes_zoom($scale: 1.5) {
    @include keyframes(animate_zoom) {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale($scale);
        }
    }
}

///
/// Zoom with CSS custom property support.
///
@mixin keyframes_animate_zoom($scale: 1.5) {
    @include keyframes(animate_zoom) {
        0%, 100% {
            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
        }
        50% {
            transform: scale(var(--animate-zoom-scale, #{$scale}));
        }
    }
}


// ============================================================================
// Slow Zoom Keyframes
// ============================================================================

///
/// Slower, subtler zoom.
///
/// @param {Number} $scale [1.3] - Maximum scale
///
@mixin keyframes_zoom_slow($scale: 1.3) {
    @include keyframes(animate_zoom_slow) {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale($scale);
        }
    }
}


// ============================================================================
// Fast Zoom Keyframes
// ============================================================================

///
/// Faster, more intense zoom.
///
/// @param {Number} $scale [1.7] - Maximum scale
///
@mixin keyframes_zoom_fast($scale: 1.7) {
    @include keyframes(animate_zoom_fast) {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale($scale);
        }
    }
}


// ============================================================================
// Zoom with Fade Keyframes
// ============================================================================

///
/// Zoom combined with fade effect.
///
/// @param {Number} $scale [1.5] - Maximum scale
/// @param {Number} $opacity_min [0.5] - Minimum opacity
///
@mixin keyframes_zoom_fade($scale: 1.5, $opacity_min: 0.5) {
    @include keyframes(animate_zoom_fade) {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale($scale);
            opacity: $opacity_min;
        }
    }
}


// ============================================================================
// Zoom In Keyframes
// ============================================================================

///
/// Zoom in entrance animation.
///
/// @param {Number} $start_scale [0.5] - Starting scale
///
@mixin keyframes_zoom_in($start_scale: 0.5) {
    @include keyframes(animate_zoom_in) {
        from {
            opacity: 0;
            transform: scale($start_scale);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

///
/// Zoom in from top.
///
/// @param {Number} $start_scale [0.5] - Starting scale
/// @param {Length} $distance [100%] - Starting Y position
///
@mixin keyframes_zoom_in_down($start_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_in_down) {
        from {
            opacity: 0;
            transform: scale($start_scale) translateY(-$distance);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
}

///
/// Zoom in from bottom.
///
/// @param {Number} $start_scale [0.5] - Starting scale
/// @param {Length} $distance [100%] - Starting Y position
///
@mixin keyframes_zoom_in_up($start_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_in_up) {
        from {
            opacity: 0;
            transform: scale($start_scale) translateY($distance);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
}

///
/// Zoom in from left.
///
/// @param {Number} $start_scale [0.5] - Starting scale
/// @param {Length} $distance [100%] - Starting X position
///
@mixin keyframes_zoom_in_left($start_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_in_left) {
        from {
            opacity: 0;
            transform: scale($start_scale) translateX(-$distance);
        }
        to {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
    }
}

///
/// Zoom in from right.
///
/// @param {Number} $start_scale [0.5] - Starting scale
/// @param {Length} $distance [100%] - Starting X position
///
@mixin keyframes_zoom_in_right($start_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_in_right) {
        from {
            opacity: 0;
            transform: scale($start_scale) translateX($distance);
        }
        to {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
    }
}


// ============================================================================
// Zoom Out Keyframes
// ============================================================================

///
/// Zoom out exit animation.
///
/// @param {Number} $end_scale [0.5] - Ending scale
///
@mixin keyframes_zoom_out($end_scale: 0.5) {
    @include keyframes(animate_zoom_out) {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: 0;
            transform: scale($end_scale);
        }
    }
}

///
/// Zoom out to top.
///
/// @param {Number} $end_scale [0.5] - Ending scale
/// @param {Length} $distance [100%] - Ending Y position
///
@mixin keyframes_zoom_out_up($end_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_out_up) {
        from {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        to {
            opacity: 0;
            transform: scale($end_scale) translateY(-$distance);
        }
    }
}

///
/// Zoom out to bottom.
///
/// @param {Number} $end_scale [0.5] - Ending scale
/// @param {Length} $distance [100%] - Ending Y position
///
@mixin keyframes_zoom_out_down($end_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_out_down) {
        from {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        to {
            opacity: 0;
            transform: scale($end_scale) translateY($distance);
        }
    }
}

///
/// Zoom out to left.
///
/// @param {Number} $end_scale [0.5] - Ending scale
/// @param {Length} $distance [100%] - Ending X position
///
@mixin keyframes_zoom_out_left($end_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_out_left) {
        from {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
        to {
            opacity: 0;
            transform: scale($end_scale) translateX(-$distance);
        }
    }
}

///
/// Zoom out to right.
///
/// @param {Number} $end_scale [0.5] - Ending scale
/// @param {Length} $distance [100%] - Ending X position
///
@mixin keyframes_zoom_out_right($end_scale: 0.5, $distance: 100%) {
    @include keyframes(animate_zoom_out_right) {
        from {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
        to {
            opacity: 0;
            transform: scale($end_scale) translateX($distance);
        }
    }
}


// ============================================================================
// Zoom with Rotation Keyframes
// ============================================================================

///
/// Zoom combined with rotation.
///
/// @param {Number} $scale [1.5] - Maximum scale
/// @param {Angle} $rotation [15deg] - Maximum rotation
///
@mixin keyframes_zoom_rotate($scale: 1.5, $rotation: 15deg) {
    @include keyframes(animate_zoom_rotate) {
        0%, 100% {
            transform: scale(1) rotate(0deg);
        }
        50% {
            transform: scale($scale) rotate($rotation);
        }
    }
}