/* =========================================================
   STUDIO ART ESSENTIEL
   ANIMATIONS V2
========================================================= */

/* =========================================================
   GLOBAL TRANSITIONS
========================================================= */

.ae-animated{

    transition:
    all 0.22s ease;

}

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

@keyframes aeFadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.ae-fade-in{

    animation:
    aeFadeIn 0.35s ease forwards;

}

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

@keyframes aeFadeUp{

    from{

        opacity:0;

        transform:
        translateY(16px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.ae-fade-up{

    animation:
    aeFadeUp 0.45s ease forwards;

}

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

@keyframes aeFadeDown{

    from{

        opacity:0;

        transform:
        translateY(-16px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.ae-fade-down{

    animation:
    aeFadeDown 0.45s ease forwards;

}

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

@keyframes aeZoomIn{

    from{

        opacity:0;

        transform:
        scale(0.96);

    }

    to{

        opacity:1;

        transform:
        scale(1);

    }

}

.ae-zoom-in{

    animation:
    aeZoomIn 0.35s ease forwards;

}

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

@keyframes aeSlideLeft{

    from{

        opacity:0;

        transform:
        translateX(20px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}

.ae-slide-left{

    animation:
    aeSlideLeft 0.4s ease forwards;

}

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

@keyframes aeSlideRight{

    from{

        opacity:0;

        transform:
        translateX(-20px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}

.ae-slide-right{

    animation:
    aeSlideRight 0.4s ease forwards;

}

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

.ae-hover-card{

    transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;

}

.ae-hover-card:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 14px 30px rgba(11,132,216,0.12);

}

/* =========================================================
   BUTTON HOVER
========================================================= */

.ae-hover-btn{

    transition:
    all 0.22s ease;

}

.ae-hover-btn:hover{

    transform:
    translateY(-1px);

}

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

.ae-glow-blue:hover{

    box-shadow:
    0 6px 18px rgba(11,132,216,0.18);

}

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

@keyframes aeFloat{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

.ae-float{

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

}

/* =========================================================
   SPINNER
========================================================= */

@keyframes aeSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.ae-spinner{

    animation:
    aeSpin 0.8s linear infinite;

}

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

@keyframes aePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

.ae-pulse{

    animation:
    aePulse 2.5s ease infinite;

}

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

@keyframes aeShimmer{

    0%{
        background-position:-400px 0;
    }

    100%{
        background-position:400px 0;
    }

}

.ae-loading-shimmer{

    background:
    linear-gradient(
        90deg,
        #f5f7fa 25%,
        #e9eef5 37%,
        #f5f7fa 63%
    );

    background-size:
    800px 100%;

    animation:
    aeShimmer 1.4s infinite linear;

}

/* =========================================================
   SIDEBAR ITEM HOVER
========================================================= */

.ae-sidebar a{

    position:relative;

    overflow:hidden;

}

.ae-sidebar a::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:3px;
    height:100%;

    background:#0b84d8;

    transform:
    scaleY(0);

    transform-origin:top;

    transition:
    transform 0.22s ease;

}

.ae-sidebar a:hover::before{

    transform:
    scaleY(1);

}

/* =========================================================
   TABLE ROW HOVER
========================================================= */

.ae-table tr,
.ae-admin-table tr{

    transition:
    background 0.18s ease,
    transform 0.18s ease;

}

.ae-table tr:hover,
.ae-admin-table tr:hover{

    background:#fafcff;

}

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

.ae-image-hover{

    overflow:hidden;

}

.ae-image-hover img{

    transition:
    transform 0.4s ease;

}

.ae-image-hover:hover img{

    transform:
    scale(1.04);

}

/* =========================================================
   MODAL APPEAR
========================================================= */

@keyframes aeModalIn{

    from{

        opacity:0;

        transform:
        translateY(20px)
        scale(0.98);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

.ae-modal-in{

    animation:
    aeModalIn 0.28s ease forwards;

}

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

@keyframes aePageIn{

    from{

        opacity:0;

        transform:
        translateY(8px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.ae-page-transition{

    animation:
    aePageIn 0.35s ease forwards;

}

/* =========================================================
   NOTIFICATION POP
========================================================= */

@keyframes aePop{

    0%{

        opacity:0;

        transform:
        scale(0.9);

    }

    100%{

        opacity:1;

        transform:
        scale(1);

    }

}

.ae-pop{

    animation:
    aePop 0.22s ease forwards;

}

/* =========================================================
   HOVER UNDERLINE
========================================================= */

.ae-link-animated{

    position:relative;

}

.ae-link-animated::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-2px;

    width:0;

    height:1px;

    background:#0b84d8;

    transition:
    width 0.22s ease;

}

.ae-link-animated:hover::after{

    width:100%;

}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

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

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}