/*
==========================================================
A SQUARE L INNOVATE DESIGN SYSTEM (ASLDS)
Version: 1.1.0
File: animations.css
Author: A Square L Innovate

Description:
Global animation library.

==========================================================
*/


/* ======================================================
   DURATIONS
====================================================== */

:root{

--animation-fast:.2s;

--animation-normal:.35s;

--animation-slow:.6s;

}



/* ======================================================
   FADE
====================================================== */

.fade-in{

animation:fadeIn var(--animation-normal) ease;

}

.fade-out{

animation:fadeOut var(--animation-normal) ease;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes fadeOut{

from{

opacity:1;

}

to{

opacity:0;

}

}



/* ======================================================
   SLIDE
====================================================== */

.slide-up{

animation:slideUp .45s ease;

}

.slide-down{

animation:slideDown .45s ease;

}

.slide-left{

animation:slideLeft .45s ease;

}

.slide-right{

animation:slideRight .45s ease;

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes slideDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:none;

}

}



/* ======================================================
   SCALE
====================================================== */

.scale-in{

animation:scaleIn .35s ease;

}

@keyframes scaleIn{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}



/* ======================================================
   FLOAT
====================================================== */

.float{

animation:float 4s ease infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}



/* ======================================================
   PULSE
====================================================== */

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}



/* ======================================================
   SPIN
====================================================== */

.spin{

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}



/* ======================================================
   SHAKE
====================================================== */

.shake{

animation:shake .45s;

}

@keyframes shake{

20%{

transform:translateX(-8px);

}

40%{

transform:translateX(8px);

}

60%{

transform:translateX(-6px);

}

80%{

transform:translateX(6px);

}

}



/* ======================================================
   BOUNCE
====================================================== */

.bounce{

animation:bounce 1s;

}

@keyframes bounce{

40%{

transform:translateY(-20px);

}

60%{

transform:translateY(-10px);

}

80%{

transform:translateY(-4px);

}

}



/* ======================================================
   GLOW
====================================================== */

.glow{

animation:glow 2s infinite;

}

@keyframes glow{

0%,100%{

box-shadow:0 0 0 rgba(212,175,55,0);

}

50%{

box-shadow:0 0 30px rgba(212,175,55,.45);

}

}


/* ======================================================
   GLOW PULSE
====================================================== */

@keyframes glowPulse{
    0%{
        opacity:.55;
    }
    100%{
        opacity:1;
    }
}


/* ======================================================
   SKELETON LOADER
====================================================== */

.skeleton{

background:

linear-gradient(

90deg,

#111 25%,

#1c1c1c 50%,

#111 75%

);

background-size:400% 100%;

animation:skeleton 1.5s infinite;

}

@keyframes skeleton{

0%{

background-position:100% 0;

}

100%{

background-position:-100% 0;

}

}



/* ======================================================
   RIPPLE HOVER
====================================================== */

.ripple{

position:relative;

overflow:hidden;

}

.ripple::after{

content:"";

position:absolute;

left:50%;

top:50%;

width:0;

height:0;

border-radius:50%;

background:rgba(255,255,255,.15);

transform:translate(-50%,-50%);

transition:.5s;

}

.ripple:hover::after{

width:300px;

height:300px;

}



/* ======================================================
   HOVER LIFT
====================================================== */

.hover-lift{

transition:.3s;

}

.hover-lift:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}



/* ======================================================
   HOVER SCALE
====================================================== */

.hover-scale{

transition:.3s;

}

.hover-scale:hover{

transform:scale(1.05);

}



/* ======================================================
   HOVER ROTATE
====================================================== */

.hover-rotate{

transition:.35s;

}

.hover-rotate:hover{

transform:rotate(6deg);

}



/* ======================================================
   PAGE TRANSITION
====================================================== */

.page-enter{

animation:pageEnter .6s ease;

}

@keyframes pageEnter{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}



/* ======================================================
   STAGGER
====================================================== */

.stagger>*{

opacity:0;

animation:fadeIn .6s forwards;

}

.stagger>*:nth-child(1){

animation-delay:.1s;

}

.stagger>*:nth-child(2){

animation-delay:.2s;

}

.stagger>*:nth-child(3){

animation-delay:.3s;

}

.stagger>*:nth-child(4){

animation-delay:.4s;

}

.stagger>*:nth-child(5){

animation-delay:.5s;

}



/* ======================================================
   REDUCE MOTION
====================================================== */

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}