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

////
/// 
/// Base 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 *;


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


///
/// Base Animation Mixin
/// This mixin provides a base structure for defining animations, allowing
/// customization of the name, duration, timing function, iteration count,
/// delay, and direction.
/// 
/// @name animate_base
/// @param {String} $name [none] - The name of the animation.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation.
/// @param {String} $timing_function [$animate_base_timing_function] - The timing function for the animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
/// @param {Number|String} $delay [$animate_base_delay] - The delay before the animation starts.
/// @param {String} $direction [$animate_base_direction] - The direction in which the animation is played.
///
@mixin animate_base(
    $name: none,
    $duration: $animate_base_duration,
    $timing_function: $animate_base_timing_function,
    $iteration_count: $animate_base_iteration_count,
    $delay: $animate_base_delay,
    $direction: $animate_base_direction,
) {
    // animation: $name $duration $timing_function $iteration_count $delay $direction;
    animation-name: $name;
    animation-duration: $duration;
    animation-timing-function: $timing_function;
    animation-iteration-count: $iteration_count;
    animation-delay: $delay;
    animation-direction: $direction;
}

// General Animation Classes
// ----------------------------------------------------------------------------

// // Base classes for animations
// [class^="#{$icongl_prefix}animate_"],
// [class*=" #{$icongl_prefix}animate_"] {
//     // Base animation properties
//     display: inline-block;
//     backface-visibility: hidden;
//     perspective: 1000px; // Improve 3D animations
// }

// Reduced Motion Preference
// ----------------------------------------------------------------------------

// if agent or operating system prefers reduced motion, disable animations
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

///
/// Reduced Motion
/// This media query applies styles that reduce motion for users who have
/// enabled the "prefers-reduced-motion" setting. Animations and transitions
/// are effectively disabled to improve accessibility.
/// @media (prefers-reduced-motion: reduce)
///
@media (prefers-reduced-motion: reduce) {

    // Apply to specific animated classes
    .animate_beat,
    .animate_bounce,
    .animate_fade,
    .animate_beat_fade,
    .animate_flip,
    .animate_pulse,
    .animate_shake,
    .animate_spin,
    .animate_spin-pulse {
        animation-delay: -1ms;
        animation-duration: 1ms;
        animation-iteration-count: 1;
        transition-delay: 0s;
        transition-duration: 0s;
    }

    // Global animation disabling
    .animation {
        animation: none;
        transition: none;
    }
}


@media (prefers-reduced-motion: reduce) {
    // Target all elements with a class starting with 'animate_'
    [class*="animate_"] {
        // Reset basic animation and transition properties
        animation: none;
        transition: none;
    }

    // Alternatively, if animations are tied to a specific attribute
    [data-animation] {
        // Apply the same reset
        animation: none;
        transition: none;
    }

    // Additional option for targeting any animated element
    // This targets any element with animation or transition properties set
   /// {
        animation: none !important;
        transition: none !important;
    }
}







// .animated {
//     -webkit-animation-duration: 3s;
//     animation-duration: 3s;
//     -webkit-animation-fill-mode: both;
//     animation-fill-mode: both;
//   }
  
//   .animated-middle {
//     -webkit-animation-duration: 1.2s;
//     animation-duration: 1.2s;
//     -webkit-animation-fill-mode: both;
//     animation-fill-mode: both;
//   }
  
//   .animated-quick {
//     -webkit-animation-duration: 0.6s;
//     animation-duration: 0.6s;
//     -webkit-animation-fill-mode: both;
//     animation-fill-mode: both;
//   }
  
//   .animated.infinite {
//     -webkit-animation-iteration-count: infinite;
//     animation-iteration-count: infinite;
//   }
  



// Animations
//




///
/// Hover Opacity Transition Mixin
/// Provides a hover effect that changes the opacity of an element
/// with a transition.
/// @name transition_hover_opacity
///
@mixin transition_hover_opacity {
    @include transition_duration_00;
    opacity: 1.00; 
    :hover {
        @include transition_duration_00;
        opacity: 0.50; 
    } 
}

///
/// Transition Mixin
/// Provides a basic transition effect with a customizable duration.
/// @name transition_duration
/// @param {Number|String} $val - The duration for the transition.
///
@mixin transition_duration($val) {
    transition:                     all $val ease-in-out;
    -moz-transition:                all $val ease-in-out;
    -ms-transition:                 all $val ease-in-out;
    -o-transition:                  all $val ease-in-out;
    -webkit-transition:             all $val ease-in-out;
    transition-duration:            all $val ease-in-out;
    -moz-transition-duration:       all $val ease-in-out;
    -ms-transition-duration:        all $val ease-in-out;
    -o-transition-duration:         all $val ease-in-out;
    -webkit-transition-duration:    all $val ease-in-out;
}


///
/// Quick Transition Mixin
/// Provides a quick transition effect with a pre-defined duration.
/// @name transition_duration_00
///
@mixin transition_duration_00 {
    @include transition_duration($transition_duration_00);
    // transition:                     all $transition_duration_00 ease-in-out;
    // -moz-transition:                all $transition_duration_00 ease-in-out;
    // -ms-transition:                 all $transition_duration_00 ease-in-out;
    // -o-transition:                  all $transition_duration_00 ease-in-out;
    // -webkit-transition:             all $transition_duration_00 ease-in-out;
    // transition-duration:            all $transition_duration_00 ease-in-out;
    // -moz-transition-duration:       all $transition_duration_00 ease-in-out;
    // -ms-transition-duration:        all $transition_duration_00 ease-in-out;
    // -o-transition-duration:         all $transition_duration_00 ease-in-out;
    // -webkit-transition-duration:    all $transition_duration_00 ease-in-out;  
}

///
/// Medium Transition Mixin
/// Provides a medium-speed transition effect with a pre-defined duration.
/// @name transition_duration_01
///
@mixin transition_duration_01 {
    @include transition_duration($transition_duration_01);
    // transition:                     all $transition_duration_01 ease-in-out;
    // -moz-transition:                all $transition_duration_01 ease-in-out;
    // -ms-transition:                 all $transition_duration_01 ease-in-out;
    // -o-transition:                  all $transition_duration_01 ease-in-out;
    // -webkit-transition:             all $transition_duration_01 ease-in-out;
    // transition-duration:            all $transition_duration_01 ease-in-out;
    // -moz-transition-duration:       all $transition_duration_01 ease-in-out;
    // -ms-transition-duration:        all $transition_duration_01 ease-in-out;
    // -o-transition-duration:         all $transition_duration_01 ease-in-out;
    // -webkit-transition-duration:    all $transition_duration_01 ease-in-out;  
}

///
/// Long Transition Mixin
/// Provides a longer transition effect with a pre-defined duration.
/// @name transition_duration_02
///
@mixin transition_duration_02 {
    @include transition_duration($transition_duration_02);
    // transition:                     all $transition_duration_02 ease-in-out;
    // -moz-transition:                all $transition_duration_02 ease-in-out;
    // -ms-transition:                 all $transition_duration_02 ease-in-out;
    // -o-transition:                  all $transition_duration_02 ease-in-out;
    // -webkit-transition:             all $transition_duration_02 ease-in-out;
    // transition-duration:            all $transition_duration_02 ease-in-out;
    // -moz-transition-duration:       all $transition_duration_02 ease-in-out;
    // -ms-transition-duration:        all $transition_duration_02 ease-in-out;
    // -o-transition-duration:         all $transition_duration_02 ease-in-out;
    // -webkit-transition-duration:    all $transition_duration_02 ease-in-out;  
}

///
/// Extra Long Transition Mixin
/// Provides an extra-long transition effect with a pre-defined duration.
/// @name transition_duration_03
///
@mixin transition_duration_03 {
    @include transition_duration($transition_duration_03);
    // transition:                     all $transition_duration_03 ease-in-out;
    // -moz-transition:                all $transition_duration_03 ease-in-out;
    // -ms-transition:                 all $transition_duration_03 ease-in-out;
    // -o-transition:                  all $transition_duration_03 ease-in-out;
    // -webkit-transition:             all $transition_duration_03 ease-in-out;
    // transition-duration:            all $transition_duration_03 ease-in-out;
    // -moz-transition-duration:       all $transition_duration_03 ease-in-out;
    // -ms-transition-duration:        all $transition_duration_03 ease-in-out;
    // -o-transition-duration:         all $transition_duration_03 ease-in-out;
    // -webkit-transition-duration:    all $transition_duration_03 ease-in-out;  
}

///
/// Maximum Duration Transition Mixin
/// Provides a maximum duration transition effect with a pre-defined duration.
/// @name transition_duration_04
///
@mixin transition_duration_04 {
    @include transition_duration($transition_duration_04);
    // transition:                     all $transition_duration_04 ease-in-out;
    // -moz-transition:                all $transition_duration_04 ease-in-out;
    // -ms-transition:                 all $transition_duration_04 ease-in-out;
    // -o-transition:                  all $transition_duration_04 ease-in-out;
    // -webkit-transition:             all $transition_duration_04 ease-in-out;
    // transition-duration:            all $transition_duration_04 ease-in-out;
    // -moz-transition-duration:       all $transition_duration_04 ease-in-out;
    // -ms-transition-duration:        all $transition_duration_04 ease-in-out;
    // -o-transition-duration:         all $transition_duration_04 ease-in-out;
    // -webkit-transition-duration:    all $transition_duration_04 ease-in-out;
}



///
/// Generates a keyframe animation for elements.
/// 
/// @name keyframe-animation
/// @param {String} $name - The name of the animation.
/// @param {Map} $keyframes - A map of keyframes, where the key is the percentage and the value is the CSS properties.
/// @example scss - Usage
///   @include keyframe-animation('slide-in', (0%: (transform: translateX(-100%)), 100%: (transform: translateX(0))));
@mixin keyframe_animation(
    $name,
    $keyframes
) {
    @keyframes #{$name} {
        @each $percentage, $properties in $keyframes {
            #{$percentage} {
                @each $property, $value in $properties {
                    #{$property}: #{$value};
                }
            }
        }
    }
}