/*==========================================================
  ROVING RUSH
  animations.css
  PART 1
  Keyframes & Core Animations
==========================================================*/

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

@keyframes loaderFloat{

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

    50%{
        transform:translateY(-12px);
    }

}

@keyframes loaderRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes progressLoad{

    from{
        width:0%;
    }

    to{
        width:100%;
    }

}

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

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

@keyframes fadeRight{

    from{
        opacity:0;
        transform:translateX(80px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/*==========================================================
  ZOOM
==========================================================*/

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes zoomOut{

    from{
        transform:scale(1.1);
    }

    to{
        transform:scale(1);
    }

}

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

@keyframes heroReveal{

    from{

        opacity:0;

        transform:translateY(50px);

        letter-spacing:.15em;

    }

    to{

        opacity:1;

        transform:translateY(0);

        letter-spacing:0;

    }

}

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

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes floatingSlow{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-30px);
    }

    100%{
        transform:translateY(0);
    }

}

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

@keyframes scrollMouse{

    0%{
        opacity:0;
        transform:translateY(0);
    }

    30%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translateY(22px);
    }

}

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

@keyframes glow{

    0%{
        box-shadow:0 0 10px rgba(0,194,255,.2);
    }

    50%{
        box-shadow:0 0 35px rgba(0,194,255,.55);
    }

    100%{
        box-shadow:0 0 10px rgba(0,194,255,.2);
    }

}

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

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}
/*==========================================================
  ANIMATION UTILITY CLASSES
==========================================================*/

.animate{
    animation-duration:.9s;
    animation-fill-mode:both;
    animation-timing-function:cubic-bezier(.22,.61,.36,1);
    will-change:transform,opacity;
}

.fade-in{
    animation-name:fadeIn;
}

.fade-up{
    animation-name:fadeUp;
}

.fade-down{
    animation-name:fadeDown;
}

.fade-left{
    animation-name:fadeLeft;
}

.fade-right{
    animation-name:fadeRight;
}

.zoom-in{
    animation-name:zoomIn;
}

.hero-reveal{
    animation-name:heroReveal;
}

.float{
    animation:floating 6s ease-in-out infinite;
}

.float-slow{
    animation:floatingSlow 10s ease-in-out infinite;
}

.glow{
    animation:glow 3s ease-in-out infinite;
}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

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

    will-change:transform,opacity;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

    transition:.8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(80px);

    transition:.8s ease;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-scale{

    opacity:0;

    transform:scale(.85);

    transition:.8s ease;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}

/*==========================================================
  STAGGER DELAYS
==========================================================*/

.delay-1{ animation-delay:.1s; transition-delay:.1s; }
.delay-2{ animation-delay:.2s; transition-delay:.2s; }
.delay-3{ animation-delay:.3s; transition-delay:.3s; }
.delay-4{ animation-delay:.4s; transition-delay:.4s; }
.delay-5{ animation-delay:.5s; transition-delay:.5s; }
.delay-6{ animation-delay:.6s; transition-delay:.6s; }

/*==========================================================
  BUTTON RIPPLE EFFECT
==========================================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn .ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    background:rgba(255,255,255,.45);

    animation:ripple .7s linear;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(5);

        opacity:0;

    }

}

/*==========================================================
  GLASS HOVER
==========================================================*/

.glass-hover{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

.glass-hover:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.10);

    box-shadow:0 18px 40px rgba(0,194,255,.18);

}

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

.image-zoom{

    overflow:hidden;

}

.image-zoom img{

    transition:transform .8s ease;

}

.image-zoom:hover img{

    transform:scale(1.1);

}

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

.parallax{

    transition:transform .15s linear;

    will-change:transform;

}

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

.gradient-text{

    background:linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-accent),
        #ffffff
    );

    background-size:200% auto;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:gradientMove 6s linear infinite;

}

/*==========================================================
  PERFORMANCE
==========================================================*/

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}