/* ==========================================
   ORO TOKEN
   PREMIUM ANIMATION
========================================== */

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

body{

    animation:

    fadeIn .8s ease;

}

@keyframes fadeIn{

from{

    opacity:0;

    transform:translateY(20px);

}

to{

    opacity:1;

    transform:none;

}

}

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

.hero-logo{

    animation:

    floating 4s ease-in-out infinite;

}

@keyframes floating{

0%{

    transform:translateY(0);

}

50%{

    transform:translateY(-12px);

}

100%{

    transform:translateY(0);

}

}

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

.hero-logo{

    filter:

    drop-shadow(

    0 0 20px

    rgba(255,213,74,.4)

    );

}

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

.connect-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.connect-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 0 35px

    rgba(255,213,74,.6);

}

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

.connect-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70px;

height:100%;

background:

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

transform:skewX(-25deg);

animation:

shine 3s infinite;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:130%;

}

}

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

.card{

transition:

all .35s;

}

.card:hover{

transform:

translateY(-8px);

box-shadow:

0 0 30px

rgba(255,213,74,.18);

}

/* ==========================
STAT
========================== */

.stat{

transition:

all .35s;

}

.stat:hover{

transform:

scale(1.05);

}

/* ==========================
MENU
========================== */

.menu a{

transition:

all .35s;

}

.menu a:hover{

padding-left:26px;

}

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

.background{

animation:

backgroundMove

12s linear infinite;

}

@keyframes backgroundMove{

0%{

transform:

translateY(0);

}

50%{

transform:

translateY(-35px);

}

100%{

transform:

translateY(0);

}

}

/* ==========================
TITLE
========================== */

.hero h2{

animation:

titleShow

1s;

}

@keyframes titleShow{

from{

opacity:0;

transform:

translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

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

.hero p{

animation:

fadeText

1.3s;

}

@keyframes fadeText{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ==========================
FEATURE DELAY
========================== */

.card:nth-child(1){

animation:

fadeIn .8s;

}

.card:nth-child(2){

animation:

fadeIn 1s;

}

.card:nth-child(3){

animation:

fadeIn 1.2s;

}

.card:nth-child(4){

animation:

fadeIn 1.4s;

}

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

html{

scroll-behavior:smooth;

}

/* ==========================
PRESS EFFECT
========================== */

button:active{

transform:

scale(.96);

}

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

img{

user-select:none;

pointer-events:none;

}

/* ==========================
LINK
========================== */

a{

transition:.3s;

}

a:hover{

color:#FFD54A;

}

/* ==========================
PREMIUM GLASS
========================== */

.card,
.stat,
.menu a{

backdrop-filter:

blur(18px);

-webkit-backdrop-filter:

blur(18px);

}

/* ==========================
GOLD BORDER
========================== */

.card:hover,
.stat:hover{

border:

1px solid

rgba(255,213,74,.4);

}

/* ==========================
SHADOW
========================== */

.hero{

text-shadow:

0 0 15px

rgba(255,213,74,.2);

}

/* ==========================
LOADING
========================== */

.connect-btn{

animation:

pulse 2.5s infinite;

}

@keyframes pulse{

0%{

box-shadow:

0 0 0 0

rgba(255,213,74,.45);

}

70%{

box-shadow:

0 0 0 18px

rgba(255,213,74,0);

}

100%{

box-shadow:

0 0 0 0

rgba(255,213,74,0);

}

}