/* Fade */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* Zoom */

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.92);

}

100%{

opacity:1;

transform:scale(1);

}

}

/* Rotate */

@keyframes rotateSlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/* Floating */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0);

}

}

/* Shine */

@keyframes shine{

0%{

left:-120%;

}

100%{

left:120%;

}

}
/* ==========================================
      CINEMATIC LIGHT
========================================== */

@keyframes goldGlow{

    0%{

        transform:translateY(0px) scale(1);

        opacity:.9;

    }

    50%{

        transform:translateY(-20px) scale(1.08);

        opacity:1;

    }

    100%{

        transform:translateY(0px) scale(1);

        opacity:.9;

    }

}

@keyframes goldGlow2{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes shine{

    0%{

        left:-90%;

    }

    100%{

        left:180%;

    }

}
/* ==========================================
          INDUSTRIAL HERO
========================================== */

@keyframes ringRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes pulseGlow{

    0%{

        transform:scale(.95);

        opacity:.75;

    }

    50%{

        transform:scale(1.1);

        opacity:1;

    }

    100%{

        transform:scale(.95);

        opacity:.75;

    }

}

@keyframes floatLogo{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0px);

    }

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

@keyframes scrollDown{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    60%{

        transform:translateY(18px);

        opacity:.2;

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}
/*=====================================
        HERO REVEAL
======================================*/

@keyframes heroContentReveal{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroImageReveal{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}