/* ==========================================================
   YADOMART ANIMATIONS
   Version: 1.0
========================================================== */

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

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@keyframes scrollWheel{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    50%{

        opacity:.4;

    }

    100%{

        opacity:0;

        transform:translate(-50%,16px);

    }

}

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

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================
   SPIN
========================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================
   GRADIENT SHIFT
========================================== */

@keyframes gradientShift{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* ==========================================
   BLOB MOVEMENT
========================================== */

@keyframes blobMove{

    0%{

        transform:translate(0,0) scale(1);

    }

    25%{

        transform:translate(40px,-20px) scale(1.05);

    }

    50%{

        transform:translate(-20px,30px) scale(.95);

    }

    75%{

        transform:translate(20px,-15px) scale(1.02);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.hero-left{

    animation:fadeLeft .9s ease forwards;

}

.hero-right{

    animation:fadeRight 1s ease forwards;

}

.hero-card{

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

}

.green-glow{

    animation:blobMove 18s ease-in-out infinite;

}

.gold-glow{

    animation:blobMove 24s ease-in-out infinite reverse;

}

.page{

    animation:pageFade .8s ease;

}

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

.button-primary:hover{

    animation:pulse .45s ease;

}

/* ==========================================
   REVEAL CLASSES
========================================== */

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}