////
///
/// Special Loader Mixins
/// ===========================================================================
///
/// This module provides special/unique loading animation mixins including
/// morphing shapes, flip cards, folding squares, heartbeat, and more.
///
/// @group Loaders
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
///
////


@use "sass:color";

// ============================================================================
// Keyframes
// ============================================================================

/// Heartbeat animation keyframes
@keyframes loader-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

/// Morph animation keyframes
@keyframes loader-morph {
    0%, 100% { border-radius: 0; transform: rotate(0deg); }
    25% { border-radius: 50% 0 50% 0; transform: rotate(90deg); }
    50% { border-radius: 50%; transform: rotate(180deg); }
    75% { border-radius: 0 50% 0 50%; transform: rotate(270deg); }
}

/// Flip card animation keyframes
@keyframes loader-flip-card {
    0% { transform: rotateX(0) rotateY(0); }
    25% { transform: rotateX(180deg) rotateY(0); }
    50% { transform: rotateX(180deg) rotateY(180deg); }
    75% { transform: rotateX(0) rotateY(180deg); }
    100% { transform: rotateX(0) rotateY(360deg); }
}

/// Square rotate animation keyframes
@keyframes loader-square-rotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}

/// Cube flip animation keyframes
@keyframes loader-cube-flip {
    0% { transform: perspective(100px) rotateX(0) rotateY(0); }
    50% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
    100% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
}

/// Folding animation keyframes
@keyframes loader-folding {
    0%, 10% { transform: scale(1); opacity: 1; }
    20%, 100% { transform: scale(0); opacity: 0; }
}

/// Clock minute hand animation
@keyframes loader-clock-minute {
    0% { transform: translate(-50%, -100%) rotate(0deg); }
    100% { transform: translate(-50%, -100%) rotate(360deg); }
}

/// Clock hour hand animation
@keyframes loader-clock-hour {
    0% { transform: translate(-50%, -100%) rotate(0deg); }
    100% { transform: translate(-50%, -100%) rotate(360deg); }
}

/// Bounce loader animation
@keyframes loader-bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

/// Windmill rotation (uses spin from rings)
@keyframes loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/// Battery charge animation
@keyframes loader-battery-charge {
    0% { width: 0%; }
    50% { width: calc(100% - 6px); }
    100% { width: 0%; }
}

/// Pendulum left animation
@keyframes loader-pendulum-left {
    0% { transform: translateX(-15px) translateY(-10px); }
    100% { transform: translateX(0) translateY(0); }
}

/// Pendulum right animation
@keyframes loader-pendulum-right {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(15px) translateY(-10px); }
}

/// Seesaw animation
@keyframes loader-seesaw {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}

/// Wifi pulse animation
@keyframes loader-wifi-pulse {
    0% { opacity: 0; }
    30% { opacity: 1; }
    60%, 100% { opacity: 0; }
}

/// DNA animation (top)
@keyframes loader-dna-top {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(0.5); opacity: 0.5; }
}

/// DNA animation (bottom)
@keyframes loader-dna-bottom {
    0%, 100% { transform: translateX(-50%) scale(0.5); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/// Infinity left animation
@keyframes loader-infinity-left {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(20px); }
}

/// Infinity right animation
@keyframes loader-infinity-right {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-20px); }
}


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

///
/// Heartbeat loader mixin.
/// Creates a pulsing heartbeat animation.
///
/// @param {Length} $size [40px] - Element size.
/// @param {Color} $color [currentColor] - Color.
/// @param {Time} $duration [1.2s] - Animation duration.
///
@mixin loader_heartbeat($size: 40px, $color: currentColor, $duration: 1.2s) {
    width: $size;
    height: $size;
    background: $color;
    border-radius: 50%;
    animation: loader-heartbeat $duration ease-in-out infinite;
}

///
/// Morph loader mixin.
/// Creates a shape that morphs between square and circle.
///
/// @param {Length} $size [40px] - Element size.
/// @param {Color} $color [currentColor] - Color.
/// @param {Time} $duration [2s] - Animation duration.
///
@mixin loader_morph($size: 40px, $color: currentColor, $duration: 2s) {
    width: $size;
    height: $size;
    background: $color;
    animation: loader-morph $duration ease-in-out infinite;
}

///
/// Flip card loader mixin.
/// Creates a flipping card animation.
///
/// @param {Length} $size [40px] - Card size.
/// @param {Color} $color [currentColor] - Card color.
/// @param {Time} $duration [1.2s] - Animation duration.
///
@mixin loader_flip_card($size: 40px, $color: currentColor, $duration: 1.2s) {
    width: $size;
    height: $size;
    perspective: 100px;

    > * {
        width: 100%;
        height: 100%;
        display: block;
        background: $color;
        animation: loader-flip-card $duration ease-in-out infinite;
    }
}

///
/// Square rotate loader mixin.
/// Creates a rotating square animation.
///
/// @param {Length} $size [30px] - Square size.
/// @param {Color} $color [currentColor] - Square color.
/// @param {Time} $duration [1.2s] - Animation duration.
///
@mixin loader_square($size: 30px, $color: currentColor, $duration: 1.2s) {
    width: $size;
    height: $size;
    background: $color;
    animation: loader-square-rotate $duration ease-in-out infinite;
}

///
/// Cube flip loader mixin.
/// Creates a 3D cube flipping animation.
///
/// @param {Length} $size [30px] - Cube size.
/// @param {Color} $color [currentColor] - Cube color.
/// @param {Time} $duration [1.2s] - Animation duration.
///
@mixin loader_cube($size: 30px, $color: currentColor, $duration: 1.2s) {
    width: $size;
    height: $size;
    background: $color;
    animation: loader-cube-flip $duration ease-in-out infinite;
    perspective: 100px;
}

///
/// Folding squares loader mixin.
/// Creates folding/collapsing squares animation.
///
/// @param {Length} $size [40px] - Container size.
/// @param {Color} $color [currentColor] - Square color.
/// @param {Time} $duration [2s] - Animation duration.
///
@mixin loader_folding($size: 40px, $color: currentColor, $duration: 2s) {
    width: $size;
    height: $size;
    position: relative;

    > * {
        position: absolute;
        width: ($size - 4px) * 0.5;
        height: ($size - 4px) * 0.5;
        background: $color;
        animation: loader-folding $duration ease infinite;

        &:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
        &:nth-child(2) { top: 0; right: 0; animation-delay: 0.5s; }
        &:nth-child(3) { bottom: 0; right: 0; animation-delay: 1s; }
        &:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.5s; }
    }
}

///
/// Clock loader mixin.
/// Creates a clock with animated hands.
///
/// @param {Length} $size [40px] - Clock size.
/// @param {Length} $border-width [3px] - Border width.
/// @param {Color} $color [#333] - Hands color. Note: Cannot use currentColor as darken() requires a real color.
/// @param {Color} $bg [rgba(0,0,0,0.1)] - Clock face background.
///
@mixin loader_clock($size: 40px, $border-width: 3px, $color: #333, $bg: rgba(0, 0, 0, 0.1)) {
    width: $size;
    height: $size;
    border: $border-width solid $bg;
    border-radius: 50%;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 14px;
        background: $color;
        transform-origin: center bottom;
        transform: translate(-50%, -100%) rotate(0deg);
        animation: loader-clock-minute 2s linear infinite;
    }

    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 10px;
        background: color.adjust($color, $lightness: -20%);
        transform-origin: center bottom;
        transform: translate(-50%, -100%) rotate(0deg);
        animation: loader-clock-hour 24s linear infinite;
    }
}

///
/// Bounce loader mixin.
/// Creates bouncing dots animation.
///
/// @param {Length} $dot-size [12px] - Dot size.
/// @param {Color} $color [currentColor] - Dot color.
/// @param {Time} $duration [0.6s] - Animation duration.
///
@mixin loader_bounce($dot-size: 12px, $color: currentColor, $duration: 0.6s) {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 40px;

    > * {
        width: $dot-size;
        height: $dot-size;
        background: $color;
        border-radius: 50%;
        animation: loader-bounce $duration ease-in-out infinite alternate;

        &:nth-child(2) { animation-delay: 0.2s; }
        &:nth-child(3) { animation-delay: 0.4s; }
    }
}

///
/// Windmill loader mixin.
/// Creates rotating windmill blades.
///
/// @param {Length} $size [40px] - Container size.
/// @param {Length} $blade-width [4px] - Blade width.
/// @param {Length} $blade-height [16px] - Blade height.
/// @param {Color} $color [currentColor] - Blade color.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin loader_windmill($size: 40px, $blade-width: 4px, $blade-height: 16px, $color: currentColor, $duration: 1.5s) {
    width: $size;
    height: $size;
    position: relative;
    animation: loader-spin $duration linear infinite;

    > * {
        position: absolute;
        width: $blade-width;
        height: $blade-height;
        background: $color;
        left: 50%;
        top: 50%;
        transform-origin: center bottom;

        &:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
        &:nth-child(2) { transform: translate(-50%, -100%) rotate(90deg); }
        &:nth-child(3) { transform: translate(-50%, -100%) rotate(180deg); }
        &:nth-child(4) { transform: translate(-50%, -100%) rotate(270deg); }
    }
}

///
/// Gear loader mixin.
/// Creates a rotating gear animation.
///
/// @param {Length} $size [40px] - Gear size.
/// @param {Length} $border-width [4px] - Border width.
/// @param {Color} $color [currentColor] - Gear color.
/// @param {Time} $duration [2s] - Animation duration.
///
@mixin loader_gear($size: 40px, $border-width: 4px, $color: currentColor, $duration: 2s) {
    width: $size;
    height: $size;
    border: $border-width solid $color;
    border-radius: 50%;
    position: relative;
    animation: loader-spin $duration linear infinite;

    &::before {
        content: '';
        position: absolute;
        background: $color;
        width: 6px;
        height: 12px;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow:
            0 48px 0 $color,
            -17px -9px 0 $color,
            17px -9px 0 $color,
            -17px 41px 0 $color,
            17px 41px 0 $color;
    }
}

///
/// Battery loader mixin.
/// Creates a charging battery animation.
///
/// @param {Length} $width [50px] - Battery width.
/// @param {Length} $height [24px] - Battery height.
/// @param {Color} $color [currentColor] - Fill color.
/// @param {Color} $bg [rgba(0,0,0,0.1)] - Border color.
/// @param {Time} $duration [2s] - Animation duration.
///
@mixin loader_battery($width: 50px, $height: 24px, $color: currentColor, $bg: rgba(0, 0, 0, 0.1), $duration: 2s) {
    width: $width;
    height: $height;
    border: 3px solid $bg;
    border-radius: 4px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 10px;
        background: $bg;
        border-radius: 0 2px 2px 0;
    }

    &::after {
        content: '';
        position: absolute;
        left: 3px;
        top: 3px;
        bottom: 3px;
        width: 0%;
        background: $color;
        border-radius: 2px;
        animation: loader-battery-charge $duration ease-in-out infinite;
    }
}

///
/// Wifi loader mixin.
/// Creates wifi signal animation.
///
/// @param {Length} $width [40px] - Container width.
/// @param {Length} $height [30px] - Container height.
/// @param {Color} $color [currentColor] - Signal color.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin loader_wifi($width: 40px, $height: 30px, $color: currentColor, $duration: 1.5s) {
    width: $width;
    height: $height;
    position: relative;

    > * {
        position: absolute;
        bottom: 0;
        left: 50%;
        border: 3px solid transparent;
        border-top-color: $color;
        border-radius: 50%;
        transform: translateX(-50%);
        opacity: 0;
        animation: loader-wifi-pulse $duration ease-out infinite;

        &:nth-child(1) { width: 10px; height: 10px; animation-delay: 0s; }
        &:nth-child(2) { width: 22px; height: 22px; animation-delay: 0.3s; }
        &:nth-child(3) { width: 34px; height: 34px; animation-delay: 0.6s; }
    }
}

///
/// DNA helix loader mixin.
/// Creates a DNA helix animation.
///
/// @param {Length} $size [40px] - Container size.
/// @param {Length} $dot-size [8px] - Dot size.
/// @param {Color} $color [currentColor] - Dot color.
/// @param {Time} $duration [1s] - Animation duration.
///
@mixin loader_dna($size: 40px, $dot-size: 8px, $color: currentColor, $duration: 1s) {
    width: $size;
    height: $size;
    position: relative;

    > * {
        position: absolute;
        width: $dot-size;
        height: $dot-size;
        background: $color;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);

        &:nth-child(1) { top: 0; animation: loader-dna-top $duration ease-in-out infinite; }
        &:nth-child(2) { bottom: 0; animation: loader-dna-bottom $duration ease-in-out infinite; }
    }
}

///
/// Infinity loader mixin.
/// Creates an infinity symbol animation.
///
/// @param {Length} $width [60px] - Container width.
/// @param {Length} $height [30px] - Container height.
/// @param {Length} $circle-size [20px] - Circle size.
/// @param {Color} $color [currentColor] - Circle color.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin loader_infinity($width: 60px, $height: 30px, $circle-size: 20px, $color: currentColor, $duration: 1.5s) {
    width: $width;
    height: $height;
    position: relative;

    &::before,
    &::after {
        content: '';
        position: absolute;
        width: $circle-size;
        height: $circle-size;
        border: 3px solid $color;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
    }

    &::before {
        left: 0;
        animation: loader-infinity-left $duration ease-in-out infinite;
    }

    &::after {
        right: 0;
        animation: loader-infinity-right $duration ease-in-out infinite;
    }
}

///
/// Pendulum loader mixin.
/// Creates a Newton's cradle pendulum animation.
///
/// @param {Length} $width [50px] - Container width.
/// @param {Length} $height [40px] - Container height.
/// @param {Length} $ball-size [10px] - Ball size.
/// @param {Color} $color [currentColor] - Ball color.
/// @param {Time} $duration [0.6s] - Animation duration.
///
@mixin loader_pendulum($width: 50px, $height: 40px, $ball-size: 10px, $color: currentColor, $duration: 0.6s) {
    width: $width;
    height: $height;
    position: relative;

    > * {
        position: absolute;
        bottom: 0;
        width: $ball-size;
        height: $ball-size;
        background: $color;
        border-radius: 50%;

        &:nth-child(1) { left: 0; animation: loader-pendulum-left $duration ease-in-out infinite alternate; }
        &:nth-child(2) { left: 13px; }
        &:nth-child(3) { left: 26px; }
        &:nth-child(4) { right: 0; animation: loader-pendulum-right $duration ease-in-out infinite alternate; }
    }
}

///
/// Seesaw loader mixin.
/// Creates a seesaw/balance animation.
///
/// @param {Length} $width [50px] - Container width.
/// @param {Length} $height [20px] - Container height.
/// @param {Color} $color [currentColor] - Bar color.
/// @param {Color} $pivot-color [rgba(0,0,0,0.1)] - Pivot color.
/// @param {Time} $duration [1s] - Animation duration.
///
@mixin loader_seesaw($width: 50px, $height: 20px, $color: currentColor, $pivot-color: rgba(0, 0, 0, 0.1), $duration: 1s) {
    width: $width;
    height: $height;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid $pivot-color;
    }

    &::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 0;
        right: 0;
        height: 4px;
        background: $color;
        border-radius: 2px;
        transform-origin: center center;
        animation: loader-seesaw $duration ease-in-out infinite;
    }
}