/*=========================================================
ELTC Engineering Guide
animations.css

Industrial Motion Library
Author: ELTC
=========================================================*/


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

*{

transition:
background-color .35s ease,
color .35s ease,
border-color .35s ease,
box-shadow .35s ease;

}


/*=========================================================
KEYFRAMES
=========================================================*/

@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);

}

}

@keyframes fadeLeft{

from{

opacity:0;
transform:translateX(-50px);

}

to{

opacity:1;
transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;
transform:translateX(50px);

}

to{

opacity:1;
transform:translateX(0);

}

}

@keyframes zoomIn{

from{

opacity:0;
transform:scale(.85);

}

to{

opacity:1;
transform:scale(1);

}

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes pulse{

0%{

box-shadow:0 0 0 rgba(35,155,167,.4);

}

50%{

box-shadow:0 0 35px rgba(35,155,167,.35);

}

100%{

box-shadow:0 0 0 rgba(35,155,167,.4);

}

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes glow{

0%{

filter:drop-shadow(0 0 0 rgba(35,155,167,.2));

}

50%{

filter:drop-shadow(0 0 18px rgba(35,155,167,.45));

}

100%{

filter:drop-shadow(0 0 0 rgba(35,155,167,.2));

}

}

@keyframes progressMove{

0%{

background-position:0 0;

}

100%{

background-position:200px 0;

}

}

@keyframes slideRight{

from{

width:0;

}

to{

width:100%;

}

}


/*=========================================================
SCROLL REVEAL
=========================================================*/

.reveal{

opacity:0;

transform:translateY(40px);

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

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


/*=========================================================
ANIMATION HELPERS
=========================================================*/

.fade-in{

animation:fadeIn .8s ease both;

}

.fade-up{

animation:fadeUp .9s ease both;

}

.fade-left{

animation:fadeLeft .9s ease both;

}

.fade-right{

animation:fadeRight .9s ease both;

}

.fade-down{

animation:fadeDown .9s ease both;

}

.zoom-in{

animation:zoomIn .8s ease both;

}


/*=========================================================
HERO
=========================================================*/

.hero-image img{

animation:
float 6s ease-in-out infinite,
glow 5s ease infinite;

}

.hero h1{

animation:fadeLeft .9s ease both;

}

.hero h2{

animation:fadeLeft 1.2s ease both;

}

.hero p{

animation:fadeLeft 1.4s ease both;

}

.hero-buttons{

animation:fadeUp 1.6s ease both;

}


/*=========================================================
SECTION TITLES
=========================================================*/

.section-title{

animation:fadeUp .8s ease both;

}


/*=========================================================
CARDS
=========================================================*/

.feature-card,
.info-card,
.application-card{

transition:
transform .35s,
box-shadow .35s;

}

.feature-card:hover,
.info-card:hover,
.application-card:hover{

transform:
translateY(-10px);

box-shadow:

0 20px 45px rgba(0,0,0,.35);

}


/*=========================================================
BUTTONS
=========================================================*/

.primary-btn{

animation:pulse 3s infinite;

}

.primary-btn:hover{

transform:
translateY(-5px)
scale(1.03);

}

.secondary-btn:hover{

transform:translateY(-5px);

}


/*=========================================================
PRODUCT IMAGE
=========================================================*/

.product-image img{

animation:float 8s ease-in-out infinite;

}


/*=========================================================
SVG DIAGRAMS
=========================================================*/

.diagram-placeholder svg{

animation:fadeIn 1.2s ease;

}

svg .signal{

animation:progressMove 8s linear infinite;

}

svg .arrow{

animation:fadeIn 1.5s ease;

}


/*=========================================================
TABLE ROWS
=========================================================*/

tbody tr{

transition:
background .3s,
transform .3s;

}

tbody tr:hover{

transform:scale(1.01);

}


/*=========================================================
NAVIGATION
=========================================================*/

#main-nav a{

transition:
color .3s;

}

#main-nav a::after{

transition:
width .35s ease;

}


/*=========================================================
SCROLL TO TOP
=========================================================*/

#scrollTop{

transition:
transform .3s,
opacity .3s;

}

#scrollTop:hover{

transform:
translateY(-6px)
scale(1.08);

}


/*=========================================================
PROGRESS BAR
=========================================================*/

#progress-bar{

background:

linear-gradient(
90deg,
#239BA7,
#37D5E2,
#239BA7);

background-size:200px;

animation:

progressMove 8s linear infinite;

}


/*=========================================================
FAQ
=========================================================*/

.faq-item{

transition:
transform .35s,
border-color .35s;

}

.faq-item:hover{

transform:translateX(8px);

}


/*=========================================================
CALLOUTS
=========================================================*/

.callout{

transition:
transform .35s,
box-shadow .35s;

}

.callout:hover{

transform:translateY(-5px);

box-shadow:

0 18px 45px rgba(0,0,0,.35);

}


/*=========================================================
LOGO
=========================================================*/

.logo img{

transition:
transform .35s;

}

.logo img:hover{

transform:scale(1.05);

}


/*=========================================================
FOOTER
=========================================================*/

.footer-logo{

animation:
fadeIn 2s ease;

}


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

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

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

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/*=========================================================
END OF FILE
=========================================================*/