/* ==========================================================
   ADMIN CSS FRAMEWORK
   File : base/animations.css
   Purpose : Animation & Transition System
========================================================== */

/* ===========================
   GLOBAL TRANSITION
=========================== */

.fade-in,
.page-header,
.filter-card,
.table-card,
.card,
.modal-content{
    animation:fadeIn .35s ease;
}

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

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

.fade-up{
    animation:fadeUp .45s ease forwards;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

.fade-down{
    animation:fadeDown .45s ease forwards;
}

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

.zoom-in{
    animation:zoomIn .30s ease;
}

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.95);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

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

.slide-left{
    animation:slideLeft .40s ease;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(20px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

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

.slide-right{
    animation:slideRight .40s ease;
}

@keyframes slideRight{

    from{
        opacity:0;
        transform:translateX(-20px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

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

.spin{
    animation:spin .8s linear infinite;
}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}

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

.pulse{
    animation:pulse 1.4s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

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

.bounce{
    animation:bounce 1s infinite;
}

@keyframes bounce{

    0%,20%,50%,80%,100%{
        transform:translateY(0);
    }

    40%{
        transform:translateY(-8px);
    }

    60%{
        transform:translateY(-4px);
    }

}

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

.shake{
    animation:shake .45s;
}

@keyframes shake{

    0%,100%{
        transform:translateX(0);
    }

    20%,60%{
        transform:translateX(-5px);
    }

    40%,80%{
        transform:translateX(5px);
    }

}

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

.hover-lift{
    transition:var(--transition);
}

.hover-lift:hover{

    transform:translateY(-3px);

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

}

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

.hover-scale{
    transition:var(--transition);
}

.hover-scale:hover{

    transform:scale(1.03);

}

/* ===========================
   BUTTON PRESS
=========================== */

.btn:active,
.action-btn:active{

    transform:scale(.97);

}

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

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}