@keyframes heroReveal{

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

}

@keyframes systemReveal{

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

}

@keyframes arrowReveal{

to{
opacity:1;
}

}

@keyframes dataFlow{

0%{
top:-60px;
opacity:0;
}

20%{
opacity:1;
}

80%{
opacity:1;
}

100%{
top:100%;
opacity:0;
}

}

@keyframes dataParticle{

0%{
top:-10px;
opacity:0;
}

10%{
opacity:1;
}

90%{
opacity:1;
}

100%{
top:100%;
opacity:0;
}

}

@keyframes gridDrift{

0%{
transform:translate(0,0);
}

100%{
transform:translate(-120px,-120px);
}

}

@keyframes connectorFlow{

0%{

left:-10px;
opacity:0;

}

20%{
opacity:1;
}

80%{
opacity:1;
}

100%{

left:100%;
opacity:0;

}

}