/*=========================================================
APEX EMPIRE
ANIMATIONS.CSS
=========================================================*/

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

*{
transition:
background-color .35s ease,
color .35s ease,
border-color .35s ease,
transform .45s cubic-bezier(.16,1,.3,1),
box-shadow .45s ease;
}

/*==========================
FLOATING
==========================*/

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

.float{

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

}

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

@keyframes glow{

0%{

box-shadow:0 0 0 rgba(212,175,55,.2);

}

50%{

box-shadow:

0 0 40px rgba(212,175,55,.35);

}

100%{

box-shadow:0 0 0 rgba(212,175,55,.2);

}

}

.glow{

animation:glow 4s infinite;

}

/*==========================
ROTATE
==========================*/

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.rotate{

animation:rotateSlow 40s linear infinite;

}

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

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}

.pulse{

animation:pulse 3s infinite;

}

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

.reveal{

opacity:0;

transform:translateY(80px);

transition:1s cubic-bezier(.16,1,.3,1);

}

.reveal.active{

opacity:1;

transform:none;

}

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

.fade{

opacity:0;

transition:1s;

}

.fade.active{

opacity:1;

}

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

.leftReveal{

opacity:0;

transform:translateX(-100px);

transition:1s;

}

.leftReveal.active{

opacity:1;

transform:none;

}

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

.rightReveal{

opacity:0;

transform:translateX(100px);

transition:1s;

}

.rightReveal.active{

opacity:1;

transform:none;

}

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

.scaleReveal{

opacity:0;

transform:scale(.8);

transition:1s;

}

.scaleReveal.active{

opacity:1;

transform:scale(1);

}

/*==========================
TEXT
==========================*/

.textReveal{

overflow:hidden;

}

.textReveal>*{

display:block;

transform:translateY(120%);

transition:1s;

}

.textReveal.active>*{

transform:none;

}

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

.primary-btn{

position:relative;

overflow:hidden;

}

.primary-btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.3),

transparent

);

transition:.7s;

}

.primary-btn:hover::before{

left:100%;

}

/*==========================
SERVICE CARD
==========================*/

.services article{

overflow:hidden;

}

.services article::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.05),

transparent

);

transform:translateX(-100%);

transition:.8s;

}

.services article:hover::after{

transform:translateX(100%);

}

/*==========================
PORTFOLIO
==========================*/

.portfolio article img{

transition:1s;

}

.portfolio article:hover img{

transform:scale(1.1);

}

/*==========================
QUOTE
==========================*/

.quote-box{

position:relative;

overflow:hidden;

}

.quote-box::after{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:250px;

height:250px;

border-radius:50%;

background:rgba(212,175,55,.08);

filter:blur(60px);

animation:floating 8s infinite;

}

/*==========================
BACKGROUND
==========================*/

.bg-gradient{

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

}

/*==========================
SCROLL INDICATOR
==========================*/

.scroll-line{

animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

0%{

opacity:.2;

transform:scaleY(.5);

}

50%{

opacity:1;

transform:scaleY(1);

}

100%{

opacity:.2;

transform:scaleY(.5);

}

}

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

.logo{

transition:.4s;

}

.logo:hover{

letter-spacing:2px;

}

/*==========================
NAV
==========================*/

nav a{

position:relative;

}

nav a::before{

content:"";

position:absolute;

left:50%;

bottom:-12px;

width:0;

height:2px;

background:#D4AF37;

transition:.4s;

transform:translateX(-50%);

}

nav a:hover::before{

width:100%;

}

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

.hero h1{

animation:heroUp 1.2s;

}

@keyframes heroUp{

from{

opacity:0;

transform:translateY(80px);

}

to{

opacity:1;

transform:none;

}

}

.hero p{

animation:heroUp 1.5s;

}

.hero-buttons{

animation:heroUp 1.8s;

}

.stats{

animation:heroUp 2s;

}

/*==========================
LOADER
==========================*/

@keyframes loader{

0%{

width:0;

}

100%{

width:100%;

}

}

/*==========================
CUSTOM CURSOR
==========================*/

.cursor{

transition:

transform .15s,

width .25s,

height .25s;

}

.cursor.active{

width:60px;

height:60px;

}

/*==========================
PARALLAX
==========================*/

.parallax{

will-change:transform;

}

/*==========================
SMOOTH HOVER
==========================*/

img{

transition:transform .8s ease;

}

img:hover{

transform:scale(1.03);

}