/*====== Varibles start =====*/
// Transition
$transition: ( 5: 0.5, 6: 0.6, 7: 0.7, 8: 0.8, 9: 0.9, 10: 1);

.al-animate{
    // blink with typing text
    &-cursor {
        background-color: var(--bs-gray-500);
        animation: blink 1s infinite;
        &.al-typing {
            animation: none;
        }

        @keyframes blink {
            0%  { background-color: var(--bs-gray-500); }
            49% { background-color: var(--bs-gray-500); }
            50% { background-color: transparent; }
            99% { background-color: transparent; }
            100%  { background-color: var(--bs-gray-500); }
        }
    }

    // mouse scroll icon
    &-scroll-down {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: var(--bs-gray-700);
        font-size: .8rem;
        .al-mouse{
            position: relative;
            display: inline-flex;
            justify-content: center;
            width: 23px;
            height: 35px;
            border: 2px solid var(--bs-gray-400);
            border-radius: 20px;
            padding: 5px 0px;
            .al-mouse-scroll{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: var(--bs-gray-400);
                animation: mouse 4s ease-in forwards infinite;
            }
        }

        @keyframes mouse {
            0% {
                top: 20%;
            }
            15% {
                top: 45%;
            }
            35% {
                top: 60%;
            }
            60% {
                top: 45%;
            }
            75% {
                top: 30%;
            }
            100% {
                top: 20%;
            }
        }
    }

    // gradient background
    &-bg-gradient {
        background-image: linear-gradient(-45deg, var(--bs-warning), var(--bs-secondary), var(--bs-info), var(--bs-success));
        background-size: 400% 400%;
        animation: bg-gradient-animation 15s ease infinite;
        
        @keyframes bg-gradient-animation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    }

    // background cube
    &-cube {
        position: absolute;
        top: 80%;
        left: 45%;
        width: 10px;
        height: 10px;
        border: solid 1px var(--bs-primary);
        border-radius: 4px;
        transform-origin: top left;
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        -webkit-animation: cube 8s ease-in forwards infinite;
        animation: cube 8s ease-in forwards infinite;
        &:nth-child(2n) {
            border-color: var(--bs-info);
        }
        &:nth-child(2) {
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            left: 25vw;
            top: 40vh
        }
        &:nth-child(3) {
            -webkit-animation-delay: 4s;
            animation-delay: 4s;
            left: 75vw;
            top: 50vh
        }
        &:nth-child(4) {
            -webkit-animation-delay: 6s;
            animation-delay: 6s;
            left: 90vw;
            top: 10vh
        }
        &:nth-child(5) {
            -webkit-animation-delay: 8s;
            animation-delay: 8s;
            left: 10vw;
            top: 85vh
        }
        &:nth-child(6) {
            -webkit-animation-delay: 10s;
            animation-delay: 10s;
            left: 50vw;
            top: 10vh
        }
        &:nth-child(7) {
            -webkit-animation-delay: 1s;
            animation-delay: 2s;
            left: 25vw;
            top: 40vh
        }
        &:nth-child(8) {
            -webkit-animation-delay: 1s;
            animation-delay: 4s;
            left: 75vw;
            top: 50vh
        }
        
        @keyframes cube {
            from {
                transform: scale(0) rotate(0deg) translate(-50%, -50%);
                opacity: 1
            }

            to {
                transform: scale(10) rotate(960deg) translate(-50%, -50%);
                opacity: 0
            }
        }
    }

    
    
    // wave
    &-wave {
        span {
            animation-name: wave;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate;

            &.wave {
                &-1 {
                    opacity: 1;
                }

                &-2 {
                    opacity: .9;
                    animation-delay: .1s;
                }

                &-2 {
                    opacity: .9;
                    animation-delay: .1s;
                }

                &-3 {
                    opacity: .85;
                    animation-delay: .2s;
                }

                &-4 {
                    opacity: .8;
                    animation-delay: .3s;
                }

                &-5 {
                    opacity: .75;
                    animation-delay: .4s;
                }

                &-6 {
                    opacity: .7;
                    animation-delay: .5s;
                }

                &-7 {
                    opacity: .65;
                    animation-delay: .6s;
                }

                &-8 {
                    opacity: .6;
                    animation-delay: .7s;
                }

                &-9 {
                    opacity: .55;
                    animation-delay: .8s;
                }

                &-10 {
                    opacity: .5;
                    animation-delay: 1.3s;
                }

                &-11 {
                    opacity: .45;
                    animation-delay: 1.4s;
                }

                &-12 {
                    opacity: .4;
                    animation-delay: 1.5s;
                }
            }
        }

        @keyframes wave {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }
    }

    // water wave
    &-water-wave{
        position: relative;
        box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
        &::before, &::after{
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            top: 0;
            left: 50%;
            transform: translate(-50%, -75%);
        }
        &::before{
            border-radius: 45%;
            background-color: currentColor;
            animation: be-water-wave 5s linear infinite;
        }
        &::after{
            border-radius: 40%;
            background-color: currentColor;
            opacity: 0.5;
            animation: be-water-wave 10s linear infinite;
        }

        @keyframes be-water-wave{
            0%{
                transform: translate(-50%, -75%) rotate(0deg);
            }
            100%{
                transform: translate(-50%, -75%) rotate(360deg);
            }
        }
    }

    // sound wave
    &-sound-wave{
        background: linear-gradient(45deg, currentColor, #fff);
        animation-name: sound-wave;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        
        &:nth-child(2){
            animation-delay: 0.1s;
        }
        &:nth-child(3){
            animation-delay: 0.2s;
        }
        &:nth-child(4){
            animation-delay: 0.3s;
        }
        &:nth-child(5){
            animation-delay: 0.4s;
        }
        &:nth-child(6){
            animation-delay: 0.5s;
        }
        &:nth-child(7){
            animation-delay: 0.6s;
        }
        &:nth-child(8){
            animation-delay: 0.7s;
        }
        &:nth-child(9){
            animation-delay: 0.8s;
        }
        &:nth-child(10){
            animation-delay: 0.9s;
        }

        @keyframes sound-wave {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
        }
    }

    // border gradient
    &-border-gradient {
        --al-be-border-angle: 0turn;
        border: solid var(--bs-border-width) transparent;
        background: conic-gradient(from var(--al-border-angle), #213, #112 5%, #112 60%, #213 95%) padding-box,
            conic-gradient(from var(--al-border-angle), transparent 25%, #08f, #f03 99%, transparent) border-box;

        animation-name: be-bg-spin;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        @keyframes be-bg-spin {
            to {
            --al-border-angle: 1turn;
            }
        }
    }
    
    // ripple
    &-ripple {
        &-rounded{
            animation-name: be-animation-ripple;
            animation-duration: 0.7s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;

            @keyframes be-animation-ripple {
                0% {
                    box-shadow: 0 0 0 0 rgba(var(--ripple-color), 0.3), 0 0 0 1em rgba(var(--ripple-color), 0.3), 0 0 0 2em rgba(var(--ripple-color), 0.3), 0 0 0 3em rgba(var(--ripple-color), 0.3);
                }
                100% {
                    box-shadow: 0 0 0 1em rgba(var(--ripple-color), 0.3), 0 0 0 2em rgba(var(--ripple-color), 0.3), 0 0 0 3em rgba(var(--ripple-color), 0.3), 0 0 0 4em rgba(var(--ripple-color), 0);
                }
            }
        }
        &-circle {
            position: relative;

            &::before, &::after{
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                background: rgba(var(--ripple-color), 1.0);
                width: 100%;
                height: 100%;
                content: "";
                border-radius: 50%;
            }
            &:before {
                animation: wave-animate 3s infinite ease-out;
            }
            &:after {
                opacity: 0;
                animation: wave-animate 3s 1.5s infinite ease-out;
            }

            @keyframes wave-animate {
                0% {
                    scale: 0;
                    opacity: 1;
                    transform-origin: center;
                }
                100% {
                    scale: 3;
                    opacity: 0;
                    transform-origin: center;
                }
            }
        } 
    }
    
    // preloader
    &-preloader{
        &-circle {
            border: var(--bs-border-width) solid var(--bs-white);
            border-top-color: var(--bs-primary);
            animation-name: be-animation-rotate;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            
            &-two{
                border: var(--bs-border-width) solid var(--bs-white);
                border-top-color: var(--bs-primary);
                border-bottom-color: var(--bs-primary);
                animation-name: be-animation-rotate;
                animation-duration: 2s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            &-three {
                border: var(--bs-border-width) solid;
                border-top-color: var(--bs-primary);
                border-bottom-color: var(--bs-info);
                border-left-color: var(--bs-danger);
                border-right-color: var(--bs-warning);
                animation-name: be-animation-rotate;
                animation-duration: 2s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            &-four {
                border: var(--bs-border-width) solid var(--bs-white);
                border-top-color: var(--bs-primary);
                border-bottom-color: var(--bs-danger);
                border-right-color: var(--bs-warning);
                animation-name: be-animation-rotate;
                animation-duration: 2s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            &-five {
                position:relative;
                border: var(--bs-border-width) solid var(--bs-white);
                animation-name: be-animation-rotate;
                animation-duration: 2s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                &:before {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: -7px;
                    width: 10px;
                    height: 10px;
                    background: var(--bs-white);
                    border-radius: 50%;
                    outline: 5px solid var(--bs-primary);
                }
            }
        }
        &-grid {
            position: relative;
            span {
                animation-name: be-animation-grid;
                animation-duration: 1.2s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

                &:nth-child(1) {
                    animation-delay: 0s;
                }

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

                &:nth-child(3) {
                    animation-delay: -0.8s;
                }

                &:nth-child(4) {
                    animation-delay: -0.4s;
                }

                &:nth-child(5) {
                    animation-delay: -0.8s;
                }

                &:nth-child(6) {
                    animation-delay: -1.2s;
                }

                &:nth-child(7) {
                    animation-delay: -0.8s;
                }

                &:nth-child(8) {
                    animation-delay: -1.2s;
                }

                &:nth-child(9) {
                    animation-delay: -1.6s;
                }
            }

            @keyframes be-animation-grid {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.5;
                }
            }
        }
    }
}

//border gradient 
@property --al-border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

// color
.al{
    // ripple color
    &-ripple{
        &-primary{
            --ripple-color: var(--bs-primary-rgb) !important;
        }
        &-secondary{
            --ripple-color: var(--bs-secondary-rgb) !important; 
        }
        &-success{
            --ripple-color: var(--bs-success-rgb) !important; 
        }
        &-warning{
            --ripple-color: var(--bs-warning-rgb) !important; 
        }
        &-danger{
            --ripple-color: var(--bs-danger-rgb) !important; 
        }
        &-info{
            --ripple-color: var(--bs-info-rgb) !important; 
        }
        &-white{
            --ripple-color: var(--bs-white-rgb) !important;  
        }
        &-black{
            --ripple-color: var(--bs-black-rgb) !important;  
        }
    }
}

// rotate animation 360deg
@keyframes be-animation-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

//transition duration
.al{
    @each $key, $value in $transition {
        &-transition-duration-#{$key}{
            transition-duration:$value+s !important;
        } 
    }
    
}


// ========== cursor, magnetic, & ripple effect ==========
.al{
    //custom cursor with dot
    &-cursor, &-cursor-dot{
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    &-cursor{
        width: 18px;
        height: 18px;
        border: 2px solid currentColor;
        opacity: .4;

        &-dot {
            width: 6px;
            height: 6px;
            background: currentColor;
            opacity: .7;
        }
    }

    //magnetic effect
    &-magnet {
        will-change: transform;
        transition: transform 180ms cubic-bezier(.2, .8, .2, 1);

        --al-pull-radius: 120;
        --al-pull-strength:  0.25;
        --al-max-translate: 18;

        &-weak {
            --al-pull-radius: 100;
            --al-pull-strength: 0.15;
            --al-max-translate: 12;
        }

        &-strong {
            --al-pull-radius: 160;
            --al-pull-strength: 0.35;
            --al-max-translate: 24;
        }
    }

    //ripple effect
    &-on-click-ripple {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: inherit;
        pointer-events: none;

        > span {
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .6);
            transform: translate(-50%, -50%) scale(0);
            animation: be-on-click-ripple 700ms ease-out forwards;
            filter: blur(1px);
        }

        @keyframes be-on-click-ripple {
        to {
            transform: translate(-50%, -50%) scale(18);
            opacity: 0;
        }
        }
    }
}