/*======================================
  Wx Design System v1.0
  Animations
======================================*/


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

.fade-transition{
    transition:opacity var(--transition),
               transform var(--transition);
}



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

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

.hover-lift:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}



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

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

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



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

.btn{
    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}



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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-up.active{

    opacity:1;

    transform:translateY(0);
}



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

.fade-left{

    opacity:0;

    transform:translateX(-40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-left.active{

    opacity:1;

    transform:translateX(0);
}



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

.fade-right{

    opacity:0;

    transform:translateX(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-right.active{

    opacity:1;

    transform:translateX(0);
}



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

.zoom{

    opacity:0;

    transform:scale(.94);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.zoom.active{

    opacity:1;

    transform:scale(1);
}



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

.float{

    animation:float 6s ease-in-out infinite;
}

@keyframes float{

    0%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-12px);
    }

    100%{

        transform:translateY(0);
    }
}



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

.pulse{

    animation:pulse 2.5s infinite;
}

@keyframes pulse{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.05);
    }

    100%{

        transform:scale(1);
    }
}



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

.spin{

    animation:spin 20s linear infinite;
}

@keyframes spin{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }
}



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

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

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

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }
}