/* ==========================================
   DZIKIR APP ANIMATION
   Version 1.0
========================================== */

:root{
    --animation-fast:.25s;
    --animation-normal:.4s;
    --animation-slow:.8s;

    --ease:cubic-bezier(.4,0,.2,1);
}

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

.fade-in{
    animation:fadeIn .5s var(--ease);
}

.fade-out{
    animation:fadeOut .4s forwards;
}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes fadeOut{

from{

opacity:1;

}

to{

opacity:0;

}

}

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

.slide-up{

animation:slideUp .5s var(--ease);

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.slide-down{

animation:slideDown .4s var(--ease);

}

@keyframes slideDown{

from{

opacity:0;

transform:translateY(-35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.slide-left{

animation:slideLeft .45s var(--ease);

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.slide-right{

animation:slideRight .45s var(--ease);

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/* ==========================================
   ZOOM
========================================== */

.zoom-in{

animation:zoomIn .35s ease;

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}

.zoom-out{

animation:zoomOut .3s ease forwards;

}

@keyframes zoomOut{

to{

opacity:0;

transform:scale(.9);

}

}

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

.float{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

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

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

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

.rotate{

animation:rotate 2s linear infinite;

}

@keyframes rotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

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

.shake{

animation:shake .45s;

}

@keyframes shake{

0%,100%{

transform:translateX(0);

}

20%{

transform:translateX(-8px);

}

40%{

transform:translateX(8px);

}

60%{

transform:translateX(-6px);

}

80%{

transform:translateX(6px);

}

}

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

.bounce{

animation:bounce 1s;

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translateY(0);

}

40%{

transform:translateY(-18px);

}

60%{

transform:translateY(-8px);

}

}

/* ==========================================
   RIPPLE BUTTON
========================================== */

.btn{

position:relative;

overflow:hidden;

}

.btn::after{

content:"";

position:absolute;

width:0;

height:0;

border-radius:50%;

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

left:50%;

top:50%;

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

transition:.6s;

}

.btn:active::after{

width:350px;

height:350px;

}

/* ==========================================
   CARD HOVER
========================================== */

.card{

transition:.3s;

}

.card:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/* ==========================================
   ICON
========================================== */

.icon-hover{

transition:.3s;

}

.icon-hover:hover{

transform:scale(1.2) rotate(8deg);

}

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

.page{

animation:pageOpen .5s;

}

@keyframes pageOpen{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================
   LOADING
========================================== */

.loading{

width:45px;

height:45px;

border:5px solid #ddd;

border-top-color:#10b981;

border-radius:50%;

animation:loading .8s linear infinite;

}

@keyframes loading{

100%{

transform:rotate(360deg);

}

}

/* ==========================================
   TOAST
========================================== */

.toast{

animation:toast .35s ease;

}

@keyframes toast{

from{

transform:translateY(40px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

/* ==========================================
   SCROLL REVEAL
========================================== */

.reveal{

opacity:0;

transform:translateY(50px);

transition:all .7s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}