/*==================================================
            FORSAN ERP ANIMATIONS
==================================================*/

:root{
    --animation-fast:.18s;
    --animation-normal:.3s;
    --animation-slow:.55s;
    --animation-ease:cubic-bezier(.4,0,.2,1);
    --animation-bounce:cubic-bezier(.34,1.56,.64,1);
}

/* Fade */

.animate-fade-in{
    animation:fadeIn var(--animation-normal) var(--animation-ease) both;
}

.animate-fade-out{
    animation:fadeOut var(--animation-normal) var(--animation-ease) both;
}

@keyframes fadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes fadeOut{
    from{
        opacity:1;
    }

    to{
        opacity:0;
    }
}

/* Slide */

.animate-slide-up{
    animation:slideUp var(--animation-slow) var(--animation-ease) both;
}

.animate-slide-down{
    animation:slideDown var(--animation-slow) var(--animation-ease) both;
}

.animate-slide-left{
    animation:slideLeft var(--animation-slow) var(--animation-ease) both;
}

.animate-slide-right{
    animation:slideRight var(--animation-slow) var(--animation-ease) both;
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(35px);
    }

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

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-35px);
    }

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

@keyframes slideLeft{
    from{
        opacity:0;
        transform:translateX(35px);
    }

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

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(-35px);
    }

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

/* Scale */

.animate-scale-in{
    animation:scaleIn var(--animation-normal) var(--animation-bounce) both;
}

.animate-scale-out{
    animation:scaleOut var(--animation-normal) var(--animation-ease) both;
}

@keyframes scaleIn{
    from{
        opacity:0;
        transform:scale(.88);
    }

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

@keyframes scaleOut{
    from{
        opacity:1;
        transform:scale(1);
    }

    to{
        opacity:0;
        transform:scale(.88);
    }
}

/* Zoom */

.animate-zoom-in{
    animation:zoomIn .45s var(--animation-bounce) both;
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.7);
    }

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

/* Bounce */

.animate-bounce{
    animation:bounce 1.2s infinite;
}

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

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

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

/* Pulse */

.animate-pulse{
    animation:pulse 1.8s infinite;
}

@keyframes pulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,99,235,.35);
    }

    70%{
        transform:scale(1.03);
        box-shadow:0 0 0 14px rgba(37,99,235,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,99,235,0);
    }
}

/* Shake */

.animate-shake{
    animation:shake .45s ease;
}

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

    20%{
        transform:translateX(-8px);
    }

    40%{
        transform:translateX(8px);
    }

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

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

/* Float */

.animate-float{
    animation:float 4s ease-in-out infinite;
}

@keyframes float{
    0%,
    100%{
        transform:translateY(0);
    }

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

/* Rotate */

.animate-rotate{
    animation:rotateAnimation 1s linear infinite;
}

@keyframes rotateAnimation{
    from{
        transform:rotate(0);
    }

    to{
        transform:rotate(360deg);
    }
}

/* Glow */

.animate-glow{
    animation:glow 2s ease-in-out infinite alternate;
}

@keyframes glow{
    from{
        box-shadow:
            0 0 6px rgba(37,99,235,.25),
            0 0 14px rgba(37,99,235,.16);
    }

    to{
        box-shadow:
            0 0 14px rgba(37,99,235,.5),
            0 0 32px rgba(37,99,235,.26);
    }
}

/* Gradient Background */

.animated-gradient{
    background-size:300% 300%;
    animation:gradientMove 12s ease infinite;
}

@keyframes gradientMove{
    0%{
        background-position:0 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}

/* Shimmer */

.animate-shimmer{
    position:relative;
    overflow:hidden;
}

.animate-shimmer::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-120%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );
    animation:shimmerMove 1.6s infinite;
}

@keyframes shimmerMove{
    100%{
        transform:translateX(120%);
    }
}

/* Staggered Elements */

.stagger-item{
    opacity:0;
    animation:slideUp .55s var(--animation-ease) forwards;
}

.stagger-item:nth-child(1){
    animation-delay:.05s;
}

.stagger-item:nth-child(2){
    animation-delay:.1s;
}

.stagger-item:nth-child(3){
    animation-delay:.15s;
}

.stagger-item:nth-child(4){
    animation-delay:.2s;
}

.stagger-item:nth-child(5){
    animation-delay:.25s;
}

.stagger-item:nth-child(6){
    animation-delay:.3s;
}

.stagger-item:nth-child(7){
    animation-delay:.35s;
}

.stagger-item:nth-child(8){
    animation-delay:.4s;
}

/* Page Transition */

.page-enter{
    animation:pageEnter .45s var(--animation-ease) both;
}

@keyframes pageEnter{
    from{
        opacity:0;
        transform:translateY(12px);
        filter:blur(3px);
    }

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

/* Modal Animation */

.modal-enter{
    animation:modalEnter .35s var(--animation-bounce) both;
}

@keyframes modalEnter{
    from{
        opacity:0;
        transform:translateY(25px) scale(.96);
    }

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

/* Notification */

.notification-enter{
    animation:notificationEnter .4s var(--animation-bounce) both;
}

@keyframes notificationEnter{
    from{
        opacity:0;
        transform:translateX(40px) scale(.95);
    }

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

/* Delay Utilities */

.animation-delay-1{
    animation-delay:.1s;
}

.animation-delay-2{
    animation-delay:.2s;
}

.animation-delay-3{
    animation-delay:.3s;
}

.animation-delay-4{
    animation-delay:.4s;
}

.animation-delay-5{
    animation-delay:.5s;
}

/* Duration Utilities */

.animation-fast{
    animation-duration:.2s;
}

.animation-normal{
    animation-duration:.4s;
}

.animation-slow{
    animation-duration:.8s;
}

/* Hover Effects */

.hover-lift{
    transition:
        transform var(--animation-normal) var(--animation-ease),
        box-shadow var(--animation-normal) var(--animation-ease);
}

.hover-lift:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.hover-scale{
    transition:transform var(--animation-normal) var(--animation-ease);
}

.hover-scale:hover{
    transform:scale(1.04);
}

.hover-rotate{
    transition:transform var(--animation-normal) var(--animation-ease);
}

.hover-rotate:hover{
    transform:rotate(5deg);
}

/* Reduced Motion */

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }

}