/*======================================

TEXT REVEAL

======================================*/

.reveal{

opacity:0;

transform:translateY(80px);

}

.reveal.active{

opacity:1;

transform:translateY(0);

transition:1s cubic-bezier(.2,.8,.2,1);

}

/*======================================

IMAGE FLOAT

======================================*/

.float{

animation:floatAnimation 7s ease-in-out infinite;

}

@keyframes floatAnimation{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*======================================

ROTATE

======================================*/

.rotate{

animation:rotateSlow 28s linear infinite;

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*======================================

BUTTON GLOW

======================================*/

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::after{

content:"";

position:absolute;

top:-120%;

left:-40%;

width:60%;

height:300%;

background:rgba(255,255,255,.35);

transform:rotate(25deg);

transition:.8s;

}

.btn-primary:hover::after{

left:140%;

}

/*======================================

CARD GLOW

======================================*/

.about-card::after,
.technology-box::after,
.feature-box::after{

content:"";

position:absolute;

inset:0;

background:radial-gradient(circle at top,
rgba(0,212,255,.15),
transparent 60%);

opacity:0;

transition:.5s;

pointer-events:none;

}

.about-card:hover::after,
.technology-box:hover::after,
.feature-box:hover::after{

opacity:1;

}