/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : animations.css
   Part    : 1
========================================================== */

/* ==========================================================
   Fade In
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ==========================================================
   Fade In Up
========================================================== */

@keyframes fadeInUp{

    from{

        opacity:0;

        transform:
            translateY(40px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

/* ==========================================================
   Logo Float
========================================================== */

@keyframes logoFloat{

    0%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-12px);

    }

    100%{

        transform:
            translateY(0);

    }

}

/* ==========================================================
   Scale In
========================================================== */

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================================
   End Part 1
========================================================== */

/* ==========================================================
   Spinner
========================================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   Ripple
========================================================== */

@keyframes ripple{

    0%{

        transform:scale(0);

        opacity:.6;

    }

    100%{

        transform:scale(15);

        opacity:0;

    }

}

/* ==========================================================
   Pulse
========================================================== */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================================
   Glow
========================================================== */

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(11,108,255,0);

    }

    50%{

        box-shadow:0 0 28px rgba(11,108,255,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(11,108,255,0);

    }

}

/* ==========================================================
   Loading Progress
========================================================== */

@keyframes loadingProgress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

/* ==========================================================
   End Part 2
========================================================== */

/* ==========================================================
   Skeleton Loading
========================================================== */

@keyframes skeletonLoading{

    0%{

        transform:translateX(-100%);

    }

    100%{

        transform:translateX(100%);

    }

}

/* ==========================================================
   Scroll To Top
========================================================== */

@keyframes scrollButtonShow{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.8);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

/* ==========================================================
   Toast Show
========================================================== */

@keyframes toastShow{

    from{

        opacity:0;

        transform:
            translateY(-25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

/* ==========================================================
   Toast Hide
========================================================== */

@keyframes toastHide{

    from{

        opacity:1;

        transform:
            translateY(0);

    }

    to{

        opacity:0;

        transform:
            translateY(-25px);

    }

}

/* ==========================================================
   Search Overlay
========================================================== */

@keyframes overlayFade{

    from{

        opacity:0;

        backdrop-filter:blur(0px);

    }

    to{

        opacity:1;

        backdrop-filter:blur(14px);

    }

}

/* ==========================================================
   Blur In
========================================================== */

@keyframes blurIn{

    from{

        opacity:0;

        filter:blur(12px);

    }

    to{

        opacity:1;

        filter:blur(0);

    }

}

/* ==========================================================
   End Part 3
========================================================== */

/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : animations.css
   Part    : 4
========================================================== */

/* ==========================================================
   Liquid Glass
========================================================== */

@keyframes liquidGlass{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* ==========================================================
   Hover Glow
========================================================== */

@keyframes hoverGlow{

    0%{

        box-shadow:
            0 0 0 rgba(11,108,255,0);

    }

    50%{

        box-shadow:
            0 0 35px rgba(11,108,255,.35);

    }

    100%{

        box-shadow:
            0 0 0 rgba(11,108,255,0);

    }

}

/* ==========================================================
   Animation Utility Classes
========================================================== */

.fade-in{

    animation:
        fadeIn .6s ease both;

}

.fade-up{

    animation:
        fadeInUp .6s ease both;

}

.scale-in{

    animation:
        scaleIn .5s ease both;

}

.glow{

    animation:
        glow 2s infinite;

}

.pulse{

    animation:
        pulse 2s infinite;

}

.float{

    animation:
        logoFloat 3s ease-in-out infinite;

}

.spin{

    animation:
        spin 1s linear infinite;

}

/* ==========================================================
   End Of File
========================================================== */