/* LOGO ROTATION */

.brand-logo:before,
.footer-logo:before,
.circle:before{
content:"";
position:absolute;
border-radius:50%;
border:2px solid transparent;
border-top-color:var(--gold);
border-right-color:var(--gold);
animation:rotate 8s linear infinite
}


.brand-logo:before{
inset:-7px
}


.footer-logo:before{
inset:-8px
}


.circle:before{
inset:-12px
}


.circle:after{
content:"";
position:absolute;
inset:15%;
border-radius:50%;
border:1px dashed rgba(212,175,55,.5);
animation:rotate 18s linear infinite reverse
}


/* ROTATE */

@keyframes rotate{

0%{
transform:rotate(0deg)
}

100%{
transform:rotate(360deg)
}

}



/* FLOAT */

@keyframes float{

0%,100%{
transform:translateY(0)
}

50%{
transform:translateY(-10px)
}

}


/* SHINE BUTTON */

.btn:before{

content:"";
position:absolute;
top:0;
left:-120%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);
transition:.6s

}


.btn:hover:before{

left:120%

}



/* MENU GOLD LINE */

.menu a:after{

content:"";
position:absolute;
bottom:3px;
right:50%;
left:50%;
height:2px;
background:var(--gold);
transition:.35s

}


.menu a:hover:after{

right:15%;
left:15%

}



/* CARD LIGHT */

.card:hover{

animation:cardUp .35s ease

}


@keyframes cardUp{

from{
transform:translateY(0)
}

to{
transform:translateY(-7px)
}

}



/* SIMPLE FADE */

.fade-up{

animation:fadeUp .8s ease both

}


@keyframes fadeUp{

from{

opacity:0;
transform:translateY(30px)

}

to{

opacity:1;
transform:translateY(0)

}

}



/* LOGO FLOAT */

.logo-float{

animation:float 4s ease-in-out infinite

}



/* GOLD PULSE */

.gold-pulse{

animation:pulse 3s infinite

}


@keyframes pulse{

0%,
100%{

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

}

50%{

box-shadow:0 0 35px rgba(212,175,55,.35)

}

}