// ============================================================================
// Poster
// ============================================================================

////
/// 
/// Fade Animations Mixin Module
/// ===========================================================================
/// 
/// This module ...
/// 
/// 
/// @group Animations
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @todo None
/// @access public
/// 
////


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

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


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


@mixin animate_fade(
    $start_opacity: 1,
    $mid_opacity: 0,
    $end_opacity: 1,
    $duration: $animate_base_duration,
    $timing_function: cubic-bezier(.4, 0, .6, 1),
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_fade,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_fade {
        0%, 100% { opacity: $start-opacity; }
        50% { opacity: $mid-opacity; }
    }
}


@mixin animate_fade_in(
    $start_opacity: 0,
    $end_opacity: 1,
    $duration: $animate_base_duration,
    $timing_function: ease-in
) {
    @include animate_base(
        animate_fade_in,
        $duration,
        $timing_function,
        1
    );
    @keyframes animate_fade_in {
        from { opacity: $start-opacity; }
        to { opacity: $end-opacity; }
    }
}


// @keyframes fadeIn {
//     from {
//       opacity: 0;
//       transform: translate3d(0, -100%, 0);
//     }
  
//     to {
//       opacity: 1;
//       transform: none;
//     }
//   }

// $boot-fadein-time: 2s;
// $boot-fadein-opacity-start: 0;
// $boot-fadein-opacity-end: 1;

//   .fade {
//     @include transition($transition-fade);
  
//     &:not(.show) {
//         opacity: 0;
//     }
// }
  

// Fade Out Animation
// ----------------------------------------------------------------------------

@mixin animate_fade_out(
    $start_opacity: 1,
    $end_opacity: 0,
    $duration: $animate_base_duration,
    $timing_function: ease-out
) {
    @include animate_base(
        animate_fade_in,
        $duration,
        $timing_function,
        1
    );
    @keyframes animate_fade_out {
        from { opacity: $start-opacity; }
        to { opacity: $end-opacity; }
    }
}


// @keyframes fadeOut {
//     from {
//       opacity: 1;
//     }
  
//     to {
//          transform: translate3d(0, -100%, 0);
//       opacity: 0;
//     }
//   }


@mixin animate_fade_gradual(
    $start_opacity: 1,
    $end_opacity: 0.5,
    $duration: $animate_base_duration_slow,
    $timing_function: ease-in-out,
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_fade_gradual,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_fade_gradual {
        0%, 100% { opacity: $start-opacity; }
        50% { opacity: $end-opacity; }
    }
}