/* ==========================================================
   SPARK UI Design System
   Project : SPYRION Technologies
   File    : animations.css
   Version : 3.0.0
   ========================================================== */

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   ONLINE STATUS
========================================================== */

@keyframes onlinePulse{

    0%{

        opacity:1;

    }

    50%{

        opacity:.45;

    }

    100%{

        opacity:1;

    }

}

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

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(37,99,235,.25);

    }

    50%{

        box-shadow:0 0 28px rgba(37,99,235,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(37,99,235,.25);

    }

}

/* ==========================================================
   UTILITY CLASSES
========================================================== */

.fade-in{

    animation:fadeIn .8s ease both;

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-down{

    animation:fadeDown .8s ease both;

}

.slide-left{

    animation:slideLeft .8s ease both;

}

.slide-right{

    animation:slideRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .7s ease both;

}

.floating{

    animation:floating 5s ease-in-out infinite;

}

.glow{

    animation:glow 2.5s infinite;

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}